TinyMCE（图源自TinyMCE官网）
由于项目需要集成一个富文本编辑器，由于百度的UEditor已经多年没有更新了，其他富文本编辑器有TinyMCE、Kindeditor、UEditor、Kindeditor、Simditor、CKEditor等等，最终选择了TinyMCE，效果还不错。
TinyMCE的优势：[1]
- 开源可商用，基于LGPL2.1
- 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
- 接口丰富，可扩展性强，有能力可以无限拓展功能
- 界面好看，符合现代审美
- 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
- 对标准支持优秀（自v5开始）
- 多语言支持，官网可下载几十种语言。
上代码
<!DOCTYPE html>
<html>
<head>
<script src='tinymce.min.js'></script>
<script>
tinymce.init({
selector: '#mytextarea',
language:'zh_CN',
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize lineheight formatpainter axupimgs',
toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
width:1000,
height: 650, //编辑器高度
min_height: 400
});
</script>
</head>
<body>
<h1>TinyMCE快速开始示例</h1>
<form method="post">
<textarea id="mytextarea">Hello, World!</textarea>
</form>
</body>
</html>
效果还是不错滴
关于表单提交
如果直接用form表单提交，后台是可以正常获取到textarea内容的；如果用ajax提交，直接使用jquery $('#mytextarea').val()是获取不到内容的，需要按如下方法获取内容：
var activeEditor = tinymce.get('mytextarea');
var editBody = activeEditor.getBody();
activeEditor.selection.select(editBody);
var content = activeEditor.getContent();
关于图片上传
如果需要上传图片，需要在tinymce初始化里添加如下配置：
tinymce.init({
selector: '#mytextarea',
language:'zh_CN',
plugins: 'image',
relative_urls : false,
convert_urls : true,
images_upload_handler: function (blobInfo, succFun, failFun) {
var xhr, formData;
var file = blobInfo.blob();//转化为易于理解的file对象
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/your/upload-path');
xhr.onload = function() {
var json;
if (xhr.status != 200) {
failFun('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failFun('Invalid JSON: ' + xhr.responseText);
return;
}
succFun(json.location);
};
formData = new FormData();
formData.append('file', file, file.name );//此处与源文档不一样
xhr.send(formData);
}
});
目前简单体验了一下TinyMCE，感觉还是可以，可以直接把网页、word的内容直接拷贝过来，并能保留源格式，图片按照上述配置好后，支持直接粘贴过来完成上传到后台。其他功能等深入使用后再作更新。
图片源自网络，侵权必删！
网友评论