佛山家具网站建设公司,广州网站设计我选刻,网络品牌营销案例,google浏览器网页版官方提供的编辑器功能太少
没有字体颜色#xff0c;不能传图片#xff0c;视频等扩展
官方文档说的很清楚#xff0c;简易的富文本使用layui提供的的确十分方便#xff0c;但是缺少的元素很多。像什么标题#xff0c;元素#xff0c;等简单的都没有。小编我当初页为此苦…官方提供的编辑器功能太少
没有字体颜色不能传图片视频等扩展
官方文档说的很清楚简易的富文本使用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 stylewidth:100%;textarea idtxtaContentGuDing styledisplay: none;/textarea
/div
div idhdContentGuDing styledisplay: 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 typetext/javascriptlayui.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 stylecolor: #FF5722;上传失败/span a classlayui-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: preloadnone , 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积分
