Html怎么插入百度富文本编辑器ueditor

在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,假如你用百度富文本编辑器,首先需要下载好百度编辑器的demo，然后创建ueditor.html文件,引入百度编辑器，然后在html文件内引入，然后再用js实例化编辑器即可。代码如下：

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

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

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

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

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

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

        //elementPathEnabled
        //是否启用元素路径，默认是显示
        ,elementPathEnabled : false

        //wordCount
        ,wordCount:false          //是否开启字数统计
        //,maximumWords:10000       //允许的最大字符数

　　　　　 // 是否自动长高,默认true
　　　　　,autoHeightEnabled:false

按照上面代码修改完ueditor.config.js文件,刷新页面你会看到不一样的地方:

其中imageUrlPrefix这个属性加上域名即可:"imageUrlPrefix": "http://www.xxx.com", /* 图片访问路径前缀 */

需要注意的是添加域名的时候必须带上http or https,只有这样写出来的才能正常显示,不加的话在你引用的时候会在前面重复加上一个域名,基本了解了这些足以应对日常的需求,有其它另类的需求可以参考百度编辑器文档,也欢迎补充互学.

相关教程：Javascript视频教程

以上就是Html怎么插入百度富文本编辑器ueditor的详细内容，更多请关注 第一PHP社区 其它相关文章！