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.
The following prompts exist in versions prior to v0.5.6:
This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting
svgas an image is very simple, Get thesvgstring, and then create theblobdata of thetype=image/svg+xmltype. Then use theURL.createObjectURLmethod to generate thedata:urldata. Then create aImagetag, use thedata:urlas thesrcof the image, and finally draw the image on thecanvasobject for export, However, after testing, when theDOMnode is embedded in thesvg, 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 theforeignObjectnode insvg, using html2canvas Convert theDOMnode in theforeignObjectnode into an image and then replace theforeignObjectnode. This method can work, but it is very time-consuming. Because thehtml2canvasconversion 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.
The version of v0.5.7+ directly uses html2canvas to convert the entire svg, which is no longer an issue with speed. However, there is currently a bug where the color of the node does not take effect after export.
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' Use this path for versions below v0.6.0
MindMap.usePlugin(RichText, opt?)
After registration and instantiation of MindMap, the instance can be obtained through mindMap.richText.
The opt option can pass the following parameters:
opt.fontFamilyListReplace 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.fontSizeListReplace the built-in font size list during rich text editing. The built-in list is:
[1, 2, 3, ...100]
Select All. When the node is being edited, you can select all the text in the node through this method.
v0.4.7+
Focus.
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.
range：The range object of Quill, has the following format:{
index,
length
}
config：Same as formatText methodFormats the text of the specified range.
config：Same as formatText methodFormats all text of the current edit node.
v0.4.1+
Clears the style of the currently selected text.
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'
}
Converts rich text style objects to normal node style objects. For example:
{
size: '16px'
}
// After conversion
{
fontSize: 16
}
svg: svg nodeConvert the dom element embedded in the svg into a picture and return a Promise.
Convert all nodes to non-rich text nodes.