PC/移动端的富文本编辑器wangEditor的使用

发布网友发布时间：2022-09-12 06:08

共1个回答

热心网友时间：2023-09-23 04:34

在刚开发的项目之中，在移动端/PC端，需要一个富文本编辑器，要求：简单-轻量-实用。比较了几种编辑器后，选择了wangEditor。
移动端的截图（手机效果好些）：

PC端的截图：

在wangEditor的官网（ http://www.wangeditor.com/ ）中，提供了一些常用的工具，可以按需来配置，还可以自己二次封装：

先说配置：在PC端直接引入 wangEditor.js来创建，在移动端用的vue.js模块开发，所以用的： npm install wangeditor 来安装。

移动端：
1 . import wangeditor from 'wangeditor' 来引入

2 . this.editor = new wangeditor ('#div1')

4 .配置需要的选项，具体的到官网查看

5.常用的配置：

6 . this.editor.create(); //创建编辑器，到这里创建就完成了。

7 . 但是你去发现在移动端，会不怎么适配，这时候就需要用 rem 来做适配。

如果：想要自己改变样式，那么直接在 node_moudles/wangwditor 下找到 wangEditor.js ，来自行修改。

PC端：在确保引入wangEditor.js之后，在之后的js中，写入：