百度编辑器（ueditor）魔改：5、自定义一键排版（按照需求保留标签和样式）

1、增加自定义按钮

2、彻底接管文件上传

3、高亮提示

4、滚动条管理

5、自定义排版

-----------------------------------------------------------

作为一个平台，用户在发布文章也好，产品也好，都需要清除掉他们粘贴过来时的样式，以适应自己平台的需求，总不能让用户任意编辑，然后同一个网站，同一个页面类型呈现的格式五花八门，风格各异吧，所以，让我们强制清除我们不支持的格式吧！

百度编辑器内部其实自带了一个htmlParse，但在使用过程中，有些内容我们需要保留的，他也给弄掉了，但要是完全修正自带的代码，感觉好麻烦啊，算了，自己重新写一个，并接管过来吧

第一步：粘贴触发排版

先打开src\adapter\editor.js，找到editor.addListener("afterpaste", function() {这一行，在这行下边追加我们之前添加的按钮事件

            editor.addListener("afterpaste", function () {editor.execCommand('formatcontent'); // 触发我们自己定义的格式化

第二步：接管粘贴事件

打开\src\plugins\paste.js，这里百度编辑器自己定义了格式化方法的调用。。。。看起来有点眼晕，算了，不管他了

找到filter(div)的定义，在html = div.innerHTML;之后的代码全部注释掉，换成我们自己的代码

            //ie下使用innerHTML会产生多余的\r\n字符，也会产生&nbsp;这里过滤掉html = div.innerHTML;//.replace(/>(?:(\s|&nbsp;)*?)</g,'><');//接管粘贴事件if (me.queryCommandState('pasteplain') === 1) {me.execCommand('insertHtml', div.innerTEXT, true);} else {address = me.selection.getRange().createAddress(true);me.execCommand('insertHtml', html, true);}me.fireEvent("afterpaste", html);//之后代码全部注释掉

Hmmmmm，没有专门研究百度编辑器怎么实现的代码解析，所以这里我丢失了一个beforepaste事件得触发，反正我用不到 ^v^

我在这里直接触发afterpaste事件，用来调用自己定义的格式化方法

第三步：实现粘贴内容格式化

UE.plugins['formatcontent'] = function () {var me = this;me.commands['formatcontent'] = {execCommand: function () {var me = this;var body = me.window.document.body;var attrs = {a: ['href'],img: ['width', 'height', 'src']}var keeps = ['text-align', 'font-weight', 'font-style', 'display', 'align-item', 'justify-content'];formatElement(body);me.execCommand('adwordfilter', 'highlight');function formatElement(el) {var name = el.nodeName.toLowerCase();if (name == '#comment') {console.log(el)return;}if (name == '#text') {el.nodeValue = el.nodeValue.replace(/^(&nbsp;| | |[\s\r\n\t]|　)+/gi, '');return;}if (name == 'img' && el.style.margin == '0px auto') {return;}if (name != 'body') {var tar = el;// 获取当前标签所有样式var style = { length: el.style.length };for (var i = 0; i < el.style.length; i++) {style[i] = el.style[i];style[el.style[i]] = el.style[el.style[i]];}// 获取当前标签所有属性var attr = { length: el.attributes.length };for (var i = 0; i < el.attributes.length; i++) {attr[i] = el.attributes[i].localName;attr[el.attributes[i].localName] = el.attributes[i].value;}// 如果是特定标签，更换成P标签if ($.inArray(name, ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7']) > -1) {tar = me.window.document.createElement('p');tar.innerHTML = el.innerHTML;el.parentNode.insertBefore(tar, el);el.parentNode.removeChild(el)el = tar;name = el.nodeName.toLowerCase();}// 清空当前标签所有属性while (el.attributes.length > 0) {el.removeAttribute(el.attributes[0].localName);}// 如果属性不为空，则将符合条件的属性附加回来for (var i = 0; i < attr.length; i++) {switch (attr[i].toLowerCase()) {case 'align':el.style.textAlign = attr[attr[i]];break;default:if (attrs[name]) {if ($.inArray(attr[i].toLowerCase(), attrs[name]) > -1) {if (attr[i] == 'href') {var href = (function (url) {if (!/^https?:\/\//gi.test(url)) {return url;}if (/^https?:\/\/([a-z0-9]+\.)?xxxx\.com\.cn(?=$|[\\\/])/gi.test(url)) {return url;}})(attr[attr[i]]);if (href) {el.setAttribute('href', href.trim());}} else {el.setAttribute(attr[i], attr[attr[i]]);}}}break;}}// 将符合条件的样式附加回来for (var i = 0; i < style.length; i++) {if ($.inArray(style[i], keeps) < 0) {console.log(style[i], style[style[i]]);} else {el.style[style[i]] = style[style[i]];}}// 图片前追加p节点后居中if (name == 'img') {var tar = me.window.document.createElement('p');tar.style.textAlign = 'center';el.parentNode.insertBefore(tar, el);el.style.margin = '0px auto';tar.appendChild(el);el = tar;}// br换成pif (name == 'br') {if (el.nextSibling && el.nextSibling.nodeName.toLowerCase() == '#text') {var tar = me.window.document.createElement('p');for (var i = 0; i < el.parentNode.style.length; i++) {tar.style[el.parentNode.style[i]] = el.parentNode.style[el.parentNode.style[i]];}tar.innerHTML = el.nextSibling.nodeValue;el.parentNode.insertBefore(tar, el);el.parentNode.insertBefore(el, tar);el.parentNode.removeChild(el.nextSibling.nextSibling)el = tar;}}// 单列表格替换为p，否则宽95%if (name == 'table') {var single = true;for (var i = 0; i < el.rows.length; i++) {if (el.rows[i].cells.length > 1) {single = false;break;}if (el.rows[i].cells[0].rowSpan > 1 && i < el.rows.length - 1) {single = false;break;}}if (single) {var div = me.window.document.createElement('div');for (var i = 0; i < el.rows.length; i++) {var p = me.window.document.createElement('p');div.appendChild(p);p.innerHTML = el.rows[i].cells[0].innerHTML;}el.parentNode.insertBefore(div, el);el.parentNode.removeChild(el)el = div;} else {el.style.width = '95%';}}}for (var i = 0 ; i < el.childNodes.length; i++) {formatElement(el.childNodes[i]);}if (name == 'body') {me.setContent(el.innerHTML);// 去空行空标签var els = me.window.document.querySelector('body').querySelectorAll('*');for (var i = 0; i < els.length; i++) {if (!els[i].innerText.trim()) {if (els[i].querySelectorAll('img').length == 0 && els[i].nodeName.toLowerCase() != 'img') {els[i].parentNode.removeChild(els[i]);}}}els = me.window.document.querySelector('body').children;// 非居中段落加缩进for (var i = 0; i < els.length; i++) {if (els[i].nodeName.toLowerCase() == 'p' && els[i].style.textAlign != 'center' && els[i].style.justifyContent != 'center') {els[i].innerHTML = '　　' + els[i].innerHTML;}}}}}}
}

老顾的做法是，定义一些样式和属性，是否允许保留，如果允许保留，则格式化后重新赋予，否则则删除掉

主要就是样式保留粗体、斜体、居中等，而百度编辑器自身不支持flex布局的内容粘贴过来，所以在样式里保留display和justify-content，就可以保留flex布局了

当然，float布局一般来说应该是删除掉了，为了保证网站正文风格一致，很少有平台允许float布局和positioin定义

最后，老顾调用了setContent，用这个方法触发了百度编辑器本身的htmlParse，用来自动进行p标签排版。。。。老顾懒得自己弄了，反正百度编辑器里有了，嘿嘿

以上实现就是文盲所在单位网站平台的需求了，至于各自需要怎样的排版方式，可以自己进行修改

百度编辑器（ueditor）魔改：5、自定义一键排版（按照需求保留标签和样式）相关推荐

百度编辑器UEditor源码模式下过滤div/style等html标签
2019独角兽企业重金招聘Python工程师标准>>> UEditor在html代码模式下,当输入带有<div style="">.<ifram ...
百度html在线编辑器插件,百度编辑器UEditor插件DjangoUeditor v1.8.143
DjangoUeditor将Ueditor封装为一个Django app,提供文件/图片等上传功能,提供UEditorField.UEditorWidget等封装类,简化Ueditor在Django中 ...
php百度编辑器精简版,开源web编辑器|百度编辑器ueditor下载1.4.3.4php版下载_久友软件下载...
百度编辑器ueditor是由百度官方推出的开源web编辑器.百度编辑器ueditor能支持用户在网页上进行内容编辑,软件体积十分的轻巧,完全免费开源,加载速度极快,兼容所有主流的浏览器使用,如:Moz ...
基于百度编辑器Ueditor的二次开发
基于百度编辑器Ueditor的二次开发官网下载基本配置简化后端配置,不请求后端配置项后端接口规范修改图片上传说明及修改新增按钮及弹窗(自定义附件上传) 按钮文案修改在业务开发的时候,曾 ...
帝国cms html5 编辑器,帝国CMS修改默认编辑器为百度编辑器UEditor的方法
帝国默认编辑器确实非常难用,今天开拓族做了一个教程用最简单的方法来替换默认编辑器的方法! 同时支持前台投稿和后台发布! 效果演示下载百度编辑器ueditor,将ueditor解压到后上传到帝国的插件 ...
百度编辑器ueditor使用
百度编辑器ueditor使用引入步骤: ueditor放到相应目录比如\blog\Public\admin 2.页面head中加入js <script type="text/ja ...
【转】百度编辑器UEditor
Ueditor 1.4.3 单独调用上传图片,或文件功能原文:https://www.cnblogs.com/sadkilo/p/5951336.html 第一步引入ueditor的js包第二步 ...
百度编辑器Ueditor 初始化加载内容失败解决办法
原文地址为: 百度编辑器Ueditor 初始化加载内容失败解决办法项目上有用到百度文本编辑器ueditor,在页面加载的时候初始化编辑器内容时候,使用 $.document.ready(functi ...
百度编辑器ueditor插入表格没有边框解决方法
百度编辑器ueditor插入一个表格后,在编辑过程中有表格,但是保存后,在前台网页中没有边框,也没有颜色.找了很久的源码,终于解决了. 打开编辑器根目录下面的ueditor.all.js文件,找到: ...
百度编辑器整合html,怎么把百度编辑器(Ueditor)整合到dedecms中
Ueditor整合dedecms步骤 1ueditor的下载安装到ueditor官网下载最新版的编辑器源码,下载地址:ueditor我下载的是[1.2.4.0 PHP 版本] 到dedecms的目录 ...

百度编辑器（ueditor）魔改：5、自定义一键排版（按照需求保留标签和样式）

百度编辑器（ueditor）魔改：5、自定义一键排版（按照需求保留标签和样式）相关推荐

最新文章

热门文章