第一步： 下载源码
-
新建一个干净的文件夹 比如：tuiEditor
-
npm安装源码（不要用文件下载，里边缺少文件）
- 控制台进入tuiEditor文件夹
- 输入安装命令 npm init & npm install --save tui-editor
- 创建lib 文件夹，并复制node_modules文件夹内容到lib
- lib里plantuml-encoder依赖缺少文件需要重新去github 下载，然后复制dist文件夹到lib下的plantuml-encoder文件夹下
第二步： 编写demo代码
- tuiEditor文件夹下创建index.html文件
- 复制demo代码到index.html 文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>0. DEMO</title>
<script src="../lib/jquery/dist/jquery.js"></script>
<script src="../lib/markdown-it/dist/markdown-it.js"></script>
<script src="../lib/to-mark/dist/to-mark.js"></script>
<script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
<script src="../lib/tui-color-picker/dist/tui-color-picker.js"></script>
<script src="../lib/codemirror/lib/codemirror.js"></script>
<script src="../lib/highlightjs/highlight.pack.js"></script>
<script src="../lib/squire-rte/build/squire-raw.js"></script>
<link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
</head>
<body>
<div class="explain">
All evetensions are enabled
</div>
<div class="code-html">
<script src="../lib/plantuml-encoder/dist/plantuml-encoder.js"></script>
<script src="../lib/raphael/raphael.js"></script>
<script src="../lib/tui-chart/dist/tui-chart.js"></script>
<script src="../dist/tui-editor-Editor-all.js"></script>
<link rel="stylesheet" href="../dist/tui-editor.css">
<link rel="stylesheet" href="../dist/tui-editor-contents.css">
<link rel="stylesheet" href="../lib/tui-color-picker/dist/tui-color-picker.css">
<link rel="stylesheet" href="../lib/tui-chart/dist/tui-chart.css">
<div id="editSection"></div>
<script class="code-js">
var content = [
'| @cols=2:merged |',
'| --- | --- |',
'| table | table |',
'```uml',
'partition Conductor {',
' (*) --> "Climbs on Platform"',
' --> === S1 ===',
' --> Bows',
'}',
'',
'partition Audience #LightSkyBlue {',
' === S1 === --> Applauds',
'}',
'',
'partition Conductor {',
' Bows --> === S2 ===',
' --> WavesArmes',
' Applauds --> === S2 ===',
'}',
'',
'partition Orchestra #CCCCEE {',
' WavesArmes --> Introduction',
' --> "Play music"',
'}',
'```',
'```chart',
',category1,category2',
'Jan,21,23',
'Feb,31,17',
'',
'type: column',
'title: Monthly Revenue',
'x.title: Amount',
'y.title: Month',
'y.min: 1',
'y.max: 40',
'y.suffix: $'
].join('\n');
var editor = new tui.Editor({
el: document.querySelector('#editSection'),
previewStyle: 'vertical',
height: '400px',
initialEditType: 'markdown',
useCommandShortcut: true,
initialValue: content,
exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table', 'taskCounter']
});
</script>
</body>
</html>
复制代码第三步： 修改demo代码，解决报错
-
修改html代码文件路径
- 所有“../lib”改为“./lib”
- 所有“../dist”改为“./lib/tui-editor”
- 修改“highlight.pack.js”为“lib/highlight.js”
-
浏览器打开index.html,解决报错 浏览器打开后会报这个错误
tui-editor-Editor.js:21518 Uncaught TypeError: Cannot read property 'scrollIntoView' of undefined
at PopupCodeBlockLanguages._activateButtonByIndex (tui-editor-Editor.js:21518)
at PopupCodeBlockLanguages._initDOM (tui-editor-Editor.js:21434)
at PopupCodeBlockLanguages.LayerPopup (tui-editor-Editor.js:1039)
at new PopupCodeBlockLanguages (tui-editor-Editor.js:21392)
at DefaultUI._initPopupCodeBlockLanguages (tui-editor-Editor.js:18168)
at DefaultUI._init (tui-editor-Editor.js:18038)
at new DefaultUI (tui-editor-Editor.js:17968)
at new ToastUIEditor (tui-editor-Editor.js:9552)
at (index):45
复制代码在初始化对象中，指定代码块语言，就能解决报错。 修改初始化语句如下
var editor = new tui.Editor({
el: document.querySelector('#editSection'),
initialEditType: 'markdown',
previewStyle: 'vertical',
height: '300px',
// 加上这个就能解决报错问题
codeBlockLanguages: ['ruby', 'PHP', 'javascript'],
});
复制代码第四步： 发布测试
- 保存代码，刷新浏览器，完事大吉