目錄
-
-
- 下載下傳引入
- 基本使用
- 說明
-
wangEditor是一個輕量級的富文本編輯器，相比KindEditor十分簡潔，但偏pc端 ，不支援移動端和 ipad。
官網位址：http://www.wangeditor.com/
下載下傳引入
方式一 使用cdn
方式二 自己下載下傳編譯
在官網下載下傳壓縮包，編譯後引入dist下的wangEditor.min.js
npm install
npm run build
方式三 npm引入
需要以npm方式建立項目
npm i wangeditor --save
基本使用
<div id="editor">
<!-- 預設内容，可以是富文本 -->
<p>請輸入内容...</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js"></script>
<script type="text/javascript">
const E = window.wangEditor;
const editor = new E("#editor");
editor.create();
</script>
說明
1、v4版本的使用和v3略有不同，使用時要注意引入的是v3還是v4版本。
參考：v3版本的使用
2、有時候編輯的内容是在移動端展示的，比如顯示在小程式中的頁面上。移動端預覽思路
- 營運在pc端編輯内容
- 點選“移動端預覽”按鈕時，前端擷取編輯框的帶有html标簽的文檔内容傳給後端
- 後端用StringBuilder拼接html文檔的<head>、<meta>之類的固定标簽，在臨時目錄下建立一個html檔案，将StringBuilder轉換為String寫入html檔案中，傳回給前端html檔案路徑
- 前端拼接域名、後端傳回的html檔案路徑，生成二維碼顯示在頁面上
- 營運手機掃描二維碼，轉到html頁面
![notepad++ 多行複制拼接[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)