话不多说 上代码
html
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">行业详情</label>
<div class="layui-input-block">
<div class="layui-textarea" id='LAY_demo_editor' ></div>
<input type="text" id="editorimgurlHidden" name="editor_imgs" value="{$res.editor_imgs}" >
<!--<div style="display: none" id="aa" >{$res.detail}</div>-->
<!--<input type="hidden" id="content1" value="{$res.detail}" >-->
</div>
</div>
js代码
//富文本
let editor = new wangEditor('#LAY_demo_editor');
//console.log(editor.customConfig)
editor.customConfig.uploadImgServer = "/admin/industry/Doupload";
editor.customConfig.uploadFileName = 'image';
editor.customConfig.pasteFilterStyle = false;
editor.customConfig.uploadImgMaxLength = 5;
editor.customConfig.uploadImgParams = {
'mark': 'img',
'field': 'image',
'oldSrc': ''
}
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
console.log()
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
let url = "{$Think.const.__MY_ROOT_PUBLIC__}"+"upload/"+result.src
insertImg(url)
let urls=$("#editorimgurlHidden").val()+','+url
$("#editorimgurlHidden").val(urls)
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
editor.customConfig.customAlert = function (info) {
layer.msg(info.msg);
};
editor.create();
//初始化编辑器数据
var info2 = "{$res.detail}";
var info3=$('<div>').html(info2).text()
editor.txt.html(info3)
最重要的是这里:$res 是后台查询获取的数据 一定要这样写 不然 的话 会远洋输出html代码