下载TinyMCE
社区版:http://download.tiny.cloud/tinymce/community/tinymce_5.4.1.zip
开发版:http://download.tiny.cloud/tinymce/community/tinymce_5.4.1_dev.zip
1.引入tinyMCE
<script src="/lib/tinymce/tinymce.min.js"></script>
html:
<div style="margin-right: 20px">
<textarea name="content" id="tinymceEditer">Hello, World!</textarea>
</div>
js:
tinymce.init({
selector: '#tinymceEditer',
height: 500
})
展示:
( ⊙ o ⊙ )啊!怎么是英文的。。。待我汉化
2.汉化tinyMCE
下载汉化包:语言包下载地址
存放到以下目录 tinymce 下面的 langs
js:
tinymce.init({
selector: '#tinymceEditer',
height: 500,
language: 'zh_CN'
})
展示:
3.图片上传配置
第1步:上传图片,首先要启用图片插件
在plugins参数中把image加进去。
第2步:在工具栏显示图片工具按钮
在toolbar参数中把image加进去。
此时,点图片按钮是没有上传选项的,只能添加图片地址。
第3步:加入配置参数images_upload_url
此参数用于指定一个接受上传文件的后端处理程序地址,例如:
images_upload_url: ‘/upload/image’,
如果返回的地址是相对路径,还有一个参数images_upload_base_path,可以给相对路径指定它所相对的基本路径。
images_upload_base_path: ‘/demo’,
最后如下方示例:
js:
tinymce.init({
selector: domId,
height: height,
language: 'zh_CN',
plugins: ['image'],
images_upload_url: '/upload/image',
images_upload_base_path: '/demo',
})
展示:
后台接收的参数名为 file才可以上传
images_upload_base_path
后端返回给TinyMCE的JSON数据,形如这样:{ location : “/demo/image/1.jpg” }
4.自定义图片上传
我的后台接收参数为 image
返回的参数格式为:
{
code: 200,
msg: 成功,
data: {
id: 1001,
path: '/upload/images/20200819/38018f4ee0b94fa092e216a54cd753be.jpg'
}
}
js:
tinymce.init({
selector: domId,
height: height,
language: 'zh_CN',
plugins: ['image','code'],
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/upload/image');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.data.path != 'string') {
failFun('Invalid JSON: ' + xhr.responseText);
return;
}
succFun(json.data.path);
};
formData = new FormData();
formData.append('image', file, file.name );//
xhr.send(formData);
}
})
展示: