富文本编辑器wangEditor

向右看齐 2022-12-11 06:25 757阅读 0赞

### 目录 ###

*   *   *  下载引入
         *  基本使用
         *  说明

wangEditor是一个轻量级的富文本编辑器，相比KindEditor十分简洁，但偏pc端 ，不支持移动端和 ipad。

官网地址：[http://www.wangeditor.com/][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版本的使用][v3]

2、有时候编辑的内容是在移动端展示的，比如显示在小程序中的页面上。移动端预览思路

*  运营在pc端编辑内容
 *  点击“移动端预览”按钮时，前端获取编辑框的带有html标签的文档内容传给后端
 *  后端用StringBuilder拼接html文档的<head>、<meta>之类的固定标签，在临时目录下创建一个html文件，将StringBuilder转换为String写入html文件中，返回给前端html文件路径
 *  前端拼接域名、后端返回的html文件路径，生成二维码显示在页面上
 *  运营手机扫描二维码，转到html页面

[http_www.wangeditor.com]: http://www.wangeditor.com/
[v3]: http://www.wangeditor.com/doc/pages/01-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8/99-%E4%BD%BF%E7%94%A8V3%E7%89%88%E6%9C%AC.html