富文本 —— wangEditor

姗姗来迟的富文本

前序：

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

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

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

/*
menu - indent
*/
// 构造函数
function Indent(editor) {
    this.editor = editor;
     // 设置菜单的样式，文本，title仅为悬浮时显示名称，各位客官可看需添加
    this.$elem = $('
');
    // 设置操作方式为点击还是选项面板
    this.type = 'click';

    // 当前是否 active 状态
    this._active  = false;
}

// 原型
Indent.prototype = {
    constructor: Indent,
   // 设置点击事件
    onClick: function onClick(e) {
    // 这里必须要注意，在纯文本没有外部元素包裹的时候，这里会把纯文本的父元素获取，
    // 故后面设置的就往往不是你想要的，需要约定俗成，任意一行内容均需要一个元素包裹，  
    // 以便样式控制影响所在行，若想测试这种效果，请使用
    // editor.txt.html('纯文本内容') 、
    // editor.txt.html('
带元素的内容
') 分别试下
        var $selectionElem = this.editor.selection.getSelectionContainerElem();

    // 这里仅仅使用document.execCommand的缩进操作，至于精准的按当前字体大小以及设置缩进单位的，请自行研究
        $($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";}

• 最后补充说明下，首项缩进要是想和当前字体大小一致，其实加特殊空白字符，有字体大小去定义为最好，控制外边距这种不太好控制，想一模一样还是走了和字体那个一样，故干脆就是添加特殊空白字符就好了，如下：

 // $($selectionElem).css('text-indent', '2em');
 // 获取当前光标所在行的元素
let $selectionElem = this.editor.selection.getSelectionContainerElem()[0];
 // 设置元素内容为前增的特殊空格的字符，注意这里不是敲空格得到的字符
$selectionElem.innerText = '　　' + $selectionElem.innerText;

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

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

let box = document.createElement("div");
box .innerHTML = text;
editor.txt.html(box .innerText || box .textContent);
//使用完记得回收喔，环保从小事开始
box.remove();