道招

wangEditor富文本编辑器改造记录之一——了解wangEditor结构

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

wangEditor富文本编辑器改造记录之一——了解wangEditor结构

最近鉴于项目要求,需要对自己使用的富文本编辑器进行改造。

我们首先简单了解下wangEditor的源码结构

第一步:polyfill

当然现在这些基本都用不上了,现代点的浏览器都支持这些方法的

基于document封装了一套dom操作类DomElement

里面有forEachcssshowonaddClasschildrenfindparentinsertAfter等 然后将它改成类似jQuery的

function $(selector) {
  return new DomElement(selector);
}

配置

根据用户配置和默认值合并成最终的配置

工具栏上的各类菜单功能组件

比如HeadHeadFontSizeItalicUndoForeColorBold等,每个组件都可以注册在菜单组件Menu上,由菜单组件统一管理添加到工具栏上,几乎每个菜单功能组件都有一个_command方法,其主要功能就在这个方法中。 我们看一个设置颜色的组件ForeColor

// 原型
ForeColor.prototype = {
  constructor: ForeColor,

  // 执行命令
  _command: function _command(value, index) {
    var editor = this.editor;
    editor.cmd.do('foreColor', value);
  },
};

其核心方法就是document的execCommand

如果需要及时更新菜单功能组件的最新值(比如Bold组件查询当前位置是否已经加粗)来更新对应按钮的显示状态,就需要一个额外的方法tryChangeActive,所有功能组件的tryChangeActive方法会在执行了对应的command和保存选区时被调用。

怎么获取当前的最新值呢?尤其是那种从未通过菜单设置的地方?

以获取当前位置是否加粗的Bold为例

Bold.prototype = {
  constructor: Bold,
 // 试图改变 active 状态
  tryChangeActive: function tryChangeActive(e) {
    var editor = this.editor;
    var $elem = this.$elem;
    if (editor.cmd.queryCommandState('bold')) {
      this._active = true;
      $elem.addClass('active');
    } else {
      this._active = false;
      $elem.removeClass('active');
    }
  },
}

其核心就是document的queryCommandState方法。

这些菜单功能组件根据交互方式可以分为点击类(比如加粗Bold)和下拉类(比如对齐方式Justify)。

wangEditor还支持简单的多语言

更新时间:
上一篇:web前端开源流程图组件库调研记录下一篇:antv G6流程图darge实现节点回溯连线

相关文章

富文本编辑器wangEditor多语言、工具栏体验改造

支持多语言 首页wangEditro本身是支持使用多语言的,通过源码可以看到里面有个 replaceLang 方法,虽然这种写法有点非主流,但是是有效的,里面部分地方在支持多语言方面有些遗漏。 阅读更多…

在iframe中使用富文本编辑器wangEditor

自己做的邮件项目里面需要使用到富文本编辑器,邮件内容说白了就是HTML代码。前任使用的是wangEditor,部分定制化需求就是直接改的源码。 最近发现有的用户的邮件内容加进去的很多css信息, 阅读更多…

在iframe中使用富文本编辑器wangEditor

自己做的邮件项目里面需要使用到富文本编辑器,邮件内容说白了就是HTML代码。前任使用的是wangEditor,部分定制化需求就是直接改的源码。 最近发现有的用户的邮件内容加进去的很多css信息, 阅读更多…

关注道招网公众帐号
道招开发者二群