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

layui提供的精简的富文本

如果你正苦苦寻找一款轻量的Web富文本编辑器，那么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提供的的确十分方便，但是缺少的元素很多。像什么标题，元素，等简单的都没有。小编我当初页为此苦恼啊。临时换富文本，成本太高了。幸好发现了大牛在layedit基础上改编的富文本；

2.使用第三方插件丰富layui的富文本

    <!--富文本需要的链接--><link href="/Kz.layedit/Content/Layui-KnifeZ/css/layui.css" rel="stylesheet"/><script src="/Kz.layedit/Content/Layui-KnifeZ/layui.js"></script><script src="/Kz.layedit/Content/ace/ace.js"></script>

前段页面：

<div style="width: 1000px;height: 700px;margin: 0px auto;"><form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 --><div class="layui-form-item"><label class="layui-form-label">活动首图</label><div class="layui-input-inline"><input id="activeLogo" type="text" name="activeLogo" style="display: none;"><button type="button" class="layui-btn" id="uploadImage"><i class="layui-icon"></i>更换图片</button><div class="layui-upload-list"><img class="layui-upload-img" height="100px" width="100px" id="showImage"><p id="demoText"></p></div></div><label class="layui-form-label">活动简介</label><div class="layui-input-inline"><textarea style="height: 150px;resize: none;" name="introduction" placeholder="请输入活动简介内容"class="layui-textarea"></textarea></div></div><div class="layui-form-item"><label class="layui-form-label">头标题1</label><div class="layui-input-inline"><input type="text" name="headTitle1" lay-verify="required" placeholder="请输入" autocomplete="off"class="layui-input"></div><label class="layui-form-label">头标题2</label><div class="layui-input-inline"><input type="text" name="headTitle2" lay-verify="required" placeholder="请输入" autocomplete="off"class="layui-input"></div><label class="layui-form-label">内容标题</label><div class="layui-input-inline"><input type="text" name="title" lay-verify="required" placeholder="请输入" autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">开始时间</label><div class="layui-input-inline"><input type="text" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss" name="startTime"lay-verify="required" placeholder="请输入" autocomplete="off"class="layui-input"></div><label class="layui-form-label">结束时间</label><div class="layui-input-inline"><input type="text" id="overTime" placeholder="yyyy-MM-dd HH:mm:ss" name="overTime" lay-verify="required"placeholder="请输入" autocomplete="off"class="layui-input"></div><label class="layui-form-label">人数上限</label><div class="layui-input-inline"><input type="text" name="registrationCeilingNumber" lay-verify="required" placeholder="请输入"autocomplete="off"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">活动内容</label><div class="layui-input-block"><textarea id="demo" lay-verify="content" name="matchContent" style="display: none;"></textarea></div></div><br><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="addActive">立即提交</button></div></div><!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 --></form></div>

js页面代码：

<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>

效果图：

有啥不懂得小伙伴们加群交流啦：852665736；本群致力于一同进步的小伙伴们，大家一起交流探讨，在陌生的城市感受温暖；

无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注微信公众号：gh_817962068649

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

微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
富文本编辑器css写法,HTML – 替代方法来做网站特定的富文本编辑器CSS？
这与我回答的关于多个RTE类样式的 previous Stackoverflow question非常相似,我跟进了 blog post,其中包含有关在Sitecore富文本编辑器中加载站点特定CSS ...
layui网页html编辑器,layui使用富文本编辑器
HTML代码: 这里的原理是你输入的内容会经过处理插入到文本区域textarea中 js代码: /** * 文本编辑器 */ layui.use(['form', 'layedit'], functi ...
layui 加载第三方插件
layui 加载第三方插件 1. 使用模块 2. 内置模块 3. 扩展一个 layui 模块 4. 加载第三方插件为layui模块 1. 使用模块 Layui的模块加载采用核心的 layui.use( ...
Vue - 解析富文本（v-html 指令）
前言如果您的项目只是解析简单的富文本,那么推荐使用本文的解决方案,反之建议您使用功能齐全的第三方插件. 很多系统都会有解析富文本的需求,例如以下富文本数据, `<h1>李拴蛋</h ...
使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
ue4字符串区别文本_UE4中使用富文本（RichTextBlock多格式文本块）
前言哈喽大家好啊~好久没有写东西了,最近闹疫情,实在是没心情!其实主要还是因为太懒了! 今天将为大家分享个不是很新的技术,但是又是在游戏开发里常出现的需求,富文本应用. 说到富文本,可能很多人并不知 ...
怎样快速使用富文本编辑器
富文本编辑器富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 富文本编辑器不同于文本编辑器,程序员可到网上下载免费的富文本编辑器内嵌于 ...
vue中如何使用富文本框组件
富文本框,就是可以在文本框里面输入文本并携带自我编辑的一种编辑器,使用vue做项目时少不了用到富文本框组件,下面就来说说该组件的使用步骤一.首先要在vue脚手架的依赖按钮中添加新的依赖vue-qui ...

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

layui提供的精简的富文本

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

效果如下：

2.使用第三方插件丰富layui的富文本

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

最新文章

热门文章