基本使用

NPM

npm i wangeditor --save

安裝後幾行代碼即可創建一個編輯器：

<div id="div1">
    <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>

import E from "wangeditor"
const editor = new E("#div1")
editor.create()

CDN

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script type="text/javascript">
  const E = window.wangEditor
  const editor = new E("#div1")
  // 或者 const editor = new E(document.getElementById('div1'))
  editor.create()
</script>

設置編輯區域的高度

編輯區域高度默認為 300px ，可通過以下方式修改。

const editor = new E('#div1')

// 設置編輯區域高度為 500px
editor.config.height = 500

// 注意，先配置 height ，再執行 create()
editor.create()

菜單和編輯區域分離

如果你想要像知乎專欄、簡書、石墨、網易雲筆記這些編輯頁面一樣，將編輯區域和菜單分離，也可以實現。

這樣，菜單和編輯器區域就是使用者可自己控制的元素，可自定義樣式。例如：將菜單fixed、編輯器區域高度自動增加等。

<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.wangEditor
        const editor = new E('#toolbar-container', '#text-container') // 傳入兩個元素
        editor.create()
    </script>
</body>

從上面代碼可以看出，菜單和編輯區域其實就是兩個單獨的 <div>，位置、尺寸都可以隨便定義。

使用 textarea

wangEditor 從 v3 版本開始不支持 textarea ，但是可以通過 onchange 來實現 textarea 中提交富文本內容。

<div id="div1">
    <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>
<textarea id="text1" style="width:100%; height:200px;"></textarea>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    const $text1 = $('#text1')
    editor.config.onchange = function (html) {
        // 第二步，監控變化，同步更新到 textarea
        $text1.val(html)
    }
    editor.create()

    // 第一步，初始化 textarea 的值
    $text1.val(editor.txt.html())
</script>

一個頁面多個編輯器

wangEditor 支持一個頁面創建多個編輯器。

<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.wangEditor

        const editor1 = new E('#div1', '#div2')
        editor1.create()

        const editor2 = new E('#div3')
        editor2.create()
    </script>
</body>

設置內容

以下方式中，如果條件允許，盡量使用第一種方式，效率最高。

html 初始化內容

直接將內容寫到要創建編輯器的 <div> 標籤中。

<div id="div1">
    <p>初始化的內容</p>
    <p>初始化的內容</p>
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
</script>

js 設置內容

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

<div id="div1">
</div>

<!-- 引入 wangEditor.min.js -->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#div1')
    editor.create()
    editor.txt.html('<p>用 JS 設置的內容</p>') // 重新設置編輯器內容
</script>

獲取 html

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

需要注意的是：從編輯器中獲取的 html 代碼是不包含任何樣式的純 html，如果顯示的時候需要對其中的 <table> <code> <blockquote> 等標籤進行自定義樣式（這樣既可實現多皮膚功能），下面提供了編輯器中使用的樣式供參考。

/* table 樣式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 樣式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 樣式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* ul ol 樣式 */
ul, ol {
  margin: 10px 0 10px 20px;
}

覺得效果不錯的請幫忙加個關注點個贊，每天分享前端實用開發技巧

原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/275098.html