tui.editor所见即所得编辑器的使用

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”）的容器元素。

2.1.2 dom的使用

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()
}

3.效果图