java富文本编辑器wangEditor-3.1.1的使用流程

wangEditor-3.1.1官方: http://www.wangeditor.com/
使用文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
特别简单：只需要引入js就可以了(wangEditor.min.js)官网有
这个是界面，一般功能是够用了
上传图片的返回连接：https://blog.csdn.net/qq_35349982/article/details/103288618

前台Html

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>上传页面</title><link href="${base}/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="${base}/css/style.css" rel="stylesheet" type="text/css">
</head>
<body><div id="div1" class="toolbar"></div><div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度--><p></p></div><button id="btn1">获取html</button><button id="btn2">获取text</button><script src="${base}/js/jquery-3.3.1.min.js"></script>
<script src="${base}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${base}/js/wangEditor.min.js"></script>
<script type="text/javascript">var E = window.wangEditorvar editor1 = new E('#div1', '#div2')  // 两个参数也可以传入 elem 对象，class 选择器// 将图片大小限制为 2Meditor1.customConfig.uploadImgMaxSize = 2 * 1024 * 1024// 限制一次最多上传 3 张图片editor1.customConfig.uploadImgMaxLength = 1// 将 timeout 时间改为 3seditor1.customConfig.uploadImgTimeout = 3000editor1.customConfig.uploadFileName = 'file'; //设置文件上传的参数名称// 配置服务器端地址editor1.customConfig.uploadImgServer = '/uploadImg'editor1.customConfig.uploadImgHooks = {before: function (xhr, editor, files) {// 图片上传之前触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件console.log(xhr)console.log(editor)console.log(files)//如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传// return {//     prevent: true,//     msg: '放弃上传'// }},success: function (xhr, editor, result) {// 图片上传并返回结果，图片插入成功之后触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果// var url = result.url// insert(imgUrl)},fail: function (xhr, editor, result) {// 图片上传并返回结果，但图片插入错误时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果},error: function (xhr, editor) {// 图片上传出错时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象},timeout: function (xhr, editor) {// 图片上传超时时触发// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象},// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）customInsert: function (insertImg, result, editor) {// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：var url = result.data[0]insertImg(url)// result 必须是一个 JSON 格式字符串！！！否则报错}}// // 自定义菜单配置// editor1.customConfig.menus = [//     'head',  // 标题//     'bold',  // 粗体//     'fontSize',  // 字号//     'fontName',  // 字体//     'strikeThrough',  // 删除线//     'foreColor',  // 文字颜色//     'backColor',  // 背景颜色//     'link',  // 插入链接//     'list',  // 列表//     'justify',  // 对齐方式//     'emoticon',  // 表情//     'image',  // 插入图片//     'table',  // 表格//     'video',  // 插入视频// ],editor1.create()document.getElementById('btn1').addEventListener('click', function () {// 读取 htmlalert(editor1.txt.html())}, false)document.getElementById('btn2').addEventListener('click', function () {// 读取 textalert(editor1.txt.text())}, false)</script>
</body>
</html>

java富文本编辑器wangEditor-3.1.1的使用流程相关推荐

django快速集成富文本编辑器wangeditor
django快速集成富文本编辑器wangeditor django是python栈一款优秀的web开发框架,也是python栈web开发框架中使用占比最高的开发框架,至于其是否足够优秀不言自明,自带的 ...
css wangeditor 修改_HTML富文本编辑器wangEditor的使用
var E = window.wangEditor; var editor = new E('#editor') //配置信息 var config = editor.customConfig; // ...
特别好用的前端html富文本编辑器wangEditor个人使用案例
当前为jQuery版本demo,详细Vue组件版本请点此链接:特别好用的Vue富文本编辑器wangEditor自己使用案例组件,附源码,直接使用_膨胀的菜盒的博客-CSDN博客因公司项目后台管理平台 ...
富文本编辑器 wangeditor 的使用
富文本编辑器 wangeditor 的使用为什么选择使用 wangeditor a. 轻量.简洁.界面美观.文档齐全.易用.开源免费.开源团队维护.有专业Q群答疑.持续更新.无需使用其他库.插件功能 ...
富文本编辑器wangEditor的使用（即学即用）
介绍 wangEditor 是一款基于JavaScript和CSS开发的Web富文本编辑器,其具有轻量级.简洁.易用的特点.当然,市面上有许多别的富文本编辑器,各有特点,本文专注于介绍wangEdit ...
HTML——实现富文本编辑器wangEditor的使用
HTML--实现富文本编辑器wangEditor的使用文章目录 HTML--实现富文本编辑器wangEditor的使用一.导入wangEditor.JS 二.直接引用文档链接三.包管理工具(no ...
java 富文本编辑器的标签处理数据从数据库中取出并返回前台
总结: 1.使用 HtmlUtils.htmlEscape ()方法对字符串中的标签转义 2.使用 removeHtmlTag() 得数据具体步骤如下: 我的数据库的存储格式被转义过了,这个因人而 ...
富文本_轻量级 web 富文本编辑器 —— wangEditor
介绍 wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wan ...
html——简单文章发布html页面及富文本编辑器wangEditor的使用
实现结果截图: 说明: 1.主要组件使用了bootstrap4,富文本编辑器使用wangEditor,在使用前需要下载wangEditor的js文件,地址参考 wangEditor3使用手册 2.所用 ...
富文本编辑器 wangeditor、Dialog中使用wangeditor、多次生成wangeditor实例
富文本编辑器如同我们在CSDN上写文章是的编辑框(如下图),使用场景通常是在编辑详细资料,内容.本次实习过程学习使用了wangeditor,是一个简洁,文档齐全的富文本工具.wangeditor官方文 ...

java富文本编辑器wangEditor-3.1.1的使用流程

java富文本编辑器wangEditor-3.1.1的使用流程相关推荐

最新文章

热门文章