Html引入百度富文本編輯器ueditor

時間 2019-11-10

原文原文鏈接

在平常工做用,確定有用到富文本編輯器的時候,富文本編輯器功能強大使用方便,我用的是百度富文本編輯器,首先須要下載好百度編輯器的demo，javascript

而後建立ueditor.html文件,引入百度編輯器，而後在html文件內引入，而後再用js實例化編輯器便可,代碼以下：php

<!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文件就能看到以下圖所示:html

這是實例化後的初始編輯器,裏面的功能有不少,其中有一部分多是咱們徹底用不到的,想定製怎麼辦呢?別捉急,百度提供了能夠定製的功能,將上面實例化編輯器的js代碼改成如下代碼:java

    <script type="text/javascript">
        //實例化編輯器
        var ue = UE.getEditor('editor', {
        toolbars: [
            [
                'undo', //撤銷
                'bold', //加粗
                'underline', //下劃線
                'preview', //預覽
                'horizontal', //分隔線
                'inserttitle', //插入標題
                'cleardoc', //清空文檔
                'fontfamily', //字體
                'fontsize', //字號
                'paragraph', //段落格式
                'simpleupload', //單圖上傳
                'insertimage', //多圖上傳
                'attachment', //附件
                'music', //音樂
                'inserttable', //插入表格
                'emotion', //表情
                'insertvideo', //視頻
                'justifyleft', //居左對齊
                'justifyright', //居右對齊
                'justifycenter', //居中對
                'justifyjustify', //兩端對齊
                'forecolor', //字體顏色
                'fullscreen', //全屏
                'edittip ', //編輯提示
                'customstyle', //自定義標題
                'template', //模板
                 ]
            ]
        });
    </script>

刷新ueditor.html頁面你就會看到變化了:web

想定製什麼功能,只須要參照上面下載的編輯器demo內的ueditor.config.js文件中toolbars屬性,將對應的字符串添加進去便可:json

        //工具欄上的全部的功能按鈕和下拉框，能夠在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

按照上面代碼修改完ueditor.config.js文件,刷新頁面你會看到不同的地方:app

下面的元素路徑和字數統計都消失了,是否是更加美觀了呢O(∩_∩)O~webapp

實際應用時咱們還有可能在一個域名下上傳百度編輯器編輯的內容(例如:在www.52lnamp.com域名下上傳了一張圖片)，而需求不僅僅是要在這域名下展現,還須要能夠在其它域名下展現,這時就會出現圖片不存在的狀況，編輯器

這是由於百度編輯器的配置文件中默認的上傳路徑是相對路徑，也就是說上面上傳的圖片的地址是相對於當前的域名進行上傳的,只有在你上傳的域名下能夠展現,其它域名是顯示不出來的,

若是要在另一個域名上展現的話只須要修改配置文件爲絕對路徑就能夠了，打開上面下載的demo，找到php/config.json文件,打開後你會看到

其中imageUrlPrefix這個屬性加上域名便可:"imageUrlPrefix": "http://www.xxx.com", /* 圖片訪問路徑前綴 */

須要注意的是添加域名的時候必須帶上http or https,只有這樣寫出來的才能正常顯示,不加的話在你引用的時候會在前面重複加上一個域名,基本瞭解了這些足以應對平常的需求,有其它另類的需求能夠參考百度編輯器文檔,也歡迎補充互學.