UEditor簡介

UEditor是由百度「FEX前端研發(fā)團(tuán)隊(duì)」開發(fā)的所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼。

本文以最新版本的1.4.3.3版本為教程來講述

具體文檔參見：http://fex.baidu.com/ueditor/

135編輯器簡介

135編輯器是一款提供微信公眾號(hào)文章排版和內(nèi)容編輯的在線工具,樣式豐富,支持秒刷、收藏樣式和顏色、圖片素材編輯、圖片水印、一鍵排版等功能,輕松編輯微信公眾號(hào)圖文。他是一款基于UEditor富文本的編輯器，一共分為兩種類型，一種是免費(fèi)類型的嵌入型，也就是把135編輯器嵌入到UEditor富文本里面的菜單中，還有一種就是收費(fèi)類型的無縫嵌入，這種會(huì)把135編輯器整體嵌入到個(gè)人或企業(yè)的內(nèi)容編輯區(qū)域，在下圖給大家看出來他們的區(qū)別。

免費(fèi)版：

收費(fèi)版：

使用優(yōu)勢(shì)

功能UEditor135編輯器

上傳圖片	需配置上傳圖片的選項(xiàng)	無需配置（上傳的圖片由135編輯器返回超鏈接，你無需配置）
上傳視頻	需配置上傳視頻的選項(xiàng)	無需配置（上傳的視頻由135編輯器返回超鏈接，你無需配置）
上傳音樂	需配置上傳音樂的選項(xiàng)	無需配置（上傳的音樂由135編輯器返回超鏈接，你無需配置）
大多數(shù)功能	需配置大多數(shù)功能的選項(xiàng)	無需配置（大多數(shù)功能由135編輯器返回超鏈接，你無需配置）

安裝UEditor

由于135編輯器是基于UEditor富文本的所以需要先安裝UEditor富文本來支持135編輯器的嵌入，此方法只針對(duì)于免費(fèi)使用135編輯器的人群，如果你是要付費(fèi)使用的話你可以聯(lián)系135編輯器的人，他們會(huì)有專門的技術(shù)人員提供技術(shù)支持。

下載UEditor編輯器

這里我是使用Flask來作為后端程序，如果你使用UEditor官網(wǎng)所指定的程序的話可以直接看UEditor的文檔，訪問UEditor首頁，下載1.4.3.3 PHP UTF-8版本的UEditor，并解壓到Flask應(yīng)用程序的static目錄。解壓之后的目錄結(jié)構(gòu)是這樣的：

|+static/
| |+ueditor/
| | |+dialogs/
| | |+lang/
| | |+php/ #因?yàn)槲沂荈lask,所以這個(gè)目錄中只有config.json對(duì)我有用，我已經(jīng)把他放到了ueditor目錄里面
| | |+themes/
| | |+third-party/
| | |-config.json
| | |-index.html
| | |-ueditor.all.js
| | |-ueditor.all.min.js
| | |-ueditor.config.js
| | |-ueditor.parse.js
| | |-ueditor.parse.min.js

+代表目錄
-代表文件

在index.html中加入U(xiǎn)Editor：

因?yàn)槲沂荈lask程序，所以需要在templates目錄中新建一個(gè)index.html的文件，你們可以根據(jù)自己語言和框架來選擇文件建在那個(gè)目錄中。

在index.html文件的head標(biāo)簽中加入下面幾行：

<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script> <script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/ueditor.all.min.js') }}"> </script> <!--建議手動(dòng)加在語言，避免在ie下有時(shí)因?yàn)榧虞d語言失敗導(dǎo)致編輯器加載失敗--> <!--這里加載的語言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語言類型，比如你在配置項(xiàng)目里配置的是英文，這里加載的中文，那最后就是中文--> <script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script> <style>.edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;background-size: 85%;background-position: center;background-repeat: no-repeat;}.edui-default{width: 920px;margin: 0 auto;} </style>

在body標(biāo)簽加入：

<script id="editor" type="text/plain"></script> <script type="text/javascript">//實(shí)例化編輯器//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例var ue = UE.getEditor('editor', {serverUrl: "/upload/"}); </script>

請(qǐng)求路徑配置：

UEditor 1.4.2+ 起，推薦使用統(tǒng)一的請(qǐng)求路徑，在部署好前端代碼后，需要修改 ueditor.config.js 里的 serverUrl 參數(shù)（或者初始化時(shí)指定，見上面的代碼），改成 ‘/upload/’ 。

UEditor初始化時(shí)，會(huì)向后端請(qǐng)求配置文件，后端收到請(qǐng)求后返回JSON格式的配置文件。具體實(shí)現(xiàn)參照后面的代碼。

詳細(xì)配置內(nèi)容參見文檔。

創(chuàng)建Flask應(yīng)用程序（app.py）：

# -*- coding: utf-8 -*-from flask import Flask, render_templateapp = Flask(__name__)@app.route('/') def index():return render_template('index.html')@app.route('/upload/', methods=['GET', 'POST']) def upload():passif __name__ == '__main__':app.run(debug=True)

應(yīng)用程序運(yùn)行之后，我們?cè)L問 http://localhost:5000/ 就可以看到UEditor編輯器了，上圖：

UEditor后端請(qǐng)求規(guī)范說明

與后臺(tái)通信的功能列表:

• 上傳圖片
• 拖放圖片上傳、粘貼板圖片上傳
• word文檔圖片轉(zhuǎn)存
• 截圖工具上傳
• 上傳涂鴉
• 上傳視頻
• 上傳附件
• 在線圖片管理
• 粘貼轉(zhuǎn)存遠(yuǎn)程圖片

統(tǒng)一請(qǐng)求格式說明:

• 前端請(qǐng)求通過唯一的后臺(tái)文件 /upload/ 處理前端的請(qǐng)求
• /upload/通過GET上的action參數(shù)，判斷是什么類型的請(qǐng)求
• 省去不必要的請(qǐng)求，去除涂鴉添加背景的請(qǐng)求，用前端FileReader讀取本地圖片代替
• 請(qǐng)求返回?cái)?shù)據(jù)的格式，常規(guī)返回json字符串，數(shù)據(jù)包含state屬性（成功時(shí)返回’SUCCESS’，錯(cuò)誤* 時(shí)返回錯(cuò)誤信息）。
• 請(qǐng)求支持jsonp請(qǐng)求格式，當(dāng)請(qǐng)求有通過GET方式傳callback的參數(shù)時(shí)，返回json數(shù)據(jù)前后加上括* 號(hào)，再在前面加上callback的值，格式類似這樣：
  cb({“key”: “value”})

詳細(xì)說明：http://fex-team.github.io/ueditor/#dev-request_specification

Flask實(shí)現(xiàn)后端請(qǐng)求

獲取配置信息

由于接口升級(jí)，編輯器初始化時(shí)，首先會(huì)向后端請(qǐng)求配置信息，后端收到請(qǐng)求后，返
回相應(yīng)的配置信息即可。

請(qǐng)求參數(shù):

GET {"action": "config"} POST "upfile": File Data

返回格式:

// 需要支持callback參數(shù),返回jsonp格式 {"imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage","imagePath": "/ueditor/php/","imageFieldName": "upfile","imageMaxSize": 2048,"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"] }

主要功能代碼：

@app.route('/upload/', methods=['GET', 'POST']) def upload():action = request.args.get('action')# 解析JSON格式的配置文件# 這里使用PHP版本自帶的config.json文件with open(os.path.join(app.static_folder, 'ueditor', 'php','config.json')) as fp:try:# 刪除 `/**/` 之間的注釋CONFIG = json.loads(re.sub(r'\/\*.*\*\/', '', fp.read()))except:CONFIG = {}if action == 'config':# 初始化時(shí)，返回配置文件給客戶端result = CONFIGreturn json.dumps(result)

這樣的話就不會(huì)有什么問題出現(xiàn)了。

安裝135編輯器

現(xiàn)在可以開始安裝135編輯器了，因?yàn)楣P者沒有錢，所以使用的是免費(fèi)版的135編輯器，所以他是嵌入在UEditor里面的，并且通過筆者不斷觀察135編輯器的網(wǎng)站和嚴(yán)格的一致性，導(dǎo)致筆者的UEditor和135編輯器的UEditor一模一樣，在下面開始分享給大家。

安裝插件

將插件的兩個(gè)文件下載到項(xiàng)目ueditor對(duì)應(yīng)的目錄里，并將135editor.js加載到自己的網(wǎng)頁中

http://www.135editor.com/js/ueditor/plugins/135editor.js
http://www.135editor.com/js/ueditor/dialogs/135editor/135EditorDialogPage.html

加載135editor.js

在index.html中的body標(biāo)簽中加入135editor.js文件

<script id="editor" type="text/plain"></script> <script type="text/javascript" src="{{ url_for('static',filename='ueditor/plugins/135editor.js') }}"></script> <script type="text/javascript">//實(shí)例化編輯器//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例var ue = UE.getEditor('editor', {serverUrl: "/upload/"}); </script>

重寫themes目錄下的iframe.css文件

@charset "utf-8"; html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height: 1.6;background: #FFF;height:100%;} * {-webkit-max-logical-width: 100%;margin:0;padding:0;box-sizing: border-box!important;-webkit-box-sizing: border-box!important;} body{-webkit-touch-callout:none;position: absolute; width: 100%;margin: 0;padding: 15px !important;font-size:16px;overflow-x:hidden;font-family:'微軟雅黑','Microsoft YaHei',Arial,sans-serif;background-color:#FFF;line-height:inherit;height:100%;} p{clear:both;margin:0 0;white-space: normal;} img{*zoom:1;max-width:100%;*max-width:96%;height:auto !important;} iframe{width:100% !important;border:0;background-color:inherit;} .vote_area{display:block} .vote_iframe{height:100%;width:100%!important;*width:96%!important} .qqmusic_iframe{width:100%!important;height:75px;background-color:#fcfcfc;} .audio_iframe{width:100%!important;background-color:#fcfcfc;height:82px} .blockquote_iframe{width:100%!important;height:64px} .blockquote_tips_iframe{width:100%!important;height:42px} .video_iframe{background-color:#000;width:100%!important;*width:96%!important;position:static} .shopcard_iframe{width:100%!important;height:95px;margin:14px 0} .topic_iframe{width:100%!important;height:118px;margin:14px 0} .weapp_app_iframe{height:330px;margin:14px 0}body{cursor:text;} a{color:#607fa6;text-decoration:none} .guide{background-repeat:no-repeat;background-image: url(https://image.135editor.com/files/users/0/1/201708/xvCbQwOV_Ofmg.png);} [contenteditable] { caret-color: red;} ::-webkit-scrollbar {width:6px;height:6px;background: #f1f1f1;} ::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 16px #c1c1c1;} ::-webkit-input-placeholder {color: #ddd;} * { outline:0 none !important; blr:expression(this.onFocus=this.blur()); } *:focus {outline: none !important; }li.placeholder {position: relative;list-style-type: none;margin: 0;padding: 0;border: none; } li.placeholder:before {position: absolute;content: " ";width: 0;height: 0;margin-top: -5px;left: 0px;top: -4px;border: 8px solid transparent;border-left-color: red;border-right: none; } .dragged {position: absolute !important;top: 0;opacity: 0.5;z-index: 2000; }.hiddenIn135{display:none !important;visibility: hidden !important;}.showIn135{display:initial !important;opacity: 1 !important; visibility: visible !important;} .hoverimg:hover{background:#000;}blockquote{margin:0;padding-left:10px;border-left:3px solid #DBDBDB;}ol,ul,dl {/* IE7: reset rtl list margin. (#7334) */*margin-right: 0px;/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/padding: 0 0 0 30px; }table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd;} table{margin-bottom:10px;border-collapse:collapse;display:table;width:100%;margin:0 auto;} td,th{word-wrap:break-word;word-break:break-all;padding:5px;border:1px solid #DDD} caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center} th{border-top:2px solid #BBB;background:#f7f7f7} .ue-table-interlace-color-single{background-color:#fcfcfc} .ue-table-interlace-color-double{background-color:#f7faff}td p{margin:0;padding:0;width:auto;height:auto;}hr{border: 0px;border-top: 1px solid #ccc;} img:hover {z-index:-1;cursor:pointer;} pre{white-space: pre-wrap; /* CSS 2.1 */word-wrap: break-word; /* IE7 */ } .marker {background-color: Yellow; }figure {text-align: center;border: solid 1px #ccc;border-radius: 2px;background: rgba(0,0,0,0.05);padding: 10px;margin: 10px 20px;display: inline-block; }figure > figcaption {text-align: center;display: block; /* For IE8 */ } em{font-style: italic;} .view{height:100%;position: relative !important;} /*.view:after { content: ''; height: 60px; display: block;} */ ._135editor {border:0 none;padding: 0px;z-index:0;position: relative !important;} ._135editor.active,.active{z-index: 100;outline: 1.5px dashed red !important;outline-offset: 2px; } ._135editor .overActive{z-index: 100;outline: 1.5px dashed #6085ef !important;outline-offset: 2px; } ._135editor .styleActive{z-index: 100;outline: 1.5px dashed #6085ef !important;outline-offset: 2px; } .mark-changed {z-index: 101;outline: 2px dashed darkturquoise !important;outline-offset: 2px; } /*._135editor.active:before{content: "";z-index: -1;display: block;position: absolute;box-sizing:border-box;width: 102%;left:-1%;height: 100%;border:1px dashed red;} .view .active-135item:before {position: absolute;content: ''; left: 0;right: 0;top: 0;bottom: 0; box-sizing: border-box;border: 2px dashed red;margin:-5px;z-index: 1000;}*/ ._135editor .draghandle{position: absolute;background-color:rgba(200,200,200,0.8);color:#333;cursor: move;top:-30px;right:-5px;padding: 3px 5px;font-size:12px;} .view .active-135item{position: relative !important;}h1,h2,h3,h4,h5,h6{font-weight:400;font-size:16px} .hidden{display: none;visibility: hidden;} .otf-poptools{ line-height: 24px; padding: 8px;border-radius: 0;border: 0 none;color: #FFF;position:absolute;width: 80%;left:15px;background:rgb(103,91,84);} .otf-poptools span {cursor: pointer;margin: 0 5px; } .slider{height:16px!important;width:auto;position:relative;background-color:#FFF;margin-bottom:5px} .slider .complete{height:100%;width:auto;color:#333;font-size:10px;line-height:16px;text-align:center;background-color:#ccc;z-index:2} .slider .marker{height:16px;width:12px;cursor:pointer;position:absolute;top:0;left:0;background-color:#999;z-index:3}/** 微信音樂，微信音頻的樣式 **/ .db { display: block;}qqmusic{min-height: 60px;width: 100%;background: #ccc;margin: 17px 1px 16px 0;display: block;opacity: 0.9;background-image: url('https://image.135editor.com/files/users/0/1/201611/Omfdq9uS_SNXj.png');background-size: contain;background-position: center;background-repeat: no-repeat; } mpvoice{min-height: 90px;width: 100%;background: #ccc;margin: 17px 1px 16px 0;display: block;opacity: 0.9;background-color:#FCFCFC;background-image: url('https://by.135editor.com/img/icons/mpvoice.png');background-size: auto;background-position: left center;background-repeat: no-repeat; }

覆蓋themes的images目錄下的所有圖片

百度云鏈接：https://pan.baidu.com/s/1rriaUhgCeNhlgwfmzTTOJA
提取碼：5j19

重寫ueditor.config.js文件

/*** ueditor完整配置項(xiàng)* 可以在這里配置整個(gè)編輯器的特性*/ /**************************提示********************************* 所有被注釋的配置項(xiàng)均為UEditor默認(rèn)值。* 修改默認(rèn)配置請(qǐng)首先確保已經(jīng)完全明確該參數(shù)的真實(shí)用途。* 主要有兩種修改方案，一種是取消此處注釋，然后修改成對(duì)應(yīng)參數(shù)；另一種是在實(shí)例化編輯器時(shí)傳入對(duì)應(yīng)參數(shù)。* 當(dāng)升級(jí)編輯器時(shí)，可直接使用舊版配置文件替換新版配置文件,不用擔(dān)心舊版配置文件中因缺少新功能所需的參數(shù)而導(dǎo)致腳本報(bào)錯(cuò)。**************************提示********************************/(function () {/*** 編輯器資源文件根路徑。它所表示的含義是：以編輯器實(shí)例化頁面為當(dāng)前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。* 鑒于很多同學(xué)在使用編輯器的時(shí)候出現(xiàn)的種種路徑問題，此處強(qiáng)烈建議大家使用"相對(duì)于網(wǎng)站根目錄的相對(duì)路徑"進(jìn)行配置。* "相對(duì)于網(wǎng)站根目錄的相對(duì)路徑"也就是以斜杠開頭的形如"/myProject/ueditor/"這樣的路徑。* 如果站點(diǎn)中有多個(gè)不在同一層級(jí)的頁面需要實(shí)例化編輯器，且引用了同一UEditor的時(shí)候，此處的URL可能不適用于每個(gè)頁面的編輯器。* 因此，UEditor提供了針對(duì)不同頁面的編輯器可單獨(dú)配置的根路徑，具體來說，在需要實(shí)例化編輯器的頁面最頂部寫上如下代碼即可。當(dāng)然，需要令此處的URL等于對(duì)應(yīng)的配置。* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";*/var URL = window.UEDITOR_HOME_URL || getUEBasePath();/*** 配置項(xiàng)主體。注意，此處所有涉及到路徑的配置別遺漏URL變量。*/window.UEDITOR_CONFIG = {//為編輯器實(shí)例添加一個(gè)路徑，這個(gè)不能被注釋UEDITOR_HOME_URL: URL// 服務(wù)器統(tǒng)一請(qǐng)求接口路徑, serverUrl: URL + "/upload/"//工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實(shí)例時(shí)選擇自己需要的重新定義, 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']]//當(dāng)鼠標(biāo)放在工具欄上時(shí)顯示的tooltip提示,留空支持自動(dòng)多語言配置，否則以配置值為準(zhǔn)//,labelMap:{// 'anchor':'', 'undo':''//}//語言配置項(xiàng),默認(rèn)是zh-cn。有需要的話也可以使用如下這樣的方式來自動(dòng)多語言切換，當(dāng)然，前提條件是lang文件夾下存在對(duì)應(yīng)的語言文件：//lang值也可以通過自動(dòng)獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()//,lang:"zh-cn"//,langPath:URL +"lang/"//主題配置項(xiàng),默認(rèn)是default。有需要的話也可以使用如下這樣的方式來自動(dòng)多主題切換，當(dāng)然，前提條件是themes文件夾下存在對(duì)應(yīng)的主題文件：//現(xiàn)有如下皮膚:default//,theme:'default'//,themePath:URL +"themes/",zIndex : 1 //編輯器層級(jí)的基數(shù),默認(rèn)是900// 針對(duì)getAllHtml方法，會(huì)在對(duì)應(yīng)的head標(biāo)簽中增加該編碼設(shè)置。,charset:"utf-8"//若實(shí)例化編輯器的頁面手動(dòng)修改的domain，此處需要設(shè)置為true//,customDomain:false//常用配置項(xiàng)目//,isShow : true //默認(rèn)顯示編輯器,textarea:'content' // 提交表單時(shí)，服務(wù)器獲取編輯器提交內(nèi)容的所用的參數(shù)，多實(shí)例時(shí)可以給容器name屬性，會(huì)將name給定的值最為每個(gè)實(shí)例的鍵值，不用每次實(shí)例化的時(shí)候都設(shè)置這個(gè)值//,initialContent:'歡迎使用ueditor!' //初始化編輯器的內(nèi)容,也可以通過textarea/script給值，看官網(wǎng)例子//,autoClearinitialContent:true //是否自動(dòng)清除編輯器初始內(nèi)容，注意：如果focus屬性設(shè)置為true,這個(gè)也為真，那么編輯器一上來就會(huì)觸發(fā)導(dǎo)致初始化的內(nèi)容看不到了//,focus:false //初始化時(shí)，是否讓編輯器獲得焦點(diǎn)true或false//如果自定義，最好給p標(biāo)簽如下的行高，要不輸入中文時(shí)，會(huì)有跳動(dòng)感//,initialStyle:'p{line-height:1em}'//編輯器層級(jí)的基數(shù),可以用來改變字體等,iframeCssUrl: URL + '/themes/iframe.css' //給編輯區(qū)域的iframe引入一個(gè)css文件//indentValue//首行縮進(jìn)距離,默認(rèn)是2em//,indentValue:'2em'// ,initialFrameWidth:1000 //初始化編輯器寬度,默認(rèn)1000// ,initialFrameHeight:800 //初始化編輯器高度,默認(rèn)320,readonly : false //編輯器初始化結(jié)束后,編輯區(qū)域是否是只讀的，默認(rèn)是false//,autoClearEmptyNode : true //getContent時(shí)，是否刪除空的inlineElement節(jié)點(diǎn)（包括嵌套的情況）//啟用自動(dòng)保存//,enableAutoSave: true//自動(dòng)保存間隔時(shí)間， 單位ms,saveInterval: 60000//,fullscreen : false //是否開啟初始化時(shí)即全屏，默認(rèn)關(guān)閉,imagePopup:true //圖片操作的浮層開關(guān)，默認(rèn)打開,autoSyncData:true //自動(dòng)同步編輯器要提交的數(shù)據(jù)//,emotionLocalization:false //是否開啟表情本地化，默認(rèn)關(guān)閉。若要開啟請(qǐng)確保emotion文件夾下包含官網(wǎng)提供的images表情文件夾//粘貼只保留標(biāo)簽，去除標(biāo)簽所有屬性//,retainOnlyLabelPasted: false//,pasteplain:false //是否默認(rèn)為純文本粘貼。false為不使用純文本粘貼，true為使用純文本粘貼//純文本粘貼模式下的過濾規(guī)則//'filterTxtRules' : function(){// function transP(node){// node.tagName = 'p';// node.setStyle();// }// return {// //直接刪除及其字節(jié)點(diǎn)內(nèi)容// '-' : 'script style object iframe embed input select',// 'p': {$:{}},// 'br':{$:{}},// 'div':{'$':{}},// 'li':{'$':{}},// 'caption':transP,// 'th':transP,// 'tr':transP,// 'h1':transP,'h2':transP,'h3':transP,'h4':transP,'h5':transP,'h6':transP,// 'td':function(node){// //沒有內(nèi)容的td直接刪掉// var txt = !!node.innerText();// if(txt){// node.parentNode.insertAfter(UE.uNode.createText(' &nbsp; &nbsp;'),node);// }// node.parentNode.removeChild(node,node.innerText())// }// }//}()//,allHtmlEnabled:false //提交到后臺(tái)的數(shù)據(jù)是否包含整個(gè)html字符串//insertorderedlist//有序列表的下拉配置,值留空時(shí)支持多語言自動(dòng)識(shí)別，若配置值，則以此值為準(zhǔn),'insertorderedlist':{//自定的樣式// 'num':'1,2,3...',// 'num1':'1),2),3)...',// 'num2':'(1),(2),(3)...',// 'cn':'一,二,三....',// 'cn1':'一),二),三)....',// 'cn2':'(一),(二),(三)....',//系統(tǒng)自帶'decimal' : '' , //'1,2,3...''lower-alpha' : '' , // 'a,b,c...''lower-roman' : '' , //'i,ii,iii...''upper-alpha' : '' , //lang //'A,B,C''upper-roman' : '' , //'I,II,III...''cjk-ideographic' : '一、二、三、','lower-greek':'α,β,γ,δ'}//insertunorderedlist//無序列表的下拉配置，值留空時(shí)支持多語言自動(dòng)識(shí)別，若配置值，則以此值為準(zhǔn),insertunorderedlist : {//自定的樣式//'dash' :'— 破折號(hào)', //-破折號(hào)//'dot':' 。 小圓圈',//系統(tǒng)自帶'circle' : '', // '○ 小圓圈''disc' : '', // '● 小圓點(diǎn)''square' : '' //'■ 小方塊'},listDefaultPaddingLeft : '30'//默認(rèn)的左邊縮進(jìn)的基數(shù)倍//,listiconpath : 'http://bs.baidu.com/listicon/'//自定義標(biāo)號(hào)的路徑,maxListLevel : -1 //限制可以tab的級(jí)數(shù), 設(shè)置-1為不限制,autoTransWordToList:true //禁止word中粘貼進(jìn)來的列表自動(dòng)變成列表標(biāo)簽//fontfamily//字體設(shè)置 label留空支持多語言自動(dòng)切換，若配置，則以配置值為準(zhǔn),'fontfamily':[{ label:'',name:'yahei',val:'微軟雅黑'}, // 微軟雅黑,Microsoft YaHei{ label:'',name:'songti',val:'宋體,SimSun'},{ label:'',name:'kaiti',val:'楷體,楷體_GB2312,SimKai'},{ label:'',name:'heiti',val:'黑體,SimHei'},{ label:'',name:'lishu',val:'隸書,SimLi'},//{ label:'文泉驛等寬正黑',name:'',val:'文泉驛等寬正黑'},//{ label:'文泉驛等寬微米黑',name:'',val:'文泉驛等寬微米黑'},{ label:'站酷高端黑',name:'',val:'站酷高端黑'},{ label:'站酷快樂體',name:'', val:'HappyZcool'},{ label:'仿宋',name:'',val:'仿宋'},//{ label:'思源粗體',name:'',val:'Source Han Sans K Heavy'},//{ label:'思源極細(xì)',name:'',val:'Source Han Sans K ExtraLight'},{ label:'',name:'arial',val:'arial,helvetica,sans-serif'}]//fontsize//字號(hào),'fontsize':[10,11,12,13,14,15,16,17,18,19,20,24,28,32,36],'letterspacing':[0,0.25,0.5,1,1.5,2,2.5,3,4,5]//lineheight//行內(nèi)間距 值和顯示的名字相同,'lineheight':['1', '1.5','1.75','2','2.5', '3', '4', '5']//paragraph//段落格式 值留空時(shí)支持多語言自動(dòng)識(shí)別，若配置，則以配置值為準(zhǔn)//,'paragraph':{'p':'', 'h1':'', 'h2':'', 'h3':'', 'h4':'', 'h5':'', 'h6':''}//rowspacingtop//段間距 值和顯示的名字相同//,'rowspacingtop':['5', '10', '15', '20', '25']//rowspacingBottom//段間距 值和顯示的名字相同//,'rowspacingbottom':['5', '10', '15', '20', '25']//customstyle//自定義樣式，不支持國際化，此處配置值即可最后顯示值//block的元素是依據(jù)設(shè)置段落的邏輯設(shè)置的，inline的元素依據(jù)BIU的邏輯設(shè)置//盡量使用一些常用的標(biāo)簽//參數(shù)說明//tag 使用的標(biāo)簽名字//label 顯示的名字也是用來標(biāo)識(shí)不同類型的標(biāo)識(shí)符，注意這個(gè)值每個(gè)要不同，//style 添加的樣式//每一個(gè)對(duì)象就是一個(gè)自定義的樣式//,'customstyle':[// {tag:'h1', name:'tc', label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'},// {tag:'h1', name:'tl',label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'},// {tag:'span',name:'im', label:'', style:'font-style:italic;font-weight:bold'},// {tag:'span',name:'hi', label:'', style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'}//]//打開右鍵菜單功能,enableContextMenu: true//右鍵菜單的內(nèi)容，可以參考plugins/contextmenu.js里邊的默認(rèn)菜單的例子，label留空支持國際化，否則以此配置為準(zhǔn)//,contextMenu:[// {// label:'', //顯示的名稱// cmdName:'selectall',//執(zhí)行的command命令，當(dāng)點(diǎn)擊這個(gè)右鍵菜單時(shí)// //exec可選，有了exec就會(huì)在點(diǎn)擊時(shí)執(zhí)行這個(gè)function，優(yōu)先級(jí)高于cmdName// exec:function () {// //this是當(dāng)前編輯器的實(shí)例// //this.ui._dialogs['inserttableDialog'].open();// }// }//]//快捷菜單,shortcutMenu:["fontfamily","fontsize","|","bold","italic","underline",'fontborder','strikethrough',"forecolor","shadowcolor","insertorderedlist","insertunorderedlist","superscript", "subscript","|","justifyleft","justifycenter","justifyright",'justifyjustify',"indent","rowspacingtop",'rowspacingbottom',"lineheight",'letterspacing'],newShortcutMenu:["fontfamily","fontsize","justifyleft","justifycenter","justifyright",'justifyjustify',"indent","outpadding",'letterspacing','<br>', "rowspacingtop",'rowspacingbottom',"lineheight","insertorderedlist","insertunorderedlist","bold","italic","underline",'fontborder','strikethrough','<br>',"forecolor","shadowcolor","backcolor","superscript", "subscript",'link','unlink']//elementPathEnabled//是否啟用元素路徑，默認(rèn)是顯示,elementPathEnabled : false//wordCount,wordCount:true //是否開啟字?jǐn)?shù)統(tǒng)計(jì)//,maximumWords:10000 //允許的最大字符數(shù)//字?jǐn)?shù)統(tǒng)計(jì)提示，{#count}代表當(dāng)前字?jǐn)?shù)，{#leave}代表還可以輸入多少字符數(shù),留空支持多語言自動(dòng)切換，否則按此配置顯示,wordCountMsg:'當(dāng)前已輸入 {#count} 個(gè)字符，您還可以輸入{#leave} 個(gè)字符' //當(dāng)前已輸入 {#count} 個(gè)字符，您還可以輸入{#leave} 個(gè)字符//超出字?jǐn)?shù)限制提示 留空支持多語言自動(dòng)切換，否則按此配置顯示//,wordOverFlowMsg:'' //<span style="color:red;">你輸入的字符個(gè)數(shù)已經(jīng)超出最大允許值，服務(wù)器可能會(huì)拒絕保存！</span>//tab//點(diǎn)擊tab鍵時(shí)移動(dòng)的距離,tabSize倍數(shù)，tabNode什么字符做為單位//,tabSize:4//,tabNode:'&nbsp;'//removeFormat//清除格式時(shí)可以刪除的標(biāo)簽和屬性//removeForamtTags標(biāo)簽,removeFormatTags:'a,b,big,code,del,dfn,em,font,i,section,blockquote,pre,fieldset,ins,kbd,q,samp,small,span,label,strike,strong,sub,sup,tt,u,var'//removeFormatAttributes屬性,removeFormatAttributes:'class,style,lang,width,accuse,height,align,hspace,valign,data-width,data-brushtype,opacity,border,title,placeholder'//undo//可以最多回退的次數(shù),默認(rèn)20,maxUndoCount:20//當(dāng)輸入的字符數(shù)超過該值時(shí)，保存一次現(xiàn)場(chǎng)//,maxInputCount:1//autoHeightEnabled// 是否自動(dòng)長高,默認(rèn)true,autoHeightEnabled:false//scaleEnabled//是否可以拉伸長高,默認(rèn)true(當(dāng)開啟時(shí)，自動(dòng)長高失效),scaleEnabled:false,imageScaleEnabled:true//,minFrameWidth:800 //編輯器拖動(dòng)時(shí)最小寬度,默認(rèn)800//,minFrameHeight:220 //編輯器拖動(dòng)時(shí)最小高度,默認(rèn)220//autoFloatEnabled//是否保持toolbar的位置不動(dòng),默認(rèn)true,autoFloatEnabled:false//浮動(dòng)時(shí)工具欄距離瀏覽器頂部的高度，用于某些具有固定頭部的頁面//,topOffset:30//編輯器底部距離工具欄高度(如果參數(shù)大于等于編輯器高度，則設(shè)置無效)//,toolbarTopOffset:400,'remoteName':'#remoteName','remoteSummary':'#remoteSummary','remoteCoverimg':'#remoteCoverimg'//設(shè)置遠(yuǎn)程圖片是否抓取到本地保存,catchRemoteImageEnable: true //設(shè)置是否抓取遠(yuǎn)程圖片//pageBreakTag//分頁標(biāo)識(shí)符,默認(rèn)是_ueditor_page_break_tag_//,pageBreakTag:'_ueditor_page_break_tag_'// autotypeset// 自動(dòng)排版參數(shù),autotypeset: {mergeEmptyline: true, //合并空行removeClass: false, //去掉冗余的classremoveEmptyline: false, //去掉空行textAlign:false,//textAlign:"left", //段落的排版方式，可以是 left,right,center,justify 去掉這個(gè)屬性表示不執(zhí)行排版imageBlockLine: false, //圖片的浮動(dòng)方式，獨(dú)占一行劇中,左右浮動(dòng)，默認(rèn): center,left,right,none 去掉這個(gè)屬性表示不執(zhí)行排版pasteFilter: false, //根據(jù)規(guī)則過濾沒事粘貼進(jìn)來的內(nèi)容clearFontSize: false, //去掉所有的內(nèi)嵌字號(hào)，使用編輯器默認(rèn)的字號(hào)clearFontFamily: false, //去掉所有的內(nèi)嵌字體，使用編輯器默認(rèn)的字體removeEmptyNode: false, // 去掉空節(jié)點(diǎn)//可以去掉的標(biāo)簽//removeTagNames: {標(biāo)簽名字:1},indent: false, // 行首縮進(jìn)indentValue : '2em', //行首縮進(jìn)的大小bdc2sb: false,tobdc: false}//tableDragable//表格是否可以拖拽//,tableDragable: true//sourceEditor//源碼的查看方式,codemirror 是代碼高亮，textarea是文本框,默認(rèn)是codemirror//注意默認(rèn)codemirror只能在ie8+和非ie中使用,sourceEditor:"codemirror"//如果sourceEditor是codemirror，還用配置一下兩個(gè)參數(shù)//codeMirrorJsUrl js加載的路徑，默認(rèn)是 URL + "third-party/codemirror/codemirror.js"//,codeMirrorJsUrl:URL + "third-party/codemirror/codemirror.js"//codeMirrorCssUrl css加載的路徑，默認(rèn)是 URL + "third-party/codemirror/codemirror.css"//,codeMirrorCssUrl:URL + "third-party/codemirror/codemirror.css"//編輯器初始化完成后是否進(jìn)入源碼模式，默認(rèn)為否。//,sourceEditorFirst:false//iframeUrlMap//dialog內(nèi)容的路徑 ～會(huì)被替換成URL,垓?qū)傩砸坏┐蜷_，將覆蓋所有的dialog的默認(rèn)路徑//,iframeUrlMap:{// 'anchor':'~/dialogs/anchor/anchor.html',//}//allowLinkProtocol 允許的鏈接地址，有這些前綴的鏈接地址不會(huì)自動(dòng)添加http//, allowLinkProtocols: ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:', 'git:', 'svn:']//webAppKey 百度應(yīng)用的APIkey，每個(gè)站長必須首先去百度官網(wǎng)注冊(cè)一個(gè)key后方能正常使用app功能，注冊(cè)介紹，http://app.baidu.com/static/cms/getapikey.html//, webAppKey: ""//默認(rèn)過濾規(guī)則相關(guān)配置項(xiàng)目,disabledTableInTable:false //禁止表格嵌套//,allowDivTransToP:true //允許進(jìn)入編輯器的div標(biāo)簽自動(dòng)變成p標(biāo)簽,rgb2Hex:true //默認(rèn)產(chǎn)出的數(shù)據(jù)中的color自動(dòng)從rgb格式變成16進(jìn)制格式// xss 過濾是否開啟,inserthtml等操作,xssFilterRules: true//input xss過濾,inputXssFilter: true//output xss過濾,outputXssFilter: true// xss過濾白名單 名單來源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js// ,whitList: {// a: ['target', 'href', 'title', 'class', 'style'],// abbr: ['title', 'class', 'style'],// address: ['class', 'style'],// area: ['shape', 'coords', 'href', 'alt'],// article: [],// aside: [],// audio: ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],// b: ['class', 'style'],// bdi: ['dir'],// bdo: ['dir'],// big: [],// blockquote: ['cite', 'class', 'style'],// br: [],// caption: ['class', 'style'],// center: [],// cite: [],// code: ['class', 'style'],// col: ['align', 'valign', 'span', 'width', 'class', 'style'],// colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],// dd: ['class', 'style'],// del: ['datetime'],// details: ['open'],// div: ['class', 'style'],// dl: ['class', 'style'],// dt: ['class', 'style'],// em: ['class', 'style'],// font: ['color', 'size', 'face'],// footer: [],// h1: ['class', 'style'],// h2: ['class', 'style'],// h3: ['class', 'style'],// h4: ['class', 'style'],// h5: ['class', 'style'],// h6: ['class', 'style'],// header: [],// hr: [],// i: ['class', 'style'],// img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex'],// ins: ['datetime'],// li: ['class', 'style'],// mark: [],// nav: [],// ol: ['class', 'style'],// p: ['class', 'style'],// pre: ['class', 'style'],// s: [],// section:[],// small: [],// span: ['class', 'style'],// sub: ['class', 'style'],// sup: ['class', 'style'],// strong: ['class', 'style'],// table: ['width', 'border', 'align', 'valign', 'class', 'style'],// tbody: ['align', 'valign', 'class', 'style'],// td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],// tfoot: ['align', 'valign', 'class', 'style'],// th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],// thead: ['align', 'valign', 'class', 'style'],// tr: ['rowspan', 'align', 'valign', 'class', 'style'],// tt: [],// u: [],// ul: ['class', 'style'],// video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style']// }};function getUEBasePath(docUrl, confUrl) {return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath());}function getConfigFilePath() {var configPath = document.getElementsByTagName('script');return configPath[ configPath.length - 1 ].src;}function getBasePath(docUrl, confUrl) {var basePath = confUrl;if (/^(\/|\\\\)/.test(confUrl)) {basePath = /^.+?\w(\/|\\\\)/.exec(docUrl)[0] + confUrl.replace(/^(\/|\\\\)/, '');} else if (!/^[a-z]+:/i.test(confUrl)) {docUrl = docUrl.split("#")[0].split("?")[0].replace(/[^\\\/]+$/, '');basePath = docUrl + "" + confUrl;}return optimizationPath(basePath);}function optimizationPath(path) {var protocol = /^[a-z]+:\/\//.exec(path)[ 0 ],tmp = null,res = [];path = path.replace(protocol, "").split("?")[0].split("#")[0];path = path.replace(/\\/g, '/').split(/\//);path[ path.length - 1 ] = "";while (path.length) {if (( tmp = path.shift() ) === "..") {res.pop();} else if (tmp !== ".") {res.push(tmp);}}return protocol + res.join("/");}window.UE = {getUEBasePath: getUEBasePath};})();

修改index.html文件

修改index.html文件body標(biāo)簽中的內(nèi)容即可

<script id="editor" type="text/plain"></script> <script type="text/javascript" src="{{ url_for('static',filename='ueditor/plugins/135editor.js') }}"></script> <script type="text/javascript">//實(shí)例化編輯器//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例current_editor = UE.getEditor('editor',{serverUrl:'/upload/',initialFrameHeight:400,focus:true,toolbars:[['bold','italic', 'underline', 'fontborder', 'strikethrough', '135editor','rowspacingtop', 'rowspacingbottom', 'lineheight','removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|','superscript', 'subscript' ]],focusInEnd:true});

查看效果

最后就是檢驗(yàn)效果的時(shí)候到了，先看看135編輯器給的demo案例中的編輯器吧

135編輯器demo：
筆者完成的demo：
不僅僅是表面一樣，連內(nèi)容也是一樣，給你們看看135編輯器的內(nèi)容效果。

內(nèi)容效果：

如果在實(shí)現(xiàn)135編輯器的時(shí)候出現(xiàn)任何情況都可以聯(lián)系筆者，筆者盡可能為大家解決煩惱，以上內(nèi)容部分是參照http://flask123.sinaapp.com/article/47/文章所寫。

QQ聯(lián)系方式：1670044143

總結(jié)

以上是生活随笔為你收集整理的（微信编辑器）UEditor富文本嵌入135编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。