wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app、小程序使用
wangEditor官网
wangEditor官方文档
wangEditor官方下载
下载好之后找到wangEditor.js文件。然后引入进去。以下是我使用的一些功能
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>wangEditor demo</title></head><body><button id="btn1">BOTTON</button><div id="editor"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p></div><!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!--><script type="text/javascript" src="/wangEditor.min.js"></script><script type="text/javascript">var E = window.wangEditorvar editor = new E('#editor')// 或者 var editor = new E( document.getElementById('editor') )// 自定义菜单配置editor.customConfig.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'list', // 列表'justify', // 对齐方式'quote', // 引用'image', // 插入图片'undo', // 撤销'redo' // 重复];//上传图片接口editor.customConfig.uploadImgServer = '/api/upload/upload_images_desc.html';editor.create();editor.txt.html('<p>用 JS 设置的内容</p>');//点击按钮获取对应内容document.getElementById('btn1').addEventListener('click', function () {var json = editor.txt.getJSON() // 获取 JSON 格式的内容var jsonStr = JSON.stringify(json)console.log(json)console.log(jsonStr)console.log(editor.txt.html()) //获取内容})</script></body></html>
上传图片接口的返回值格式
{// errno 即错误代码,0 表示没有错误。// 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理"errno": 0,// data 是一个数组,返回若干图片的线上地址"data": ["图片1地址","图片2地址","……"]}
具体请参考刚放文档,不具体细说了!!!!哈哈哈哈