解决方案

(微信编辑器)UEditor富文本嵌入135编辑器

seo靠我 2023-09-24 14:57:03

UEditor简介

UEditor是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

本文以最新版本的1.SEO靠我4.3.3版本为教程来讲述

具体文档参见:http://fex.baidu.com/ueditor/

135编辑器简介

135编辑器是一款提供微信公众号文章排版和内容编辑的在线工具,样式丰富,支持秒刷、收藏SEO靠我样式和颜色、图片素材编辑、图片水印、一键排版等功能,轻松编辑微信公众号图文。他是一款基于UEditor富文本的编辑器,一共分为两种类型,一种是免费类型的嵌入型,也就是把135编辑器嵌入到UEditorSEO靠我富文本里面的菜单中,还有一种就是收费类型的无缝嵌入,这种会把135编辑器整体嵌入到个人或企业的内容编辑区域,在下图给大家看出来他们的区别。

免费版: 收费版:

使用优势

功能UEditorSEO靠我135编辑器上传图片需配置上传图片的选项无需配置(上传的图片由135编辑器返回超链接,你无需配置)上传视频需配置上传视频的选项无需配置(上传的视频由135编辑器返回超链接,你无需配置)上传音乐需配置上SEO靠我传音乐的选项无需配置(上传的音乐由135编辑器返回超链接,你无需配置)大多数功能需配置大多数功能的选项无需配置(大多数功能由135编辑器返回超链接,你无需配置)

安装UEditor

由于135编辑器是基于SEO靠我UEditor富文本的所以需要先安装UEditor富文本来支持135编辑器的嵌入,此方法只针对于免费使用135编辑器的人群,如果你是要付费使用的话你可以联系135编辑器的人,他们会有专门的技术人员提供SEO靠我技术支持。

下载UEditor编辑器

这里我是使用Flask来作为后端程序,如果你使用UEditor官网所指定的程序的话可以直接看UEditor的文档,访问UEditor首页,下载1.4.3.3 PHP SEO靠我UTF-8版本的UEditor,并解压到Flask应用程序的static目录。解压之后的目录结构是这样的:

|+static/

| |+ueditor/

| | |+dialogs/

| | |+lang/

|SEO靠我 | |+php/ #因为我是Flask,所以这个目录中只有config.json对我有用,我已经把他放到了ueditor目录里面

| | |+themes/

| | |+third-party/

| | SEO靠我|-config.json

| | |-index.html

| | |-ueditor.all.js

| | |-ueditor.all.min.js

| | |-ueditor.config.js

| | SEO靠我|-ueditor.parse.js

| | |-ueditor.parse.min.js

+代表目录

-代表文件 在index.html中加入UEditor:

因为我是Flask程序,所以需要在templatSEO靠我es目录中新建一个index.html的文件,你们可以根据自己语言和框架来选择文件建在那个目录中。

在index.html文件的head标签中加入下面几行:

<script type="text/javaSEO靠我script" charset="utf-8" src="{{ url_for(static, filename=ueditor/ueditor.config.js) }}"></script> SEO靠我 <script type="text/javascript" charset="utf-8" src="{{ url_for(static, filename=ueditor/ueditoSEO靠我r.all.min.js) }}"> </script> <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--> <!--这里加载的语言文件SEO靠我会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--> <script type="text/javascript" charset=SEO靠我"utf-8" src="{{ url_for(static, filename=ueditor/lang/zh-cn/zh-cn.js) }}"></script> <style>.SEO靠我edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{background-image: url(SEO靠我"http://static.135editor.com/img/icons/editor-135-icon.png") !important;background-size: 85%;backgroSEO靠我und-position: center;background-repeat: no-repeat;}.edui-default{width: 920px;margin: 0 auto;} SEO靠我 </style>

在body标签加入:

<script id="editor" type="text/plain"></script> <script type="text/javaSEO靠我script">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(editor)就能拿到相关的实例var ueSEO靠我 = UE.getEditor(editor, {serverUrl: "/upload/"}); </script>

请求路径配置:

UEditor 1.4.2+ 起,推荐使用统一的请求SEO靠我路径,在部署好前端代码后,需要修改 ueditor.config.js 里的 serverUrl 参数(或者初始化时指定,见上面的代码),改成 ‘/upload/’ 。

UEditor初始化时,会向后端SEO靠我请求配置文件,后端收到请求后返回JSON格式的配置文件。具体实现参照后面的代码。

详细配置内容参见文档。

创建Flask应用程序(app.py): # -*- coding: utf-8 SEO靠我-*-from flask import Flask, render_templateapp = Flask(__name__)@app.route(/) def index():reSEO靠我turn render_template(index.html)@app.route(/upload/, methods=[GET, POST]) def upload():passiSEO靠我f __name__ == __main__:app.run(debug=True)

应用程序运行之后,我们访问 http://localhost:5000/ 就可以看到UEditor编辑器了,上图:

USEO靠我Editor后端请求规范说明

与后台通信的功能列表: 上传图片拖放图片上传、粘贴板图片上传word文档图片转存截图工具上传上传涂鸦上传视频上传附件在线图片管理粘贴转存远程图片 SEO靠我 统一请求格式说明: 前端请求通过唯一的后台文件 /upload/ 处理前端的请求/upload/通过GET上的action参数,判断是什么类型的请求省去不SEO靠我必要的请求,去除涂鸦添加背景的请求,用前端FileReader读取本地图片代替请求返回数据的格式,常规返回json字符串,数据包含state属性(成功时返回’SUCCESS’,错误* 时返回错误信息)SEO靠我。请求支持jsonp请求格式,当请求有通过GET方式传callback的参数时,返回json数据前后加上括* 号,再在前面加上callback的值,格式类似这样:

cb({“key”: “value”}SEO靠我)

详细说明:http://fex-team.github.io/ueditor/#dev-request_specification

Flask实现后端请求

获取配置信息

由于接口升级,编辑器初始化时,首先SEO靠我会向后端请求配置信息,后端收到请求后,返

回相应的配置信息即可。请求参数: GET {"action": "config"} POST "upfile": File DaSEO靠我ta 返回格式: // 需要支持callback参数,返回jsonp格式 {"imageUrl": "http://localhost/ueditorSEO靠我/php/controller.php?action=uploadimage","imagePath": "/ueditor/php/","imageFieldName": "upfile","imaSEO靠我geMaxSize": 2048,"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"] } 主要功SEO靠我能代码: @app.route(/upload/, methods=[GET, POST]) def upload():action = request.args.geSEO靠我t(action)# 解析JSON格式的配置文件# 这里使用PHP版本自带的config.json文件with open(os.path.join(app.static_folder, ueditorSEO靠我, php,config.json)) as fp:try:# 删除 `/**/` 之间的注释CONFIG = json.loads(re.sub(r\/\*.*\*\/, , fp.read()))SEO靠我except:CONFIG = {}if action == config:# 初始化时,返回配置文件给客户端result = CONFIGreturn json.dumps(result)

这样的话就SEO靠我不会有什么问题出现了。

安装135编辑器

现在可以开始安装135编辑器了,因为笔者没有钱,所以使用的是免费版的135编辑器,所以他是嵌入在UEditor里面的,并且通过笔者不断观察135编辑器的网站和严格SEO靠我的一致性,导致笔者的UEditor和135编辑器的UEditor一模一样,在下面开始分享给大家。

安装插件

将插件的两个文件下载到项目ueditor对应的目录里,并将135editor.js加载到自己的网SEO靠我页中

http://www.135editor.com/js/ueditor/plugins/135editor.js

http://www.135editor.com/js/ueditor/dialogSEO靠我s/135editor/135EditorDialogPage.html 加载135editor.js

在index.html中的body标签中加入135editor.js文件

<script id="edSEO靠我itor" type="text/plain"></script> <script type="text/javascript" src="{{ url_for(static,fileSEO靠我name=ueditor/plugins/135editor.js) }}"></script> <script type="text/javascript">//实例化编辑器//建议SEO靠我使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(editor)就能拿到相关的实例var ue = UE.getEditor(editSEO靠我or, {serverUrl: "/upload/"}); </script> 重写themes目录下的iframe.css文件 @charset "SEO靠我utf-8"; html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height: 1.6;backgrSEO靠我ound: #FFF;height:100%;} * {-webkit-max-logical-width: 100%;margin:0;padding:0;box-sizing: bSEO靠我order-box!important;-webkit-box-sizing: border-box!important;} body{-webkit-touch-callout:noSEO靠我ne;position: absolute; width: 100%;margin: 0;padding: 15px !important;font-size:16px;overflow-x:hiddSEO靠我en;font-family:微软雅黑,Microsoft YaHei,Arial,sans-serif;background-color:#FFF;line-height:inherit;heighSEO靠我t:100%;} p{clear:both;margin:0 0;white-space: normal;} img{*zoom:1;max-width:100%;*mSEO靠我ax-width:96%;height:auto !important;} iframe{width:100% !important;border:0;background-colorSEO靠我:inherit;} .vote_area{display:block} .vote_iframe{height:100%;width:100%!important;*SEO靠我width:96%!important} .qqmusic_iframe{width:100%!important;height:75px;background-color:#fcfcSEO靠我fc;} .audio_iframe{width:100%!important;background-color:#fcfcfc;height:82px} .blockSEO靠我quote_iframe{width:100%!important;height:64px} .blockquote_tips_iframe{width:100%!important;SEO靠我height:42px} .video_iframe{background-color:#000;width:100%!important;*width:96%!important;pSEO靠我osition:static} .shopcard_iframe{width:100%!important;height:95px;margin:14px 0} .toSEO靠我pic_iframe{width:100%!important;height:118px;margin:14px 0} .weapp_app_iframe{height:330px;mSEO靠我argin:14px 0}body{cursor:text;} a{color:#607fa6;text-decoration:none} .guide{backgroSEO靠我und-repeat:no-repeat;background-image: url(https://image.135editor.com/files/users/0/1/201708/xvCbQwSEO靠我OV_Ofmg.png);} [contenteditable] { caret-color: red;} ::-webkit-scrollbar {width:6pxSEO靠我;height:6px;background: #f1f1f1;} ::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 1SEO靠我6px #c1c1c1;} ::-webkit-input-placeholder {color: #ddd;} * { outline:0 none SEO靠我!important; blr:expression(this.onFocus=this.blur()); } *:focus {outline: none !impoSEO靠我rtant; }li.placeholder {position: relative;list-style-type: none;margin: 0;padding: 0;borderSEO靠我: none; } li.placeholder:before {position: absolute;content: " ";width: 0;height: 0;SEO靠我margin-top: -5px;left: 0px;top: -4px;border: 8px solid transparent;border-left-color: red;border-rigSEO靠我ht: none; } .dragged {position: absolute !important;top: 0;opacity: 0.5;z-index: 200SEO靠我0; }.hiddenIn135{display:none !important;visibility: hidden !important;}.showIn135{display:iSEO靠我nitial !important;opacity: 1 !important; visibility: visible !important;} .hoverimg:hover{baSEO靠我ckground:#000;}blockquote{margin:0;padding-left:10px;border-left:3px solid #DBDBDB;}ol,ul,dl SEO靠我 {/* IE7: reset rtl list margin. (#7334) */*margin-right: 0px;/* preserved spaces for list items witSEO靠我h text direction other than the list. (#6249,#8049)*/padding: 0 0 0 30px; }table.noBorderTabSEO靠我le td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd;} table{margSEO靠我in-bottom:10px;border-collapse:collapse;display:table;width:100%;margin:0 auto;} td,th{word-SEO靠我wrap:break-word;word-break:break-all;padding:5px;border:1px solid #DDD} caption{border:1px dSEO靠我ashed #DDD;border-bottom:0;padding:3px;text-align:center} th{border-top:2px solid #BBB;backgSEO靠我round:#f7f7f7} .ue-table-interlace-color-single{background-color:#fcfcfc} .ue-table-SEO靠我interlace-color-double{background-color:#f7faff}td p{margin:0;padding:0;width:auto;height:auto;}hr{bSEO靠我order: 0px;border-top: 1px solid #ccc;} img:hover {z-index:-1;cursor:pointer;} pre{wSEO靠我hite-space: pre-wrap; /* CSS 2.1 */word-wrap: break-word; /* IE7 */ } .marker {backgSEO靠我round-color: Yellow; }figure {text-align: center;border: solid 1px #ccc;border-radius: 2px;bSEO靠我ackground: rgba(0,0,0,0.05);padding: 10px;margin: 10px 20px;display: inline-block; }figure >SEO靠我 figcaption {text-align: center;display: block; /* For IE8 */ } em{font-style: italiSEO靠我c;} .view{height:100%;position: relative !important;} /*.view:after { content: ; heiSEO靠我ght: 60px; display: block;} */ ._135editor {border:0 none;padding: 0px;z-index:0;position: rSEO靠我elative !important;} ._135editor.active,.active{z-index: 100;outline: 1.5px dashed red !impoSEO靠我rtant;outline-offset: 2px; } ._135editor .overActive{z-index: 100;outline: 1.5px dasSEO靠我hed #6085ef !important;outline-offset: 2px; } ._135editor .styleActive{z-index: 100;SEO靠我outline: 1.5px dashed #6085ef !important;outline-offset: 2px; } .mark-changed {z-indSEO靠我ex: 101;outline: 2px dashed darkturquoise !important;outline-offset: 2px; } /*._135eSEO靠我ditor.active:before{content: "";z-index: -1;display: block;position: absolute;box-sizing:border-box;SEO靠我width: 102%;left:-1%;height: 100%;border:1px dashed red;} .view .active-135item:before {posiSEO靠我tion: absolute;content: ; left: 0;right: 0;top: 0;bottom: 0; box-sizing: border-box;border: 2px dashSEO靠我ed red;margin:-5px;z-index: 1000;}*/ ._135editor .draghandle{position: absolute;background-cSEO靠我olor:rgba(200,200,200,0.8);color:#333;cursor: move;top:-30px;right:-5px;padding: 3px 5px;font-size:1SEO靠我2px;} .view .active-135item{position: relative !important;}h1,h2,h3,h4,h5,h6{font-weight:400SEO靠我;font-size:16px} .hidden{display: none;visibility: hidden;} .otf-poptools{ line-heigSEO靠我ht: 24px; padding: 8px;border-radius: 0;border: 0 none;color: #FFF;position:absolute;width: 80%;leftSEO靠我:15px;background:rgb(103,91,84);} .otf-poptools span {cursor: pointer;margin: 0 5px; SEO靠我 } .slider{height:16px!important;width:auto;position:relative;background-color:#FFF;margin-bSEO靠我ottom:5px} .slider .complete{height:100%;width:auto;color:#333;font-size:10px;line-height:16SEO靠我px;text-align:center;background-color:#ccc;z-index:2} .slider .marker{height:16px;width:12pxSEO靠我;cursor:pointer;position:absolute;top:0;left:0;background-color:#999;z-index:3}/** 微信音乐,微信音频的样式 **/ SEO靠我 .db { display: block;}qqmusic{min-height: 60px;width: 100%;background: #ccc;margin: 17px 1pxSEO靠我 16px 0;display: block;opacity: 0.9;background-image: url(https://image.135editor.com/files/users/0/SEO靠我1/201611/Omfdq9uS_SNXj.png);background-size: contain;background-position: center;background-repeat: SEO靠我no-repeat; } mpvoice{min-height: 90px;width: 100%;background: #ccc;margin: 17px 1px SEO靠我16px 0;display: block;opacity: 0.9;background-color:#FCFCFC;background-image: url(https://by.135editSEO靠我or.com/img/icons/mpvoice.png);background-size: auto;background-position: left center;background-repeSEO靠我at: no-repeat; } 覆盖themes的images目录下的所有图片

百度云链接:https://pan.baidu.com/s/1rriaUhgCeNhlSEO靠我gwfmzTTOJA

提取码:5j19重写ueditor.config.js文件 /*** ueditor完整配置项* 可以在这里配置整个编辑器的特性*/ /******SEO靠我********************提示********************************* 所有被注释的配置项均为UEditor默认值。* 修改默认配置请首先确保已经完全明确该参数SEO靠我的真实用途。* 主要有两种修改方案,一种是取消此处注释,然后修改成对应参数;另一种是在实例化编辑器时传入对应参数。* 当升级编辑器时,可直接使用旧版配置文件替换新版配置文件,不用担心旧版配置文件中因缺SEO靠我少新功能所需的参数而导致脚本报错。**************************提示********************************/(function () {/*** 编辑器SEO靠我资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。* 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网SEO靠我站根目录的相对路径"进行配置。* "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。* 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引SEO靠我用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。* 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。SEO靠我当然,需要令此处的URL等于对应的配置。* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";*/var URL = window.UEDITOR_HOME_URL ||SEO靠我 getUEBasePath();/*** 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。*/window.UEDITOR_CONFIG = {//为编辑器实例添加一个路径,这个不能被注SEO靠我释UEDITOR_HOME_URL: URL// 服务器统一请求接口路径, serverUrl: URL + "/upload/"//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自SEO靠我己需要的重新定义, toolbars: [[fullscreen, source, |, undo, redo, |,bold, italic, underline, fontborder, striSEO靠我kethrough, superscript, subscript, removeformat, formatmatch, autotypeset, blockquote, pasteplain, |SEO靠我, forecolor, backcolor, insertorderedlist, insertunorderedlist, selectall, cleardoc, |,rowspacingtopSEO靠我, rowspacingbottom, lineheight, |,customstyle, paragraph, fontfamily, fontsize, |,directionalityltr,SEO靠我 directionalityrtl, indent, |,justifyleft, justifycenter, justifyright, justifyjustify, |, touppercaSEO靠我se, tolowercase, |,link, unlink, anchor, |, imagenone, imageleft, imageright, imagecenter, |,simpleuSEO靠我pload, insertimage, emotion, scrawl, insertvideo, music, attachment, map, gmap, insertframe, insertcSEO靠我ode, webapp, pagebreak, template, background, |,horizontal, date, time, spechars, snapscreen, wordimSEO靠我age, |,inserttable, deletetable, insertparagraphbeforetable, insertrow, deleterow, insertcol, deleteSEO靠我col, mergecells, mergeright, mergedown, splittocells, splittorows, splittocols, charts, |,print, preSEO靠我view, searchreplace, drafts, help]]//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准//,labelMap:{// anchSEO靠我or:, undo://}//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件://lang值也可以通过自动获取 (SEO靠我navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()//,lang:"zh-cn"SEO靠我//,langPath:URL +"lang/"//主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换,当然,前提条件是themes文件夹下存在对应的主题文件://现SEO靠我有如下皮肤:default//,theme:default//,themePath:URL +"themes/",zIndex : 1 //编辑器层级的基数,默认是900// 针对getAllHtmlSEO靠我方法,会在对应的head标签中增加该编码设置。,charset:"utf-8"//若实例化编辑器的页面手动修改的domain,此处需要设置为true//,customDomain:false//常用配SEO靠我置项目//,isShow : true //默认显示编辑器,textarea:content // 提交表单时,服务器获取编辑器提交内容的所用的参数,多实例时可以给容器name属性,会将name给定的SEO靠我值最为每个实例的键值,不用每次实例化的时候都设置这个值//,initialContent:欢迎使用ueditor! //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子//SEO靠我,autoClearinitialContent:true //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了//,fSEO靠我ocus:false //初始化时,是否让编辑器获得焦点true或false//如果自定义,最好给p标签如下的行高,要不输入中文时,会有跳动感//,initialStyle:p{line-heightSEO靠我:1em}//编辑器层级的基数,可以用来改变字体等,iframeCssUrl: URL + /themes/iframe.css //给编辑区域的iframe引入一个css文件//indentValuSEO靠我e//首行缩进距离,默认是2em//,indentValue:2em// ,initialFrameWidth:1000 //初始化编辑器宽度,默认1000// ,initialFrameHeightSEO靠我:800 //初始化编辑器高度,默认320,readonly : false //编辑器初始化结束后,编辑区域是否是只读的,默认是false//,autoClearEmptyNode : true /SEO靠我/getContent时,是否删除空的inlineElement节点(包括嵌套的情况)//启用自动保存//,enableAutoSave: true//自动保存间隔时间, 单位ms,saveInterSEO靠我val: 60000//,fullscreen : false //是否开启初始化时即全屏,默认关闭,imagePopup:true //图片操作的浮层开关,默认打开,autoSyncData:truSEO靠我e //自动同步编辑器要提交的数据//,emotionLocalization:false //是否开启表情本地化,默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹/SEO靠我/粘贴只保留标签,去除标签所有属性//,retainOnlyLabelPasted: false//,pasteplain:false //是否默认为纯文本粘贴。false为不使用纯文本粘贴,trueSEO靠我为使用纯文本粘贴//纯文本粘贴模式下的过滤规则//filterTxtRules : function(){// function transP(node){// node.tagName = p;//SEO靠我 node.setStyle();// }// return {// //直接删除及其字节点内容// - : script style object iframe embed input selectSEO靠我,// p: {$:{}},// br:{$:{}},// div:{$:{}},// li:{$:{}},// caption:transP,// th:transP,// tr:transP,//SEO靠我 h1:transP,h2:transP,h3:transP,h4:transP,h5:transP,h6:transP,// td:function(node){// //没有内容的td直接删掉//SEO靠我 var txt = !!node.innerText();// if(txt){// node.parentNode.insertAfter(UE.uNode.createText( &nbsp; SEO靠我&nbsp;),node);// }// node.parentNode.removeChild(node,node.innerText())// }// }//}()//,allHtmlEnableSEO靠我d:false //提交到后台的数据是否包含整个html字符串//insertorderedlist//有序列表的下拉配置,值留空时支持多语言自动识别,若配置值,则以此值为准,insertordereSEO靠我dlist:{//自定的样式// num:1,2,3...,// num1:1),2),3)...,// num2:(1),(2),(3)...,// cn:一,二,三....,// cn1:一),二SEO靠我),三)....,// cn2:(一),(二),(三)....,//系统自带decimal : , //1,2,3...lower-alpha : , // a,b,c...lower-roman :SEO靠我 , //i,ii,iii...upper-alpha : , //lang //A,B,Cupper-roman : , //I,II,III...cjk-ideographic : 一、二、三、,SEO靠我lower-greek:α,β,γ,δ}//insertunorderedlist//无序列表的下拉配置,值留空时支持多语言自动识别,若配置值,则以此值为准,insertunorderedlist :SEO靠我 {//自定的样式//dash :— 破折号, //-破折号//dot: 。 小圆圈,//系统自带circle : , // ○ 小圆圈disc : , // ● 小圆点square : //■ 小方SEO靠我块},listDefaultPaddingLeft : 30//默认的左边缩进的基数倍//,listiconpath : http://bs.baidu.com/listicon///自定义标号的路径SEO靠我,maxListLevel : -1 //限制可以tab的级数, 设置-1为不限制,autoTransWordToList:true //禁止word中粘贴进来的列表自动变成列表标签//fontfamSEO靠我ily//字体设置 label留空支持多语言自动切换,若配置,则以配置值为准,fontfamily:[{ label:,name:yahei,val:微软雅黑}, // 微软雅黑,Microsoft SEO靠我YaHei{ label:,name:songti,val:宋体,SimSun},{ label:,name:kaiti,val:楷体,楷体_GB2312,SimKai},{ label:,name:SEO靠我heiti,val:黑体,SimHei},{ label:,name:lishu,val:隶书,SimLi},//{ label:文泉驿等宽正黑,name:,val:文泉驿等宽正黑},//{ labeSEO靠我l:文泉驿等宽微米黑,name:,val:文泉驿等宽微米黑},{ label:站酷高端黑,name:,val:站酷高端黑},{ label:站酷快乐体,name:, val:HappyZcool},{SEO靠我 label:仿宋,name:,val:仿宋},//{ label:思源粗体,name:,val:Source Han Sans K Heavy},//{ label:思源极细,name:,val:SSEO靠我ource Han Sans K ExtraLight},{ label:,name:arial,val:arial,helvetica,sans-serif}]//fontsize//字号,fontSEO靠我size:[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]//liSEO靠我neheight//行内间距 值和显示的名字相同,lineheight:[1, 1.5,1.75,2,2.5, 3, 4, 5]//paragraph//段落格式 值留空时支持多语言自动识别,若配置,SEO靠我则以配置值为准//,paragraph:{p:, h1:, h2:, h3:, h4:, h5:, h6:}//rowspacingtop//段间距 值和显示的名字相同//,rowspacingtopSEO靠我:[5, 10, 15, 20, 25]//rowspacingBottom//段间距 值和显示的名字相同//,rowspacingbottom:[5, 10, 15, 20, 25]//customSEO靠我style//自定义样式,不支持国际化,此处配置值即可最后显示值//block的元素是依据设置段落的逻辑设置的,inline的元素依据BIU的逻辑设置//尽量使用一些常用的标签//参数说明//tag SEO靠我使用的标签名字//label 显示的名字也是用来标识不同类型的标识符,注意这个值每个要不同,//style 添加的样式//每一个对象就是一个自定义的样式//,customstyle:[// {tag:SEO靠我h1, name:tc, label:, style:border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0SEO靠我 0 20px 0;},// {tag:h1, name:tl,label:, style:border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:SEO靠我0 0 10px 0;},// {tag:span,name:im, label:, style:font-style:italic;font-weight:bold},// {tag:span,naSEO靠我me:hi, label:, style:font-style:italic;font-weight:bold;color:rgb(51, 153, 204)}//]//打开右键菜单功能,enableSEO靠我ContextMenu: true//右键菜单的内容,可以参考plugins/contextmenu.js里边的默认菜单的例子,label留空支持国际化,否则以此配置为准//,contextMenu:SEO靠我[// {// label:, //显示的名称// cmdName:selectall,//执行的command命令,当点击这个右键菜单时// //exec可选,有了exec就会在点击时执行这个funSEO靠我ction,优先级高于cmdName// exec:function () {// //this是当前编辑器的实例// //this.ui._dialogs[inserttableDialog].opSEO靠我en();// }// }//]//快捷菜单,shortcutMenu:["fontfamily","fontsize","|","bold","italic","underline",fontborSEO靠我der,strikethrough,"forecolor","shadowcolor","insertorderedlist","insertunorderedlist","superscript",SEO靠我 "subscript","|","justifyleft","justifycenter","justifyright",justifyjustify,"indent","rowspacingtopSEO靠我",rowspacingbottom,"lineheight",letterspacing],newShortcutMenu:["fontfamily","fontsize","justifyleftSEO靠我","justifycenter","justifyright",justifyjustify,"indent","outpadding",letterspacing,<br>, "rowspacinSEO靠我gtop",rowspacingbottom,"lineheight","insertorderedlist","insertunorderedlist","bold","italic","underSEO靠我line",fontborder,strikethrough,<br>,"forecolor","shadowcolor","backcolor","superscript", "subscript"SEO靠我,link,unlink]//elementPathEnabled//是否启用元素路径,默认是显示,elementPathEnabled : false//wordCount,wordCount:trSEO靠我ue //是否开启字数统计//,maximumWords:10000 //允许的最大字符数//字数统计提示,{#count}代表当前字数,{#leave}代表还可以输入多少字符数,留空支持多语言自动切SEO靠我换,否则按此配置显示,wordCountMsg:当前已输入 {#count} 个字符,您还可以输入{#leave} 个字符 //当前已输入 {#count} 个字符,您还可以输入{#leave} SEO靠我个字符//超出字数限制提示 留空支持多语言自动切换,否则按此配置显示//,wordOverFlowMsg: //<span style="color:red;">你输入的字符个数已经超出最大允SEO靠我许值,服务器可能会拒绝保存!</span>//tab//点击tab键时移动的距离,tabSize倍数,tabNode什么字符做为单位//,tabSize:4//,tabNode:&nbsp;//remSEO靠我oveFormat//清除格式时可以删除的标签和属性//removeForamtTags标签,removeFormatTags:a,b,big,code,del,dfn,em,font,i,sectiSEO靠我on,blockquote,pre,fieldset,ins,kbd,q,samp,small,span,label,strike,strong,sub,sup,tt,u,var//removeForSEO靠我matAttributes属性,removeFormatAttributes:class,style,lang,width,accuse,height,align,hspace,valign,dataSEO靠我-width,data-brushtype,opacity,border,title,placeholder//undo//可以最多回退的次数,默认20,maxUndoCount:20//当输入的字符SEO靠我数超过该值时,保存一次现场//,maxInputCount:1//autoHeightEnabled// 是否自动长高,默认true,autoHeightEnabled:false//scaleEnaSEO靠我bled//是否可以拉伸长高,默认true(当开启时,自动长高失效),scaleEnabled:false,imageScaleEnabled:true//,minFrameWidth:800 SEO靠我//编辑器拖动时最小宽度,默认800//,minFrameHeight:220 //编辑器拖动时最小高度,默认220//autoFloatEnabled//是否保持toolbar的位置不动,默认trSEO靠我ue,autoFloatEnabled:false//浮动时工具栏距离浏览器顶部的高度,用于某些具有固定头部的页面//,topOffset:30//编辑器底部距离工具栏高度(如果参数大于等于编辑器高度SEO靠我,则设置无效)//,toolbarTopOffset:400,remoteName:#remoteName,remoteSummary:#remoteSummary,remoteCoverimg:#rSEO靠我emoteCoverimg//设置远程图片是否抓取到本地保存,catchRemoteImageEnable: true //设置是否抓取远程图片//pageBreakTag//分页标识符,默认是_ueSEO靠我ditor_page_break_tag_//,pageBreakTag:_ueditor_page_break_tag_// autotypeset// 自动排版参数,autotypeset: {mSEO靠我ergeEmptyline: true, //合并空行removeClass: false, //去掉冗余的classremoveEmptyline: fSEO靠我alse, //去掉空行textAlign:false,//textAlign:"left", //段落的排版方式,可以是 left,right,centeSEO靠我r,justify 去掉这个属性表示不执行排版imageBlockLine: false, //图片的浮动方式,独占一行剧中,左右浮动,默认: center,left,right,noneSEO靠我 去掉这个属性表示不执行排版pasteFilter: false, //根据规则过滤没事粘贴进来的内容clearFontSize: false, //去掉所SEO靠我有的内嵌字号,使用编辑器默认的字号clearFontFamily: false, //去掉所有的内嵌字体,使用编辑器默认的字体removeEmptyNode: false, SEO靠我 // 去掉空节点//可以去掉的标签//removeTagNames: {标签名字:1},indent: false, // 行首缩进indentValue : SEO靠我2em, //行首缩进的大小bdc2sb: false,tobdc: false}//tableDragable//表格是否可以拖拽//,tableDragable: true/SEO靠我/sourceEditor//源码的查看方式,codemirror 是代码高亮,textarea是文本框,默认是codemirror//注意默认codemirror只能在ie8+和非ie中使用,souSEO靠我rceEditor:"codemirror"//如果sourceEditor是codemirror,还用配置一下两个参数//codeMirrorJsUrl js加载的路径,默认是 URL + "thiSEO靠我rd-party/codemirror/codemirror.js"//,codeMirrorJsUrl:URL + "third-party/codemirror/codemirror.js"//cSEO靠我odeMirrorCssUrl css加载的路径,默认是 URL + "third-party/codemirror/codemirror.css"//,codeMirrorCssUrl:URL + SEO靠我"third-party/codemirror/codemirror.css"//编辑器初始化完成后是否进入源码模式,默认为否。//,sourceEditorFirst:false//iframeUrSEO靠我lMap//dialog内容的路径 ~会被替换成URL,垓属性一旦打开,将覆盖所有的dialog的默认路径//,iframeUrlMap:{// anchor:~/dialogs/anchor/SEO靠我anchor.html,//}//allowLinkProtocol 允许的链接地址,有这些前缀的链接地址不会自动添加http//, allowLinkProtocols: [http:, httpsSEO靠我:, #, /, ftp:, mailto:, tel:, git:, svn:]//webAppKey 百度应用的APIkey,每个站长必须首先去百度官网注册一个key后方能正常使用app功能,注册SEO靠我介绍,http://app.baidu.com/static/cms/getapikey.html//, webAppKey: ""//默认过滤规则相关配置项目,disabledTableInTablSEO靠我e:false //禁止表格嵌套//,allowDivTransToP:true //允许进入编辑器的div标签自动变成p标签,rgb2Hex:true //默SEO靠我认产出的数据中的color自动从rgb格式变成16进制格式// xss 过滤是否开启,inserthtml等操作,xssFilterRules: true//input xss过滤,inputXssFSEO靠我ilter: true//output xss过滤,outputXssFilter: true// xss过滤白名单 名单来源: https://raw.githubusercontent.com/lSEO靠我eizongmin/js-xss/master/lib/default.js// ,whitList: {// a: [target, href, title, class, style]SEO靠我,// abbr: [title, class, style],// address: [class, style],// area: [shape, coords, href, altSEO靠我],// article: [],// aside: [],// audio: [autoplay, controls, loop, preload, src, class, style],SEO靠我// b: [class, style],// bdi: [dir],// bdo: [dir],// big: [],// blockquote: [cite,SEO靠我 class, style],// br: [],// caption: [class, style],// center: [],// cite: [],// code: SEO靠我[class, style],// col: [align, valign, span, width, class, style],// colgroup: [align, valign, SEO靠我span, width, class, style],// dd: [class, style],// del: [datetime],// details: [open],// SEO靠我 div: [class, style],// dl: [class, style],// dt: [class, style],// em: [class, stSEO靠我yle],// font: [color, size, face],// footer: [],// h1: [class, style],// h2: [class, sSEO靠我tyle],// h3: [class, style],// h4: [class, style],// h5: [class, style],// h6: [SEO靠我class, style],// header: [],// hr: [],// i: [class, style],// img: [src, alt, title,SEO靠我 width, height, id, _src, loadingclass, class, data-latex],// ins: [datetime],// li: [classSEO靠我, style],// mark: [],// nav: [],// ol: [class, style],// p: [class, style],// preSEO靠我: [class, style],// s: [],// section:[],// small: [],// span: [class, style],// sub:SEO靠我 [class, style],// sup: [class, style],// strong: [class, style],// table: [width, border,SEO靠我 align, valign, class, style],// tbody: [align, valign, class, style],// td: [width, rowspan,SEO靠我 colspan, align, valign, class, style],// tfoot: [align, valign, class, style],// th: [width,SEO靠我 rowspan, colspan, align, valign, class, style],// thead: [align, valign, class, style],// tr: SEO靠我 [rowspan, align, valign, class, style],// tt: [],// u: [],// ul: [class, style],//SEO靠我 video: [autoplay, controls, loop, preload, src, height, width, class, style]// }};function getUEBSEO靠我asePath(docUrl, confUrl) {return getBasePath(docUrl || self.document.URL || self.location.href, confSEO靠我Url || getConfigFilePath());}function getConfigFilePath() {var configPath = document.getElementsByTaSEO靠我gName(script);return configPath[ configPath.length - 1 ].src;}function getBasePath(docUrl, confUrl) SEO靠我{var basePath = confUrl;if (/^(\/|\\\\)/.test(confUrl)) {basePath = /^.+?\w(\/|\\\\)/.exec(docUrl)[0SEO靠我] + confUrl.replace(/^(\/|\\\\)/, );} else if (!/^[a-z]+:/i.test(confUrl)) {docUrl = docUrl.split("#SEO靠我")[0].split("?")[0].replace(/[^\\\/]+$/, );basePath = docUrl + "" + confUrl;}return optimizationPathSEO靠我(basePath);}function optimizationPath(path) {var protocol = /^[a-z]+:\/\//.exec(path)[ 0 ],tmp = nulSEO靠我l,res = [];path = path.replace(protocol, "").split("?")[0].split("#")[0];path = path.replace(/\\/g, SEO靠我/).split(/\//);path[ path.length - 1 ] = "";while (path.length) {if (( tmp = path.shift() ) === ".."SEO靠我) {res.pop();} else if (tmp !== ".") {res.push(tmp);}}return protocol + res.join("/");}window.UE = {SEO靠我getUEBasePath: getUEBasePath};})(); 修改index.html文件

修改index.html文件body标签中的内容即可

<script id="editor" typSEO靠我e="text/plain"></script> <script type="text/javascript" src="{{ url_for(static,filename=ueditor/plugSEO靠我ins/135editor.js) }}"></script> <script type="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例SEO靠我,如果在某个闭包下引用该编辑器,直接调用UE.getEditor(editor)就能拿到相关的实例current_editor = UE.getEditor(editor,{serverUrl:/upSEO靠我load/,initialFrameHeight:400,focus:true,toolbars:[[bold,italic, underline, fontborder, strikethroughSEO靠我, 135editor,rowspacingtop, rowspacingbottom, lineheight,removeformat, formatmatch, autotypeset, bloSEO靠我ckquote, pasteplain, |, forecolor, backcolor, insertorderedlist, insertunorderedlist, selectall, cleSEO靠我ardoc, |,superscript, subscript ]],focusInEnd:true}); 查看效果

最后就是检验效果的时候到了,先看看135编辑器给的demo案例中的编辑器吧

135SEO靠我编辑器demo:

笔者完成的demo:

不仅仅是表面一样,连内容也是一样,给你们看看135编辑器的内容效果。

内容效果:

如果在实现135编辑器的时候出现任何情况都可以联系笔者,笔者尽可能为大家解决烦恼,以上SEO靠我内容部分是参照http://flask123.sinaapp.com/article/47/文章所写。

QQ联系方式:1670044143

“SEO靠我”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与 我们联系删除或处理,客服邮箱:html5sh@163.com,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同 其观点或证实其内容的真实性。

网站备案号:浙ICP备17034767号-2