TinyMCE | 一款非常不错的富文本编辑器

TinyMCE（图源自TinyMCE官网）

由于项目需要集成一个富文本编辑器，由于百度的UEditor已经多年没有更新了，其他富文本编辑器有TinyMCE、Kindeditor、UEditor、Kindeditor、Simditor、CKEditor等等，最终选择了TinyMCE，效果还不错。

TinyMCE的优势：^[1]

• 开源可商用，基于LGPL2.1
• 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
• 接口丰富，可扩展性强，有能力可以无限拓展功能
• 界面好看，符合现代审美
• 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
• 对标准支持优秀（自v5开始）
• 多语言支持，官网可下载几十种语言。

上代码

  
  



TinyMCE快速开始示例
  

    Hello, World!
  

效果还是不错滴

关于表单提交

如果直接用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的内容直接拷贝过来，并能保留源格式，图片按照上述配置好后，支持直接粘贴过来完成上传到后台。其他功能等深入使用后再作更新。

图片源自网络，侵权必删！

---

1. http://tinymce.ax-z.cn/ ↩