当前位置: 首页 > news >正文

layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本

官方提供的编辑器功能太少

没有字体颜色,不能传图片,视频等扩展

官方文档说的很清楚,简易的富文本使用layui提供的的确十分方便,但是缺少的元素很多。像什么标题,元素,等简单的都没有。小编我当初页为此苦恼啊。临时换富文本,成本太高了。幸好发现了大牛在layedit基础上改编的富文本;

1.根据官方文档提供的layedit

   layui.use('layedit', function(){var layedit = layui.layedit;/***layedit的上传图片*/layedit.set({uploadImage: {url:  '/upload/layuiUploadOne' //接口url,type: 'post' //默认post}});layedit.build('demo', {height: 500 //设置编辑器高度});});

大概效果如下富文本编辑器- 在线演示 - Layui

<div style="width:100%;"><textarea id="txtaContentGuDing" style="display: none;"></textarea>
</div>
<div id="hdContentGuDing" style="display: none;"><%=strTemplContentGuDing %></div>//赋值的时候后台取到的值临时放在这里layui.use(['form', 'layedit', 'upload', 'laydate'], function () {var form = layui.form;var layedit = layui.layedit;var laydate = layui.laydate;var $ = layui.$;var upload = layui.upload;layedit.set({uploadImage: {url: '/layeditUPIMG.ashx', //接口urltype: 'post' //默认post}});//layedit配置开始(固定备注)//layedit.set一定要放在 layedit.build 前面,否则配置全局接口将无效。indexsGuDing = layedit.build('txtaContentGuDing', {//'html', 'code', tool: ['colorpicker', 'fontBackColor', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontfomatt', 'colorpicker', 'face', '|', 'left', 'center', 'right', '|', 'link', 'unlink'],height: 300, // 设置编辑器高度});//layedit配置结束(固定备注)//layedit赋值开始(固定备注)var strContentGuDing = $("#hdContentGuDing").html(); //这里用DIV来临时存值,是因为内容有图片,所以不能用hidden控件if (strContentGuDing != "") {layedit.setContent(indexsGuDing, strContentGuDing, false);//flag是true,是追加模式,flag是false,赋值模式}//layedit赋值结束(固定备注)
});

原参考代码

<script type="text/javascript">layui.use(['form', 'layedit', 'upload', 'laydate'], function () {var form = layui.form;var layedit = layui.layedit;var laydate = layui.laydate;var $ = layui.$;var upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#uploadImage', url: '/upload/layuiUploadOne', before: function (obj) {//预读本地文件示例,不支持ie8obj.preview(function (index, file, result) {$('#showImage').attr('src', result); //图片链接(base64)});}, done: function (res) {//如果上传失败if (res.code > 0) {return layer.msg('上传失败');}$("#activeLogo").val(res.data.src);//上传成功return layer.msg('图片上传成功!');}, error: function () {//演示失败状态,并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});//自定义日期格式var myDate = new Date();laydate.render({elem: '#startTime',type: 'datetime'});laydate.render({elem: '#overTime',type: 'datetime'});//上传图片layedit.set({uploadImage: {url: '/upload/layuiUploadOne', type: 'post' //默认post},devmode: true//是否自动同步到textarea, autoSync: true//内容改变监听事件, onchange: function (content) {console.log(content);}//插入代码设置 --hide:false 等同于不配置codeConfig, codeConfig: {hide: true,  //是否隐藏编码语言选择框default: 'javascript', //hide为true时的默认语言格式encode: true //是否转义, class: 'layui-code' //默认样式}, facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/', devmode: true, videoAttr: ' preload="none" ', tool: ['html', //显示富文本源码'undo', //撤销'redo',//重做'code', //代码'strong',//加粗'italic', //斜体'underline', //下划线'del', //删除线'addhr', //水平线'|','removeformat', //清楚文字样式'fontFomatt',//段落格式'fontfamily',//字体'fontSize', //字体大小'fontBackColor',//字体背景色'colorpicker',//字体颜色'face',//表情'|','left', //左对齐'center', //居中'right', //右对齐'|',
//              'link', //链接
//              'unlink', //清除链接
//              'images', //多图上传'image_alt', //图片alt
//              'video',//视频
//              'attachment',//插入附件
//              'anchors'//添加锚点, '|', 'table',//表格'customlink'//自定义链接, 'fullScreen',//全屏'preview'//预览]});var index = layedit.build('demo', {height: 300 //设置编辑器高度,});//建立编辑器//将编辑器内容同步到textarea中layedit.sync(index);form.verify({content: function (value) {return layedit.sync(index);}});form.on('submit(addActive)', function (data) {console.log(data.field);//当前容器的全部表单字段,名值对形式:{name: value}return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。});});
</script>

转自:layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本_layui-knifez_源码plus的博客-CSDN博客

GIT源代码Kz.layedit: 对layui.layedit的拓展,基于layui v2.4.3.增加了HTML源码模式、插入table、批量上传图片、图片插入、超链接插入功能优化、视频插入功能、全屏功能、段落、字体颜色、背景色设置、锚点设置等功能。 Kz.layedit包资源地址:https://download.csdn.net/download/wybshyy/88314305

0积分 

http://www.lryc.cn/news/160497.html

相关文章:

  • 某公司二面面试题总结
  • Ubuntu编译运行socket.io
  • h5开发网站-页面内容不够高时,如何定位footer始终位于页面的最底部
  • 手机也可以搭建个人博客?安卓Termux+Hexo搭建属于你自己的博客网站【cpolar实现公网访问】
  • Support for password authentication was removed on August 13, 2021 解决方案
  • MPP 与 SMP 的区别,终于有人讲明白了【文末送书】
  • 华为OD机试真题【寻找最大价值的矿堆】
  • Java Maven 项目读取项目版本号
  • Lesson4-1:OpenCV图像特征提取与描述---角点特征
  • C++ 基础(一)题目练习
  • Webpack5入门到原理
  • 地形有通挂支隘险远六种情况
  • C++多态案例-设计计算器类
  • 复制tr的一行数据或者复制数据使用,使用jq和php
  • 软件测试的基础(1)
  • 基于Java+SpringBoot+Vue前后端分离库存管理系统设计和实现
  • Secrets in Kubernetes (K8s)
  • 模板测试和深度测试在cocoscreator中的应用
  • 手机便签功能在哪里?如何在便签里添加文字图片视频?
  • Java 中 List 的 7 种遍历方式 及 性能对比
  • 【Github】git本地仓库建立与远程连接
  • 【瑞萨零基础入门】瑞萨MCU零基础入门系列教程(更新连载中)
  • Bean 的生命周期总结
  • 【Python】环境的搭建
  • 2021 ICPC 昆明 I Mr Main and Windmills(直线与线段的交点)
  • SpringCloudAlibaba Gateway(一)简单集成
  • 逻辑回归(Logistic Regression)
  • Leetcode129. 求根到叶子节点数字之和
  • 0401hive入门-hadoop-大数据学习.md
  • springboot项目打包优化,将所有第三方包单独打包至lib目录