姗姗来迟的富文本

前序：

• 当前文档展示的解决方案之一
• 在这什么都想网页展示的年代，dom元素承担了偏离它初衷的负担
• 选择这个富文本，皆因 Simple Job Simple App
• wangEditor官网
• 当前版本 v 3.1.1
• 源码很多注释，但是说真的还是2.X版本比较接地气，3.X从源码这些封装来说是好了很多，但是面向开发者，总是少了点味道
• 本文不作wangEditor基础使用介绍等等，仅为自己遇到的一些问题的汇总，慎看

一：wangEditor 3.X 的插件扩展方法：

• 这里采用直接修改源代码的做法，当然看懂了，你也可以外部封装，但是想不改动源码目前是想不出其他方法，即使有，但我觉得要是内部不开放接口，这么搞实在没意义，故下面仅供参考，做法过于幼稚，请勿下饭
• 修改压缩包release文件下的 wangEditor.js，至于改完要不要压缩自行选择
• 新增菜单插件 — 首项缩进 Indent

/*
menu - indent
*/
// 构造函数
function Indent(editor) {
this.editor = editor;
// 设置菜单的样式，文本，title仅为悬浮时显示名称，各位客官可看需添加
this.$elem = $('<div class="w-e-menu" title="首行缩进"><i class="w-e-icon-indent-right"></i></div>');
// 设置操作方式为点击还是选项面板
this.type = 'click';
// 当前是否 active 状态
this._active
= false;
}
// 原型
Indent.prototype = {
constructor: Indent,
// 设置点击事件
onClick: function onClick(e) {
// 这里必须要注意，在纯文本没有外部元素包裹的时候，这里会把纯文本的父元素获取，
// 故后面设置的就往往不是你想要的，需要约定俗成，任意一行内容均需要一个元素包裹，
// 以便样式控制影响所在行，若想测试这种效果，请使用
// editor.txt.html('纯文本内容') 、
// editor.txt.html('<p>带元素的内容</p>') 分别试下
var $selectionElem = this.editor.selection.getSelectionContainerElem();
// 这里仅仅使用dom的缩进操作，至于精准的按当前字体大小以及设置缩进单位的，请自行研究
$($selectionElem).css('text-indent', '2em');
},
// 设置菜单切换状态
tryChangeActive: function tryChangeActive(e) {
var editor = this.editor;
var $elem = this.$elem ;
if (editor.cmd.queryCommandState('indent')) {
this._active = true;
$elem.addClass('w-e-active');
} else {
this._active = false;
$elem.removeClass('w-e-active');
}
}
};

• 将插件 Indent 注册到菜单容器

MenuConstructors.indent = Indent;

• 修改内置css文件，添加修改后的字体图标

// 覆盖还是修改取决于你自己，要是懒得找，可以外置这些字体设置，毕竟是样式定位
// 需要注意，内置css的  转移符
// 修改的字体base64格式文本，后面省略，具体的看你拿到的字体转换后的base64为准
// 字体格式这边选择woff2，已跟原版不同，具体看自己选择
// 此处仅展示所在位置
@font-face {
font-family: 'w-e-icon';
src: url(data:application/font-woff2;charset=utf-8;base64...)format('woff2');
font-weight: normal;
font-style: normal;}
// 新增首项缩进的样式，样式代码也来自实际字体编号，切勿直接CV
.w-e-icon-indent-right:before {
content: "\e80f";}

二：保存后的富文本标签显示的解决方法：

• 当你尝试editor.txt.html发觉显示为带标签元素的文本时，那说明内容中特殊符号经过了转移，所以流程是先把已转义的符号改回正常的符号，在html化，网上找到的是其实是浏览器转移好的文本，再把文本取出给editor.txt.html，如下：

let box = document.createElement("div");
box .innerHTML = text;
editor.txt.html(box .innerText || box .textContent);