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

最新推荐文章于 2025-04-30 15:58:09 发布

码代码的阿宅

最新推荐文章于 2025-04-30 15:58:09 发布

阅读量2.5k

点赞数

文章标签： vue markdown

本文链接：https://blog.youkuaiyun.com/qq_38394175/article/details/109023355

版权

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