wangEditor富文本编辑器使用、编辑器内容转json格式
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地址","……"]
}
具体请参考刚放文档,不具体细说了!!!!哈哈哈哈
wangEditor富文本编辑器使用、编辑器内容转json格式相关推荐
- css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案 从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...
- wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
- 更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
- 集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
- 「newbee-mall新蜂商城开源啦」 页面优化,最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
- wangEditor 富文本编辑器使用
wangEditor 富文本编辑器使用 框架: react hooks 链接: 官方文档参考 富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...
- react html编辑器,wangEditor富文本编辑器+react+antd的使用
搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示 编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...
- wangeditor富文本编辑器上传图片以及跨域问题解决
一.简介 wangeditor富文本编辑器是由js和css开发的富文本编辑器,轻量.简洁.高效 详细信息可以查看官网:http://www.wangeditor.com/ 二.上传图片 本章内容主要讲 ...
- 【wangEditor富文本编辑器】富文本三种使用方法,html使用富文本,html套vue脚手架使用富文本,vue使用富文本【简单易用,复制即用】
前言 富文本编辑器功能是很多人都要使用的 市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
最新文章
- snmp Oid整理与运用
- Nginx10m+高并发内核优化详解
- win7中安装mysql_windows7下安装Mysql5.6数据库图文教程(压缩包安装)
- SharePoint中的权限体系
- spring-security-学习笔记-03-spring-security快速上手
- spring整合hibernate出现NoClassDefFoundError: org/apache/commons/collections/map/LRUMap
- redis---安全设置
- 多样化实现Windows Phone 7本地数据库访问1
- 数学建模之概率模型详解
- 光立方体c语言程序,444光立方程序C语言源代码 - 444光立方程序怎么写 光立方原理图、源代码及制作教程...
- wps word转pdf后出现空白页的删除方式
- cookie 存放位置
- 魔金(7)——金字塔
- 易语言调用c 自定义数据类型,用__stdcall实现易语言调用C/C++的dll
- Python自动翻译英语论文PDF(三十九)
- Linux - samba实现Linux与windows文件共享——共享文件夹目标文件访问权限被拒绝解决方案(超详细,看不懂你怪我)
- 如何管理和使用哪些命令操作MySQL数据库?(基本操作,SQL语言,DDL,DML,DQL,DCL,Windows字符和图形界面MySQL安装)
- QVGA/HVGA/WVGA/FWVGA分辨率屏含义及大小
- 机器学习入门-kNN算法实现手写数字识别
- 大OA核心——工作流系统(引擎)
热门文章
- 那些年啊,那些事——一个程序员的奋斗史 ——23
- CSS 实现内阴影的方法
- 高校教师工资管理系统java_基于jsp+Spring+mybatis的SSM简单院校教师工资管理系统...
- 春节访友,疫情之下如何做好个人防护?
- 基于matlab数字基带传输系统,通信原理基于MATLAB Simulink 基带传输系统仿真实现...
- 【2023校招刷题】第二期:数字IC笔试模拟题(3)详细解析版
- 考研日语线上笔记(二):惯用句型250条
- 证明实力的时候到了,国际黄金多头爆发大涨逾20美元
- 长达5年整理的建模资源到底有多厉害!看过都收藏
- [转]如何与老板谈加薪