上源码
<!DOCTYPE html>
<html>
<head>
<title>layui富文本</title>
<link rel="stylesheet" type="text/css" href="./dist/css/layui.css">
<style type="text/css">
/*附件上传样式*/
.layui-icon.layedit-tool-attachment input{
position: absolute;
font-size: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .01;
filter: Alpha(opacity=1);
cursor: pointer;
}
.layui-icon.layui-colorpicker-trigger-i.layui-icon-down,.layui-icon.layui-colorpicker-trigger-i.layui-icon-close{
display: none;
}
</style>
</head>
<body>
<div class="layui-form">
<textarea id="editor" name="content" required lay-verify="" placeholder="详细描述" class="layui-textarea" autofocus></textarea>
</div>
<script type="text/javascript" src="./dist/layui.all.js"></script>
<script type="text/javascript" src="./js/layedit.js"></script>
<script type="text/javascript">
// 富文本
layui.use(['layedit', 'layer', 'jquery'], function () {
var $ = layui.jquery
, layer = layui.layer
, layedit = layui.layedit;
layedit.set({
//暴露layupload参数设置接口 --详细查看layupload参数说明
uploadImage: {
url: '你的上传图片接口',
accept: 'image',
acceptMime: 'image/*',
exts: 'jpg|png|gif|bmp|jpeg',
size: 1024 * 10,
done: function (data) {
$('#LAY_layedit_1').contents().find('body').append('<img style="max-width:100%;" src="'+data.file_path+'">')
}
}
, uploadFiles: {
url: '你的上传接口',
accept: 'file',
acceptMime: 'file/*',
size: '20480',
autoInsert: true , //自动插入编辑器设置
done: function (data) {
console.log(data)
$('#LAY_layedit_1').contents().find('body').append('<a href="'+data.file_path+'">'+data.name+'</a>')
}
}
//测试参数
, backDelImg: true
//开发者模式 --默认为false
, devmode: false
//是否自动同步到textarea
, autoSync: true
//内容改变监听事件
, onchange: function (content) {
// console.log(content);
}
//插入代码设置 --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: ''
, 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: ['undo', 'redo', 'strong', 'italic', 'underline', 'del', 'addhr', '|','removeformat','colorpicker','fontBackColor', 'fontFomatt', 'fontfamily','fontSize', 'face', '|', 'left', 'center', 'right', '|', 'image','attachment','link'
]
, height: '500px'
});
var ieditor = layedit.build('editor');
//设置编辑器内容
layedit.setContent(ieditor, "", false);
$("#openlayer").click(function () {
layer.open({
type: 2,
area: ['700px', '500px'],
fix: false, //不固定
maxmin: true,
shadeClose: true,
shade: 0.5,
title: "title",
content: 'add.html'
});
})
})
</script>
</body>
</html>