layui使用wangEditor富文本插件

wangEditor官网：https://doc.wangeditor.com/

1.实现效果如下图中的 “工单问题描述”

2.页面代码，只截取“工单问题描述”这部分前端代码，下面的textarea多行文本框作为隐藏校验，“全屏”插件需要另外引入静态文件

<link rel="stylesheet" href="/root/assets/module/wangEditor/release/wangEditor.css"/><link rel="stylesheet" href="/root/assets/module/wangEditor/fullscreenplugin/wangEditor-fullscreen-plugin.css"/>

  <tr><td colspan="2" style="background-color: #f2f2f2; color: #666;  text-align: right;"><span class="layui-label-required">*</span>工单问题描述</td><td colspan="10"><div id="div1"></div><textarea class="layui-textarea layui-hide" id="repairDescription" name="repairDescription"placeholder="限500字以内" maxlength="500"onchange="this.value=this.value.substring(0, 2000)" onkeydown="this.value=this.value.substring(0, 2000)" onkeyup="this.value=this.value.substring(0, 2000)"lay-verify="required" style="width:100%; height:200px;"></textarea></td></tr>

<script type="text/javascript" src="/root/assets/module/wangEditor/release/wangEditor.js"></script>
<script type="text/javascript" src="/root/assets/module/wangEditor/fullscreenplugin/wangEditor-fullscreen-plugin.js"></script>

var E = window.wangEditor;var editor = new E('#div1');var $text1 = $('#repairDescription');editor.customConfig.onchange = function (html) {// 监控变化，同步更新到 textarea$text1.val(html)};editor.customConfig.zIndex = 100editor.customConfig.uploadImgServer = '/repair/repairinfo/uploadRichText3';//controller会用到，可以随便设置，但是一定要与controller一致editor.customConfig.uploadFileName = 'file';editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;editor.customConfig.menus = ['head',  // 标题'bold',  // 粗体'fontSize',  // 字号'fontName',  // 字体'italic',  // 斜体'underline',  // 下划线'strikeThrough',  // 删除线'foreColor',  // 文字颜色'backColor',  // 背景颜色'link',  // 插入链接'list',  // 列表'justify',  // 对齐方式'quote',  // 引用'emoticon',  // 表情'image',  // 插入图片'table',  // 表格// 'video',  // 插入视频'code',  // 插入代码'undo',  // 撤销'redo'  // 重复];// 隐藏“网络图片”tabeditor.customConfig.showLinkImg = false;editor.customConfig.emotions = [{// tab 的标题title: '默认',// type -> 'emoji' / 'image'type: 'image',// content -> 数组content: [{alt: '[草泥马]',src: '/root/assets/images/emotions/shenshou_thumb.gif'},{alt: '[蛋糕]',src: '/root/assets/images/emotions/cake.gif'},{alt: '[钟]',src: '/root/assets/images/emotions/clock_thumb.gif'},{alt: '[来]',src: '/root/assets/images/emotions/come_thumb.gif'},{alt: '[给力]',src: '/root/assets/images/emotions/geili_thumb.gif'},{alt: '[神马]',src: '/root/assets/images/emotions/horse2_thumb.gif'},{alt: '[互粉]',src: '/root/assets/images/emotions/hufen_thumb.gif'},{alt: '[吃惊]',src: '/root/assets/images/emotions/j_thumb.gif'},{alt: '[礼物]',src: '/root/assets/images/emotions/liwu_thumb.gif'},{alt: '[太开心]',src: '/root/assets/images/emotions/mb_thumb.gif'},{alt: '[钟]',src: '/root/assets/images/emotions/rabbit_thumb.gif'},{alt: '[害羞]',src: '/root/assets/images/emotions/shamea_thumb.gif'},{alt: '[呵呵]',src: '/root/assets/images/emotions/smilea_thumb.gif'},{alt: '[嘻嘻]',src: '/root/assets/images/emotions/tootha_thumb.gif'},{alt: '[可爱]',src: '/root/assets/images/emotions/tza_thumb.gif'},{alt: '[威武]',src: '/root/assets/images/emotions/wg_thumb.gif'},{alt: '[阴险]',src: '/root/assets/images/emotions/yx_thumb.gif'},{alt: '[猪]',src: '/root/assets/images/emotions/pig.gif'}]}];editor.create();E.fullscreen.init('#div1');// 初始化 textarea 的值$text1.val(editor.txt.html());

layui使用wangEditor富文本插件相关推荐

pagination分页、jedate日期、wangEditor富文本插件使用总结
插件的使用 1. 导包 2. 写HTML结构 3. 初始化 pagination分页插件官方文档:http://josecebe.github.io/twbs-pagination/ Demo: 1 ...
超易上手的富文本插件wangEditor for vue2
前言我们在项目中经常接触的富文本插件有很多应用方案,我常用的有quill-editor.tiptap.wangEditor.先简单介绍下区别: quill-editor:用的最多的插件,但是已经不在 ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
利用wangEditor富文本上传图片及文本并回显
话不多说直接上代码!!! html中得先引用wangEditor插件 vue中使用: 1.npm install wangeditor (注意 wangeditor 所有是小写字母)html 2.引 ...
vue中wangeditor富文本框的使用方法
vue中使用的富文本插件最多的就是 wangeditor 和 vue-quill-editor .开始我用的是 vue-quill-editor,后来又换成了 wangeditor.为啥呢?因为 vu ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
Vue中使用Wangeditor富文本实现聊天发送文件驻留
1.最近遇到一个需求,类似企业微信发送文件及视频时可以在文本框内驻留,然后点击发送按钮进行文件发送,这里使用的是富文本框进行处理,Wangeditor富文本框. 自定义添加菜单功能如下: cnpm i ...
css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...
集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...

layui使用wangEditor富文本插件

layui使用wangEditor富文本插件相关推荐

最新文章

热门文章