富文本编辑器wangEditor
目录
- 下载引入
- 基本使用
- 说明
wangEditor是一个轻量级的富文本编辑器，相比KindEditor十分简洁，但偏pc端 ，不支持移动端和 ipad。
官网地址：http://www.wangeditor.com/
下载引入
方式一 使用cdn
<script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.js"></script>
方式二 自己下载编译
在官网下载压缩包，编译后引入dist下的wangEditor.min.js
npm installnpm 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文档的、之类的固定标签，在临时目录下创建一个html文件，将StringBuilder转换为String写入html文件中，返回给前端html文件路径
- 前端拼接域名、后端返回的html文件路径，生成二维码显示在页面上
- 运营手机扫描二维码，转到html页面
野性酷女
青旅半醒
柔情只为你懂
向右看齐
不念不忘少年蓝@
还没有评论，来说两句吧...