我们通常在做Web项目时好始终绕不开文本编辑器,比如我们做产品描述,再比如做添加或编辑新闻等。如果没有了它就好比" 说相声的基本功少了一门:说"。为什么呢?因为Web最大的好处在于它的表现形式可以是多样式的,可以是图片,也可以是文字,也可以是视频,当然也可以是N个元素的各种组合。
PS:页面丑的一B
实现
HTML 部分
<div class="layui-form-item">
<div class="layui-input-block">
<label class="layui-form-label ">产品描述</label>
<textarea id="layeditDemo"></textarea>
</div>
</div>
JS 富文本处理部分 我使用的是前面介绍过的LayUI 富文本插件 下载
JS处理部分
<script>
layui.use(['layedit', 'form', 'layer','upload'], function () {
var layedit = layui.layedit,
upload = layui.upload,
form = layui.form,
$ = layui.jquery,
layer = layui.layer;
//文本编辑器
layedit.set({
//暴露layupload参数设置接口 --详细查看layupload参数说明
uploadImage: {
url: '/uploadFile',
accept: 'image',
acceptMime: 'image/*',
exts: 'jpg|png|gif|bmp',
size: 1024 * 10,
data: {
name: "测试参数",
age: 99
}
, done: function (data) {
//console.log(data);
}
},
uploadVideo: {
url: 'your url',
accept: 'video',
acceptMime: 'video/*',
exts: 'mp4|flv|avi|rm|rmvb',
size: 1024 * 10 * 2,
done: function (data) {
console.log(data);
}
}
, uploadFiles: {
url: 'your url',
accept: 'file',
acceptMime: 'file/*',
size: '20480',
autoInsert: true, //自动插入编辑器设置
done: function (data) {
console.log(data);
}
}
//右键删除图片/视频时的回调参数,post到后台删除服务器文件等操作,
//传递参数:
//图片: imgpath --图片路径
//视频: filepath --视频路径 imgpath --封面路径
//附件: filepath --附件路径
, calldel: {
url: 'your url',
done: function (data) {
console.log(data);
}
}
, rightBtn: {
type: "layBtn",//default|layBtn|custom 浏览器默认/layedit右键面板/自定义菜单 default和layBtn无需配置customEvent
customEvent: function (targetName, event) {
//根据tagName分类型设置
switch (targetName) {
case "img":
alert("this is img");
break;
default:
alert("hello world");
break;
};
//或者直接统一设定
//alert("all in one");
}
}
//测试参数
, backDelImg: true
//开发者模式 --默认为false
, devmode: true
//是否自动同步到textarea
, autoSync: true
//内容改变监听事件
, onchange: function (content) {
console.log(content);
//console.log()
}
//插入代码设置 --hide:false 等同于不配置codeConfig
, codeConfig: {
hide: true, //是否隐藏编码语言选择框
default: 'javascript', //hide为true时的默认语言格式
encode: true //是否转义
, class: 'layui-code' //默认样式
}
//新增iframe外置样式和js
, quote: {
style: ['Content/css.css'],
//js: ['/Content/Layui-KnifeZ/lay/modules/jquery.js']
}
//自定义样式-暂只支持video添加
//, customTheme: {
// video: {
// title: ['原版', 'custom_1', 'custom_2']
// , content: ['', 'theme1', 'theme2']
// , preview: ['', '/images/prive.jpg', '/images/prive2.jpg']
// }
//}
//插入自定义链接
, customlink: {
title: '插入layui官网'
, href: 'https://www.layui.com'
, onmouseup: ''
}
, facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/'
, devmode: true
, videoAttr: ' preload="none" '
//预览样式设置,等同layer的offset和area规则,暂时只支持offset ,area两个参数
//默认为 offset:['r'],area:['50%','100%']
//, previewAttr: {
// offset: 'r'
// ,area:['50%','100%']
//}
, 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', 'video', 'attachment', 'anchors'
, '|'
, 'table', 'customlink'
, 'fullScreen', 'preview'
]
, height: '500px'
});
var ieditor = layedit.build('layeditDemo');
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/uploadFile'
,auto: true
,exts: 'jpg|png|jif'
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
if(res.code > 0){
layer.msg('上传失败');
}
//上传成功
console.log(res)
$("#productImage").val(res.data.src)
layer.msg('上传成功');
}
});
//监听提交
form.on('submit(saveBtn)',function(data){
var datas=data.field;//获取数据信息
datas.rem=layedit.getContent(ieditor)
console.log(datas);
//调用添加方法
addUserSubmit(datas,index);
});
/**
* 添加提交操作
*/
function addUserSubmit(data,index){
$.ajax({
url:"Product/addProduct",
type:"POST",
contentType:"application/json",
data:JSON.stringify(data),
success:function(result){
if(result.code==200){
layer.msg("添加成功",{
icon:6,
time:500
},function(){
parent.window.location.reload();//重新页面
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
});
}else{
layer.msg("添加失败");
}
}
})
return false;
};
});
</script>
效果:
这里只涉及存,当需要编辑赋值需要如下处理
layedit.setContent(index, content, flag);
//flag是true,是追加模式,
//flag是false,赋值模式
因为我用的是thymeleaf 这个组件思路如下:
在JS中让thymeleaf 生效(目的当然是为了取值)
至此 关于富文本控制就OK了