200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > tui.editor所见即所得编辑器的使用

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

时间:2020-04-06 14:15:13

相关推荐

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

1. 官网网址

官网:https://nhn.github.io/tui.editor/latest/tutorial-example01-editor-basic

git: /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 Styleimport '@toast-ui/editor/dist/toastui-editor.css'; // Editor's Styleimport Editor from '@toast-ui/editor';</script>

mounted () {const editor = new Editor({el: document.querySelector('#editorChange'), //定义的编辑器idpreviewStyle: '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.效果图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。