tui.editor所见即所得编辑器的使用
生活随笔
收集整理的這篇文章主要介紹了
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/editor2.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.效果圖
總結
以上是生活随笔為你收集整理的tui.editor所见即所得编辑器的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据结构——二叉搜索树
- 下一篇： ASP.Net0626快播影院视频网的设