tinymce功能很强大的一款编辑器
源码以及参考资料:https://gitee.com/chick1993/layui-tinymce
代码如下 html:
<div >
<textarea id="edit"></textarea>
</div>
Js(上传图片注意修改为自己的地址)
var content = "";
var edit = "";
layui.extend({
tinymce: '{/}./存放路径'
}).use(['tinymce'], function () {
var t = layui.tinymce;
t.render({
elem: "#edit",
height: 600,
//images_upload_url:"/自己的上传地址"//二进制
//重写上传方法(带进度条),不然传的二进制,以下返回的结果格式:{ location : "/demo/image/1.jpg" }
images_upload_handler: function (blobInfo, success, failure, progress) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/自己的上传地址');
xhr.upload.onprogress = function(e){
progress(e.loaded / e.total * 100);
}
xhr.onload = function() {
var json;
if (xhr.status == 403) {
failure('HTTP Error: ' + xhr.status, { remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300 ) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
}
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
},(opt, d)=>{
// 加载完成后回调 opt 是传入的所有参数
// edit是当前编辑器实例,等同于t.get返回值
edit = d;
d.setContent(content);//回显
});
})
上传注意返回结果格式:
{ location : "/demo/image/1.jpg" }
取值
var ftext = edit.getContent();//获得富文本内容