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檔,刷新頁面你會看到不一樣的地方: