wangEditor富文本编辑器的简单使用
介紹
wangEditor是一個輕量級 web 富文本編輯器，配置方便，使用簡單。
官網：www.wangEditor.com
文檔：www.wangeditor.com/doc
源碼：github.com/wangeditor-team/wangEditor
用于 Vue 和 React
在 Vue 中使用 wangEditor
vue3 可參考 wangEditor-with-vue3
vue2 可參考 wangEdior-with-vue 。
在 React 中使用 wangEditor
如果要自己動手開發，可參考 wangEditor-with-react 。
如果想要用現成的插件，可參考 wangeditor-for-react 。
下載
下載
npm 安裝 npm i wangeditor --save
CDN 鏈接 https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js
基本使用
NPM
npm i wangeditor --save
安裝后幾行代碼即可創建一個編輯器：
import E from "wangeditor" const editor = new E("#div1") editor.create()常用的設置
設置編輯區域的高度
編輯區域高度默認為 300px ，可通過以下方式修改。
const editor = new E('#div1')// 設置編輯區域高度為 500px editor.config.height = 500// 注意，先配置 height ，再執行 create() editor.create()菜單和編輯區域分離
菜單和編輯區域其實就是兩個單獨的
，位置、尺寸都可以隨便定義。 <head><style>.toolbar {border: 1px solid #ccc;}.text {border: 1px solid #ccc;min-height: 400px;}</style> </head> <body><p>container 和 toolbar 分開</p><div><div id="toolbar-container" class="toolbar"></div><p>------ 我是分割線 ------</p><div id="text-container" class="text"></div></div><!-- 引入 wangEditor.min.js --><script>const E = window.wangEditorconst editor = new E('#toolbar-container', '#text-container') // 傳入兩個元素editor.create()</script> </body>一個頁面多個編輯器
在頁面只使用一個編輯器時可以使用ref獲取頁面元素，頁面有兩個編輯器的時候用id獲取頁面元素。
<head><style type="text/css">.toolbar {background-color: #f1f1f1;border: 1px solid #ccc;}.text {border: 1px solid #ccc;height: 200px;}</style> </head> <body><div id="div1" class="toolbar"></div><div style="padding: 5px 0; color: #ccc">中間隔離帶</div><div id="div2" class="text"><p>第一個 demo（菜單和編輯器區域分開）</p></div><div id="div3"><p>第二個 demo（常規）</p></div><!-- 引入 wangEditor.min.js --><script type="text/javascript">const E = window.wangEditorconst editor1 = new E('#div1', '#div2')editor1.create()const editor2 = new E('#div3')editor2.create()</script> </body>如果在控制臺報錯“找不到節點”，要注意是不是使用了v-if將頁面元素隱藏了導致獲取不到DOM節點。兩個編輯器要注意命名沖突和使用位置。
設置內容
html 初始化內容（盡量使用這種方式）
直接將內容寫到要創建編輯器的
js 設置內容
創建編輯器之后，使用 editor.txt.html(…) 設置編輯器內容。
追加新內容
創建編輯器之后，可使用 editor.txt.append('<p>追加的內容</p>') 繼續追加內容。
獲取 html
使用 editor.txt.html() 獲取 html 。
需要注意的是：從編輯器中獲取的 html 代碼是不包含任何樣式的純 html。
獲取 text
使用 editor.txt.text() 獲取 text 文本。
清空內容
可使用 editor.txt.clear() 清空編輯器內容。
總結
以上是生活随笔為你收集整理的wangEditor富文本编辑器的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java学习（152）：字节缓冲输出流
- 下一篇： 进程间通信IPC（二）（共享内存、信号、