Html引入百度富文本编辑器ueditor及自定义工具栏

在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo，

然后创建ueditor.html文件,引入百度编辑器，然后在html文件内引入，然后再用js实例化编辑器即可,代码如下：

DOCTYPE html>
<html>
<head>
<title>百度编辑器title>
head>
<body>
    <script type="text/Javascript" charset="utf-8" src="ueditor/ueditor.config.js">script>
    <script type="text/Javascript" charset="utf-8" src="ueditor/ueditor.all.min.js">script>
    <script type="text/Javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js">script>
    <script id="editor" type="text/plain" name="gdesc" style="width:100%;height:350px;">script>
    <script type="text/Javascript">
        //实例化编辑器
        var ue = UE.getEditor(\'editor\', {});
    script>
body>
html>

到这里在浏览器打开上面的ueditor.html文件就能看到如下图所示:

这是实例化后的初始编辑器,里面的功能有很多,其中有一部分可能是我们完全用不到的,想定制怎么办呢?别捉急,百度提供了可以定制的功能,将上面实例化编辑器的js代码改为以下代码:

刷新ueditor.html页面你就会看到变化了:

想定制什么功能,只需要参照上面下载的编辑器demo内的ueditor.config.js文件中toolbars属性,将对应的字符串添加进去即可:

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义
, toolbars: [[
    \'fullscreen\', \'source\', \'|\', \'undo\', \'redo\', \'|\',
    \'bold\', \'italic\', \'underline\', \'fontborder\', \'strikethrough\', \'superscript\', \'subscript\', \'removeformat\', \'formatmatch\', \'autotypeset\', \'blockquote\', \'pasteplain\', \'|\', \'forecolor\', \'backcolor\', \'insertorderedlist\', \'insertunorderedlist\', \'selectall\', \'cleardoc\', \'|\',
    \'rowspacingtop\', \'rowspacingbottom\', \'lineheight\', \'|\',
    \'customstyle\', \'paragraph\', \'fontfamily\', \'fontsize\', \'|\',
    \'directionalityltr\', \'directionalityrtl\', \'indent\', \'|\',
    \'justifyleft\', \'justifycenter\', \'justifyright\', \'justifyjustify\', \'|\', \'touppercase\', \'tolowercase\', \'|\',
    \'link\', \'unlink\', \'anchor\', \'|\', \'imagenone\', \'imageleft\', \'imageright\', \'imagecenter\', \'|\',
    \'simpleupload\', \'insertimage\', \'emotion\', \'scrawl\', \'insertvideo\', \'music\', \'attachment\', \'map\', \'gmap\', \'insertframe\', \'insertcode\', \'webapp\', \'pagebreak\', \'template\', \'background\', \'|\',
    \'horizontal\', \'date\', \'time\', \'spechars\', \'snapscreen\', \'wordimage\', \'|\',
    \'inserttable\', \'deletetable\', \'insertparagraphbeforetable\', \'insertrow\', \'deleterow\', \'insertcol\', \'deletecol\', \'mergecells\', \'mergeright\', \'mergedown\', \'splittocells\', \'splittorows\', \'splittocols\', \'charts\', \'|\',
    \'print\', \'preview\', \'searchreplace\', \'drafts\', \'help\'
]]

ueditor.config.js文件可以定制编辑器的很多功能,只需要将对应属性前面的\'//\'去掉,true为开启,false为关闭进行设置即可.比如:

//elementPathEnabled
//是否启用元素路径，默认是显示
,elementPathEnabled : false
//wordCount
,wordCount:false          //是否开启字数统计
//,maximumWords:10000       //允许的最大字符数
 // 是否自动长高,默认true
,autoHeightEnabled:false