Lightweight Web Rich text box--wangeditor user's Manual (4)--Configuration drop-down menu demo

Wangeditor Demo Head

Welcome to Wangeditor, please enter the content ...

For detailed configuration instructions in this article, see the Lightweight web Rich text box--wangeditor user's Manual (4)-Configure drop-down menu, which lists only the important code:

<Linkrel= "stylesheet"type= "Text/css"href= "Fontawesome-4.2.0/css/font-awesome.min.css"><!--[If Ie]><link rel= "stylesheet" type= "Text/css" href= "Fontawesome-4.2.0/css/font-awesome-ie7.min.css" ><! [EndIf] -<Linkrel= "stylesheet"type= "Text/css"href= "Css/wangeditor-1.1.0-min.css"><Scriptsrc= "Js/jquery-1.10.2.min.js"type= "Text/javascript"></Script><Scripttype= "Text/javascript"src= ' Js/wangeditor-1.1.0-min.js '></Script>

<DivID= ' Txtdiv 'style= ' border:1pxsolid #cccccc; height:240px; '>    <P>Welcome to use<b>Wangeditor</b>, please enter the content ...</P></Div><Scripttype= "Text/javascript">    $(function(){        //Menu Configuration        varCustomMenus= {            'Head': {                'title': 'Set Title',                //title                'type': 'Dropmenu',                 //type Btn/dropmenu/modal                //Dropmenu Type does not support shortcut keys                'txt':'FA Fa-flag-o',               //fontawesome Style                'Command': 'Formatblock',          //the name of the command to execute in Document.execcommand                'Dropmenu': (function(){            //dropmenu type of menu, to have a ' dropmenu ' method, return to the drop-down menu DOM node                    varHTML=     '<ul>' +                                 '<li><a href= "#" commandvalue= "' +                                 '<li><a href= "#" commandvalue= "' +                                 '<li><a href= "#" commandvalue= "' +                                 '<li><a href= "#" commandvalue= "' +                                 '<li><a href= "#" commandvalue= "<p>" > Body </a></li>' +                                 '</ul>'; return$ (HTML); })(),                'Callback': function(){             //Custom Callback Functions                    //alert (' Custom callback function ');                }            }        }; //A word, you can turn a div into a rich text box! O (∩_∩) o        var$editor= $('#txtDiv'). Wangeditor ({'CustomMenus': CustomMenus,'InsertBefore': {                'ForeColor': 'Head'            }        }); });</Script>

Note : In the demo above, the "Background color" button icon is not displayed, this is because I quoted the Fontawesome font library version is too low, because the blog park is not allowed to upload font library files, so have to refer to CDN. But it's not going to happen if you download it and run it. It is hereby stated.

In addition , the blog park customized the style of the title, so it will show the appearance. When you download and use your own wangeditor, you can also customize the title style, whatever the definition, is consistent with what you see and what you get.

-------------------------------------------------------------------------------------------------------------

:https://github.com/wangfupeng1988/wangEditor

Demo Demo & All configuration instructions:http://www.cnblogs.com/wangfupeng1988/p/4198428.html

Chat QQ Group:164999061

-------------------------------------------------------------------------------------------------------------

Please pay attention to my Weibo.

Also welcome to follow my tutorials:

" from design to model"" deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

-------------------------------------------------------------------------------------------------------------

Lightweight Web Rich text box--wangeditor user's Manual (4)--Configuration drop-down menu demo