@datlt/mm-editor
v1.0.0
Published
- Module: ES6 - Language: typescript 3.3 - Main dependence: "ace-builds": "^1.4.2"
Downloads
2
Readme
m2Editor module
Info:
- Module: ES6
- Language: typescript 3.3
- Main dependence: "ace-builds": "^1.4.2"
How to use
In your html file:
<div id="text-editor"></div> <script src="ace-builds/src-noconflict/ace.js"></script> <script src="ace-builds/src-noconflict/ext-language_tools.js"></script>
In your code:
Create an Editor:
import * as M2E from '../../editor/index'; let editor = M2E.M2Editor.edit("text-editor", "editor-id");
Set some options:
// set default options editor.setOptionDefault(); // Or set custom options editor.setOptions({ fontSize: "11pt", displayIndentGuides: true, enableLiveAutoCompletion: false, value: "", theme: "./theme/clouds", useWorker: false, useSoftTabs: false });
Set default theme/ custom theme:
// Load default themes of ACE lib editor.setTheme("ace/theme/clouds_midnight"); // Load custom theme // For example at ./src/themes/textize_mind_map.ts // with theme name 'textize_mind_map' is the file name M2E.Theme.load("textize_mind_map", (themeId: string) => { editor.setTheme(themeId); })
Binding data:
let dataObj = [] editor.bind(dataObj);
Note:
dataObj
variable can be retrieved from mindmap-drawer moduleNote:
editor.getEditorCore()
get a refer to an instance of AceAjax.Editor (API at ace.c9.io)Active events:
// listen the event for editor editor.onNodeClick(function (node, lineIndex) { // TODO }); editor.onStructureChanged(function (nodes) { // TODO map.update(); }); editor.onTextChanged(function (node) { // TODO map.updateText(node as any); map.clearAndSelectNodes([node as any], false); }); editor.onNodeSelectionChanged(function (nodes) { // TODO map.clearAndSelectNodes(nodes as any, false); });
Note:
editor
created from editor module