當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

（微信编辑器）UEditor富文本嵌入135编辑器

發布時間：2023/12/31 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了（微信编辑器）UEditor富文本嵌入135编辑器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

UEditor簡介

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

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

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

135編輯器簡介

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

免費版：

收費版：

使用優勢

功能UEditor135編輯器

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

安裝UEditor

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

下載UEditor編輯器

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

+代表目錄
-代表文件

在index.html中加入UEditor：

因為我是Flask程序，所以需要在templates目錄中新建一個index.html的文件，你們可以根據自己語言和框架來選擇文件建在那個目錄中。

在index.html文件的head標簽中加入下面幾行：

在body標簽加入：

請求路徑配置：

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

UEditor初始化時，會向后端請求配置文件，后端收到請求后返回JSON格式的配置文件。具體實現參照后面的代碼。

詳細配置內容參見文檔。

創建Flask應用程序（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)

應用程序運行之后，我們訪問 http://localhost:5000/ 就可以看到UEditor編輯器了，上圖：

UEditor后端請求規范說明

與后臺通信的功能列表:

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

統一請求格式說明:

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

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

Flask實現后端請求

獲取配置信息

由于接口升級，編輯器初始化時，首先會向后端請求配置信息，后端收到請求后，返
回相應的配置信息即可。

請求參數:

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

返回格式:

// 需要支持callback參數,返回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':# 初始化時，返回配置文件給客戶端result = CONFIGreturn json.dumps(result)

這樣的話就不會有什么問題出現了。

安裝135編輯器

現在可以開始安裝135編輯器了，因為筆者沒有錢，所以使用的是免費版的135編輯器，所以他是嵌入在UEditor里面的，并且通過筆者不斷觀察135編輯器的網站和嚴格的一致性，導致筆者的UEditor和135編輯器的UEditor一模一樣，在下面開始分享給大家。

安裝插件

將插件的兩個文件下載到項目ueditor對應的目錄里，并將135editor.js加載到自己的網頁中

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

加載135editor.js

在index.html中的body標簽中加入135editor.js文件

重寫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完整配置項* 可以在這里配置整個編輯器的特性*/ /**************************提示********************************* 所有被注釋的配置項均為UEditor默認值。* 修改默認配置請首先確保已經完全明確該參數的真實用途。* 主要有兩種修改方案，一種是取消此處注釋，然后修改成對應參數；另一種是在實例化編輯器時傳入對應參數。* 當升級編輯器時，可直接使用舊版配置文件替換新版配置文件,不用擔心舊版配置文件中因缺少新功能所需的參數而導致腳本報錯。**************************提示********************************/(function () {/*** 編輯器資源文件根路徑。它所表示的含義是：以編輯器實例化頁面為當前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。* 鑒于很多同學在使用編輯器的時候出現的種種路徑問題，此處強烈建議大家使用"相對于網站根目錄的相對路徑"進行配置。* "相對于網站根目錄的相對路徑"也就是以斜杠開頭的形如"/myProject/ueditor/"這樣的路徑。* 如果站點中有多個不在同一層級的頁面需要實例化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用于每個頁面的編輯器。* 因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要實例化編輯器的頁面最頂部寫上如下代碼即可。當然，需要令此處的URL等于對應的配置。* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";*/var URL = window.UEDITOR_HOME_URL || getUEBasePath();/*** 配置項主體。注意，此處所有涉及到路徑的配置別遺漏URL變量。*/window.UEDITOR_CONFIG = {//為編輯器實例添加一個路徑，這個不能被注釋UEDITOR_HOME_URL: URL// 服務器統一請求接口路徑, serverUrl: URL + "/upload/"//工具欄上的所有的功能按鈕和下拉框，可以在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']]//當鼠標放在工具欄上時顯示的tooltip提示,留空支持自動多語言配置，否則以配置值為準//,labelMap:{// 'anchor':'', 'undo':''//}//語言配置項,默認是zh-cn。有需要的話也可以使用如下這樣的方式來自動多語言切換，當然，前提條件是lang文件夾下存在對應的語言文件：//lang值也可以通過自動獲取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()//,lang:"zh-cn"//,langPath:URL +"lang/"//主題配置項,默認是default。有需要的話也可以使用如下這樣的方式來自動多主題切換，當然，前提條件是themes文件夾下存在對應的主題文件：//現有如下皮膚:default//,theme:'default'//,themePath:URL +"themes/",zIndex : 1 //編輯器層級的基數,默認是900// 針對getAllHtml方法，會在對應的head標簽中增加該編碼設置。,charset:"utf-8"//若實例化編輯器的頁面手動修改的domain，此處需要設置為true//,customDomain:false//常用配置項目//,isShow : true //默認顯示編輯器,textarea:'content' // 提交表單時，服務器獲取編輯器提交內容的所用的參數，多實例時可以給容器name屬性，會將name給定的值最為每個實例的鍵值，不用每次實例化的時候都設置這個值//,initialContent:'歡迎使用ueditor!' //初始化編輯器的內容,也可以通過textarea/script給值，看官網例子//,autoClearinitialContent:true //是否自動清除編輯器初始內容，注意：如果focus屬性設置為true,這個也為真，那么編輯器一上來就會觸發導致初始化的內容看不到了//,focus:false //初始化時，是否讓編輯器獲得焦點true或false//如果自定義，最好給p標簽如下的行高，要不輸入中文時，會有跳動感//,initialStyle:'p{line-height:1em}'//編輯器層級的基數,可以用來改變字體等,iframeCssUrl: URL + '/themes/iframe.css' //給編輯區域的iframe引入一個css文件//indentValue//首行縮進距離,默認是2em//,indentValue:'2em'// ,initialFrameWidth:1000 //初始化編輯器寬度,默認1000// ,initialFrameHeight:800 //初始化編輯器高度,默認320,readonly : false //編輯器初始化結束后,編輯區域是否是只讀的，默認是false//,autoClearEmptyNode : true //getContent時，是否刪除空的inlineElement節點（包括嵌套的情況）//啟用自動保存//,enableAutoSave: true//自動保存間隔時間，單位ms,saveInterval: 60000//,fullscreen : false //是否開啟初始化時即全屏，默認關閉,imagePopup:true //圖片操作的浮層開關，默認打開,autoSyncData:true //自動同步編輯器要提交的數據//,emotionLocalization:false //是否開啟表情本地化，默認關閉。若要開啟請確保emotion文件夾下包含官網提供的images表情文件夾//粘貼只保留標簽，去除標簽所有屬性//,retainOnlyLabelPasted: false//,pasteplain:false //是否默認為純文本粘貼。false為不使用純文本粘貼，true為使用純文本粘貼//純文本粘貼模式下的過濾規則//'filterTxtRules' : function(){// function transP(node){// node.tagName = 'p';// node.setStyle();// }// return {// //直接刪除及其字節點內容// '-' : '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){// //沒有內容的td直接刪掉// var txt = !!node.innerText();// if(txt){// node.parentNode.insertAfter(UE.uNode.createText('    '),node);// }// node.parentNode.removeChild(node,node.innerText())// }// }//}()//,allHtmlEnabled:false //提交到后臺的數據是否包含整個html字符串//insertorderedlist//有序列表的下拉配置,值留空時支持多語言自動識別，若配置值，則以此值為準,'insertorderedlist':{//自定的樣式// 'num':'1,2,3...',// 'num1':'1),2),3)...',// 'num2':'(1),(2),(3)...',// 'cn':'一,二,三....',// 'cn1':'一),二),三)....',// 'cn2':'(一),(二),(三)....',//系統自帶'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//無序列表的下拉配置，值留空時支持多語言自動識別，若配置值，則以此值為準,insertunorderedlist : {//自定的樣式//'dash' :'— 破折號', //-破折號//'dot':' 。小圓圈',//系統自帶'circle' : '', // '○ 小圓圈''disc' : '', // '● 小圓點''square' : '' //'■ 小方塊'},listDefaultPaddingLeft : '30'//默認的左邊縮進的基數倍//,listiconpath : 'http://bs.baidu.com/listicon/'//自定義標號的路徑,maxListLevel : -1 //限制可以tab的級數, 設置-1為不限制,autoTransWordToList:true //禁止word中粘貼進來的列表自動變成列表標簽//fontfamily//字體設置 label留空支持多語言自動切換，若配置，則以配置值為準,'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:'思源極細',name:'',val:'Source Han Sans K ExtraLight'},{ label:'',name:'arial',val:'arial,helvetica,sans-serif'}]//fontsize//字號,'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//行內間距值和顯示的名字相同,'lineheight':['1', '1.5','1.75','2','2.5', '3', '4', '5']//paragraph//段落格式值留空時支持多語言自動識別，若配置，則以配置值為準//,'paragraph':{'p':'', 'h1':'', 'h2':'', 'h3':'', 'h4':'', 'h5':'', 'h6':''}//rowspacingtop//段間距值和顯示的名字相同//,'rowspacingtop':['5', '10', '15', '20', '25']//rowspacingBottom//段間距值和顯示的名字相同//,'rowspacingbottom':['5', '10', '15', '20', '25']//customstyle//自定義樣式，不支持國際化，此處配置值即可最后顯示值//block的元素是依據設置段落的邏輯設置的，inline的元素依據BIU的邏輯設置//盡量使用一些常用的標簽//參數說明//tag 使用的標簽名字//label 顯示的名字也是用來標識不同類型的標識符，注意這個值每個要不同，//style 添加的樣式//每一個對象就是一個自定義的樣式//,'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//右鍵菜單的內容，可以參考plugins/contextmenu.js里邊的默認菜單的例子，label留空支持國際化，否則以此配置為準//,contextMenu:[// {// label:'', //顯示的名稱// cmdName:'selectall',//執行的command命令，當點擊這個右鍵菜單時// //exec可選，有了exec就會在點擊時執行這個function，優先級高于cmdName// exec:function () {// //this是當前編輯器的實例// //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//是否啟用元素路徑，默認是顯示,elementPathEnabled : false//wordCount,wordCount:true //是否開啟字數統計//,maximumWords:10000 //允許的最大字符數//字數統計提示，{#count}代表當前字數，{#leave}代表還可以輸入多少字符數,留空支持多語言自動切換，否則按此配置顯示,wordCountMsg:'當前已輸入 {#count} 個字符，您還可以輸入{#leave} 個字符' //當前已輸入 {#count} 個字符，您還可以輸入{#leave} 個字符//超出字數限制提示留空支持多語言自動切換，否則按此配置顯示//,wordOverFlowMsg:'' //<span style="color:red;">你輸入的字符個數已經超出最大允許值，服務器可能會拒絕保存！</span>//tab//點擊tab鍵時移動的距離,tabSize倍數，tabNode什么字符做為單位//,tabSize:4//,tabNode:' '//removeFormat//清除格式時可以刪除的標簽和屬性//removeForamtTags標簽,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//可以最多回退的次數,默認20,maxUndoCount:20//當輸入的字符數超過該值時，保存一次現場//,maxInputCount:1//autoHeightEnabled// 是否自動長高,默認true,autoHeightEnabled:false//scaleEnabled//是否可以拉伸長高,默認true(當開啟時，自動長高失效),scaleEnabled:false,imageScaleEnabled:true//,minFrameWidth:800 //編輯器拖動時最小寬度,默認800//,minFrameHeight:220 //編輯器拖動時最小高度,默認220//autoFloatEnabled//是否保持toolbar的位置不動,默認true,autoFloatEnabled:false//浮動時工具欄距離瀏覽器頂部的高度，用于某些具有固定頭部的頁面//,topOffset:30//編輯器底部距離工具欄高度(如果參數大于等于編輯器高度，則設置無效)//,toolbarTopOffset:400,'remoteName':'#remoteName','remoteSummary':'#remoteSummary','remoteCoverimg':'#remoteCoverimg'//設置遠程圖片是否抓取到本地保存,catchRemoteImageEnable: true //設置是否抓取遠程圖片//pageBreakTag//分頁標識符,默認是_ueditor_page_break_tag_//,pageBreakTag:'_ueditor_page_break_tag_'// autotypeset// 自動排版參數,autotypeset: {mergeEmptyline: true, //合并空行removeClass: false, //去掉冗余的classremoveEmptyline: false, //去掉空行textAlign:false,//textAlign:"left", //段落的排版方式，可以是 left,right,center,justify 去掉這個屬性表示不執行排版imageBlockLine: false, //圖片的浮動方式，獨占一行劇中,左右浮動，默認: center,left,right,none 去掉這個屬性表示不執行排版pasteFilter: false, //根據規則過濾沒事粘貼進來的內容clearFontSize: false, //去掉所有的內嵌字號，使用編輯器默認的字號clearFontFamily: false, //去掉所有的內嵌字體，使用編輯器默認的字體removeEmptyNode: false, // 去掉空節點//可以去掉的標簽//removeTagNames: {標簽名字:1},indent: false, // 行首縮進indentValue : '2em', //行首縮進的大小bdc2sb: false,tobdc: false}//tableDragable//表格是否可以拖拽//,tableDragable: true//sourceEditor//源碼的查看方式,codemirror 是代碼高亮，textarea是文本框,默認是codemirror//注意默認codemirror只能在ie8+和非ie中使用,sourceEditor:"codemirror"//如果sourceEditor是codemirror，還用配置一下兩個參數//codeMirrorJsUrl js加載的路徑，默認是 URL + "third-party/codemirror/codemirror.js"//,codeMirrorJsUrl:URL + "third-party/codemirror/codemirror.js"//codeMirrorCssUrl css加載的路徑，默認是 URL + "third-party/codemirror/codemirror.css"//,codeMirrorCssUrl:URL + "third-party/codemirror/codemirror.css"//編輯器初始化完成后是否進入源碼模式，默認為否。//,sourceEditorFirst:false//iframeUrlMap//dialog內容的路徑～會被替換成URL,垓屬性一旦打開，將覆蓋所有的dialog的默認路徑//,iframeUrlMap:{// 'anchor':'~/dialogs/anchor/anchor.html',//}//allowLinkProtocol 允許的鏈接地址，有這些前綴的鏈接地址不會自動添加http//, allowLinkProtocols: ['http:', 'https:', '#', '/', 'ftp:', 'mailto:', 'tel:', 'git:', 'svn:']//webAppKey 百度應用的APIkey，每個站長必須首先去百度官網注冊一個key后方能正常使用app功能，注冊介紹，http://app.baidu.com/static/cms/getapikey.html//, webAppKey: ""//默認過濾規則相關配置項目,disabledTableInTable:false //禁止表格嵌套//,allowDivTransToP:true //允許進入編輯器的div標簽自動變成p標簽,rgb2Hex:true //默認產出的數據中的color自動從rgb格式變成16進制格式// 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標簽中的內容即可

查看效果

最后就是檢驗效果的時候到了，先看看135編輯器給的demo案例中的編輯器吧

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

內容效果：

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

QQ聯系方式：1670044143

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。