JS----TinyMCE 富文本编辑器，图片，文件上传

TinyMCE：功能强大、所见即所得的富文本编辑器

一般使用

官网及文档：https://www.tiny.cloud
官网下载：https://www.tiny.cloud/get-tiny/self-hosted/
Github：https://github.com/tinymce
文中：http://tinymce.ax-z.cn/

HTML

<textarea name="" id="editer"></textarea>

JS

var editer = tinymce.render({
	elem: "#editer",
	// 直接上传, 需要服务器返回完整的图片地址
	images_upload_url: uploadUrl,
	form: {
		name:'file'
		,data:{ id: userInfo.id} 
	},
	visitPrefix: filePrefix,

	// 文件上传回调
	file_picker_callback: (callback, value, meta) => {
		console.log("file_picker_callback")
		var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4',
			url = uploadUrl,
			ex = filePrefix;

		// 指定不同的文件类型，也可指定不同的请求接口
		switch (meta.filetype) {
			case 'image':
				filetype = '.jpg, .jpeg, .png, .gif';
				break;
			case 'media':
				filetype = '.mp3, .mp4';
				break;
			case 'file':
				filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx,';
				break;
			default:
		}

		var input = document.createElement('input');
		input.setAttribute('type', 'file');
		input.setAttribute('accept', filetype);
		input.click();
		input.onchange = function () {
			var file = this.files[0], xhr, formData;
			xhr = new XMLHttpRequest();
			xhr.withCredentials = false;
			xhr.open('POST', url);
			xhr.onload = function () {
				if (xhr.status != 200) {
					console.log('HTTP Error: ' + xhr.status);
					return;
				}
				var res = JSON.parse(xhr.responseText);
				if (!res || typeof res.data != 'string') {
					console.log('Invalid JSON: ' + xhr.responseText);
					return;
				}
				if (res.code != 0 ) {
					failFun(res.msg);
					return;
				}
				callback(ex + res.data);
			};
			formData = new FormData();
			formData.append("file", file);
			xhr.send(formData);
		};
	}
}, function (opt, editer) {
	console.log(opt);
	console.log(editer)
})

提交数据

form.on('submit(notice-list-add-submit)', function (data) {
	layer.load(2);
	data.field.content = tool.HTMLEncode(tinymce.get("#editer").getContent());
	$(this).html('提交中...').prop('disabled', true);

	admin.req({
		url: url,
		data: data.field,
		success: (res) => {
			layer.closeAll('loading');
			if (res.code === 0) {
				layer.msg(res.msg, {icon: 1, time: 2000}, function () {
					admin.reload()
				})
			} else {
				layer.msg(res.msg);
				$(this).html('提交').prop('disabled', false);
			}
		},
		error(e) {
			layer.closeAll('loading');
			$(this).html('提交').prop('disabled', false);
		}
	});

	return false;
});

一般方法

HTMLEncode: function (html) {
  var temp = document.createElement("div");
  (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
  var output = temp.innerHTML;
  temp = null;
  return output;
}

function reload() {
	tinymce.reload({
		elem: "#editer",
	}, function () {
		tinymce.get("#editer").setContent("");
	})
}

function destroy() {
	tinymce.get("#editer").destroy()
}

function initTinymce() {
	tinymce.render({
		elem: "#editer"
	})
}