Html怎么插入百度富文本编辑器ueditor-js教程-PHP中文网

首页

web前端

js教程

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

little bottle

Apr 24, 2019 pm 03:20 PM

html

本篇文章的主要内容是教大家如何在Html里插入百度富文本编辑器，感兴趣的朋友可以了解一下，希望能对你有所帮助。

在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,假如你用百度富文本编辑器,首先需要下载好百度编辑器的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(&#39;editor&#39;, {});
    </script>
</body>
</html>

登录后复制

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

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

    <script type="text/javascript">
        //实例化编辑器
        var ue = UE.getEditor(&#39;editor&#39;, {
        toolbars: [
            [
                &#39;undo&#39;, //撤销
                &#39;bold&#39;, //加粗
                &#39;underline&#39;, //下划线
                &#39;preview&#39;, //预览
                &#39;horizontal&#39;, //分隔线
                &#39;inserttitle&#39;, //插入标题
                &#39;cleardoc&#39;, //清空文档
                &#39;fontfamily&#39;, //字体
                &#39;fontsize&#39;, //字号
                &#39;paragraph&#39;, //段落格式
                &#39;simpleupload&#39;, //单图上传
                &#39;insertimage&#39;, //多图上传
                &#39;attachment&#39;, //附件
                &#39;music&#39;, //音乐
                &#39;inserttable&#39;, //插入表格
                &#39;emotion&#39;, //表情
                &#39;insertvideo&#39;, //视频
                &#39;justifyleft&#39;, //居左对齐
                &#39;justifyright&#39;, //居右对齐
                &#39;justifycenter&#39;, //居中对
                &#39;justifyjustify&#39;, //两端对齐
                &#39;forecolor&#39;, //字体颜色
                &#39;fullscreen&#39;, //全屏
                &#39;edittip &#39;, //编辑提示
                &#39;customstyle&#39;, //自定义标题
                &#39;template&#39;, //模板
                 ]
            ]
        });
    </script>

登录后复制

刷新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文件可以定制编辑器的很多功能,只需要将对应属性前面的'//'去掉,true为开启,false为关闭进行设置即可.比如:

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

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

登录后复制

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

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