TinyMCE富文本编辑器使用

下载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);
			}
        })

展示：

TinyMCE富文本中文文档。。。传送地址点击传送