當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

wangEditor富文本编辑器的简单使用

發布時間：2023/12/10 编程问答 64 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><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><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 初始化內容（盡量使用這種方式）
直接將內容寫到要創建編輯器的

標簽中。

<div id="div1"><p>初始化的內容</p><p>初始化的內容</p> </div> <script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create() </script>

js 設置內容
創建編輯器之后，使用 editor.txt.html(…) 設置編輯器內容。

<div id="div1"> </div> <script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create()editor.txt.html('<p>用 JS 設置的內容</p>') // 重新設置編輯器內容 </script>

追加新內容

創建編輯器之后，可使用 editor.txt.append('<p>追加的內容</p>') 繼續追加內容。

獲取 html

使用 editor.txt.html() 獲取 html 。

需要注意的是：從編輯器中獲取的 html 代碼是不包含任何樣式的純 html。

獲取 text

使用 editor.txt.text() 獲取 text 文本。

清空內容

可使用 editor.txt.clear() 清空編輯器內容。

總結

以上是生活随笔為你收集整理的wangEditor富文本编辑器的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java学习（152）：字节缓冲输出流
下一篇：进程间通信IPC（二）（共享内存、信号、