mind-map/web/src/pages/Doc/en/richText/index.md

RichText plugin

v0.4.0+

Note: This is a testing nature and imperfect function

This plugin provides the ability to edit rich text of nodes, and takes effect after registration.

By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, color, and backgroundColor. Underline and line height are not supported.

The principle of this plugin is to use Quill editor implements rich text editing, and then uses the edited DOM node directly as the text data of the node, and embeds the DOM node through the svg foreignObject tag during rendering.

This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting svg as an image is very simple, Get the svg string, and then create the blob data of the type=image/svg+xml type. Then use the URL.createObjectURL method to generate the data:url data. Then create a Image tag, use the data:url as the src of the image, and finally draw the image on the canvas object for export, However, after testing, when the DOM node is embedded in the svg, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the foreignObject node in svg, using html2canvas Convert the DOM node in the foreignObject node into an image and then replace the foreignObject node. This method can work, but it is very time-consuming. Because the html2canvas conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.

If you have a better way, please leave a message.

Register

import MindMap from 'simple-mind-map'
import RichText from 'simple-mind-map/src/RichText.js'

MindMap.usePlugin(RichText, opt?)

After registration and instantiation of MindMap, the instance can be obtained through mindMap.richText.

Register options

The opt option can pass the following parameters:

• opt.fontFamilyList

Replace the built-in font list during rich text editing. The built-in list is:

[
  '宋体, 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

Replace the built-in font size list during rich text editing. The built-in list is:

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

Method

selectAll()

Select All. When the node is being edited, you can select all the text in the node through this method.

formatText(config = {})

• config：Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:

{
    font: '字体',
    size: '12px,' // font size
    bold: true, // Bold or not, true/false 
    italic: true, // Italic or not, true/false 
    underline: true, // Show underline or not, true/false 
    strike: true, // Whether to display strikethrough, true/false 
    color: '#333' // color
}

Formats the currently selected text.

formatRangeText(range, config = {})

• range：The range object of Quill, has the following format:

{
    index,
    length
}

• config：Same as formatText method

Formats the text of the specified range.

formatAllText(config = {})

• config：Same as formatText method

Formats all text of the current edit node.

removeFormat()

v0.4.1+

Clears the style of the currently selected text.

normalStyleToRichTextStyle(style)

Converts a normal node style object to a rich text style object. Because there are differences between node style attributes and rich text style attributes during non-rich text editing, a conversion operation is required. For example:

{
    fontFamily: 'xxx'
}

// After conversion

{
    font: 'xxx'
}

richTextStyleToNormalStyle(config)

Converts rich text style objects to normal node style objects. For example:

{
    size: '16px'
}

// After conversion

{
    fontSize: 16
}

handleSvgDomElements(svg)

• svg: svg node

Convert the dom element embedded in the svg into a picture and return a Promise.

transformAllNodesToNormalNode()

Convert all nodes to non-rich text nodes.