1. 官网网址
官网:https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic
git: https://github.com/nhn/tui.editor/releases
2. vue中使用cnpm下载及引用
npm install --save @toast-ui/editor
2.1 页面引用
2.1.1 首先,您需要添加将在其中创建TOAST UI Editor(以下称为“ Editor”)的容器元素。
<body>
<div id="editorChange"></div>
</body>
2.1.2 dom的使用
<script>
import 'codemirror/lib/codemirror.css'; // Editor's Dependency Style
import '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Style
import Editor from '@toast-ui/editor';
</script>
mounted () {
const editor = new Editor({
el: document.querySelector('#editorChange'), //定义的编辑器id
previewStyle: 'vertical', // Markdown模式的预览样式
initialEditType: 'markdown', //显示的初始类型
height: '500px', //编辑器高度
initialValue: 'The first and last buttons are customized.', //编辑器内容
//编辑器菜单栏
toolbarItems: [
'heading',
'bold',
'italic',
'strike',
'divider',
'hr',
'quote',
'divider',
'ul',
'ol',
'task',
'indent',
'outdent',
'divider',
'table',
'image',
'link',
'divider',
'code',
'codeblock',
'divider',
]
});
//创建编辑器
editor.getHtml()
}