RichText插件

v0.4.0+

该插件提供节点富文本编辑的能力，注册了即可生效。

默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色、背景颜色。不支持上划线、行高。

该插件的原理是使用Quill编辑器实现富文本编辑，然后把编辑后生成的DOM节点直接作为节点的文本数据，并且在渲染的时候通过svg的foreignObject标签嵌入DOM节点。

v0.5.6即以前的版本存在以下提示：
这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将svg导出为图片的原理很简单，获取到svg字符串，然后创建为type=image/svg+xml类型的blob数据，再使用URL.createObjectURL方法生成data:url数据，再创建一个Image标签，将data:url作为该图片的src，最后再将这个图片绘制到canvas对象上进行导出，但是经过测试，当svg中嵌入了DOM节点，这种方式导出会出错，并且尝试了多种方式后都无法实现完美的导出效果，目前的方式是遍历svg中的foreignObject节点，使用html2canvas将foreignObject节点内的DOM节点转换为图片再替换掉foreignObject节点，这种方式可以工作，但是非常耗时，因为html2canvas转换一次的时间很长，导致转换一个节点都需要耗时差不多2秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。

v0.5.7+的版本直接使用html2canvas转换整个svg，速度不再是问题，但是目前存在一个bug，就是节点的颜色导出后不生效。

v0.6.13+版本使用dom-to-image-more替换了html2canvas，解决了节点的颜色导出后不生效的问题。

dom-to-image-more兼容性比较差，在很多浏览器上导出图片都是空的，所以可以根据你自己的需求替换成html2canvas。

从0.6.16+版本后不再使用dom-to-image-more、html2canvas之类的第三方库实现导出，兼容性及导出都不再有问题。

配置请参考实例化选项。

注册

import MindMap from 'simple-mind-map'
import RichText from 'simple-mind-map/src/plugins/RichText.js'
// import RichText from 'simple-mind-map/src/RichText.js' v0.6.0以下版本使用该路径

MindMap.usePlugin(RichText, opt?)

注册完且实例化MindMap后可通过mindMap.richText获取到该实例。

注册选项

opt选项可以传递以下参数：

opt.fontFamilyList

替换富文本编辑时内置字体列表。内置的列表为：

[
  '宋体, SimSun, Songti SC',
  '微软雅黑, Microsoft YaHei',
  '楷体, 楷体_GB2312, SimKai, STKaiti',
  '黑体, SimHei, Heiti SC',
  '隶书, SimLi',
  'andale mono',
  'arial, helvetica, sans-serif',
  'arial black, avant garde',
  'comic sans ms',
  'impact, chicago',
  'times new roman',
  'sans-serif',
  'serif'
]

opt.fontSizeList

替换富文本编辑时内置字号列表。内置的列表为：

[1, 2, 3, ...100]

方法

extendFont(list = [], cover = false)

v0.8.6+

list：要扩展的字体名称列表；
cover：是否覆盖当前的字体列表，默认为false，即在当前字体列表后增加；

动态扩展支持的字体。

setNotActiveNodeStyle(node, style)

v0.8.0+

style：Object，样式对象。

给未激活的节点设置富文本样式。

selectAll()

选中全部。当节点正在编辑中可以通过该方法选中节点内的所有文本。

focus()

v0.4.7+

聚焦。

formatText(config = {}, clear = false, pure = false)

config：对象，键为样式属性，值为样式值，完整的配置如下：

{
    font: '字体',
    size: '12px,' // 字号
    bold: true, // 是否加粗，true/false 
    italic: true, // 是否斜体，true/false 
    underline: true, // 是否显示下划线，true/false 
    strike: true, // 是否显示删除线，true/false 
    color: '#333' // 颜色
}

clear：是否是清除样式
pure：v0.9.4+，如果设为true，那么仅会格式化文本样式，不会同步到节点的数据中

格式化当前选中的文本。会将样式设置同步到节点的数据中。

formatRangeText(range, config = {})

range：Quill的范围对象，格式如下：

{
    index,
    length
}

config：同formatText方法

格式化指定范围的文本。

formatAllText(config = {})

config：同formatText方法

格式化当前编辑节点的所有文本。

removeFormat()

v0.4.1+

清除当前选中文本的样式。

normalStyleToRichTextStyle(style)

将普通节点样式对象转换成富文本样式对象。因为非富文本编辑时的节点样式属性和富文本样式属性是存在差异的，所以需要一个转换操作。比如：

{
    fontFamily: 'xxx'
}

// 转换后

{
    font: 'xxx'
}

richTextStyleToNormalStyle(config)

将富文本样式对象转换成普通节点样式对象。比如：

{
    size: '16px'
}

// 转换后

{
    fontSize: 16
}

handleSvgDomElements(svg)

svg： svg节点

将svg中嵌入的dom元素转换成图片，返回一个Promise。

transformAllNodesToNormalNode()

将所有节点转换成非富文本节点。

RichText插件 ​

注册 ​

注册选项 ​

方法 ​

extendFont(list = [], cover = false) ​

setNotActiveNodeStyle(node, style) ​

selectAll() ​

focus() ​

formatText(config = {}, clear = false, pure = false) ​

formatRangeText(range, config = {}) ​

formatAllText(config = {}) ​

removeFormat() ​

normalStyleToRichTextStyle(style) ​

richTextStyleToNormalStyle(config) ​

handleSvgDomElements(svg) ​

transformAllNodesToNormalNode() ​