开发过几个项目之后总感觉那些常用的富文本编辑器差了点什么，遂决定找一款更好用的，经过度娘的帮助，终于找到一款既简介又美观，既轻巧又实用，即使在移动端使用也过得去的富文本编辑器TinyMCE，官方下载的是英文版，好在可以汉化，这里就不赘述。
虽然优点不少，但是有一个明显的缺点就是不能直接上传图片，只能手动输入图片链接，这就意味着只能使用别的服务器的图片，这样很不方便。但是TinyMCE还有一个强大之处是可以自己开发插件。这里主要使用TinyMCE和lrz异步压缩上传图片插件
TinyMCE只需要引入js文件就可以使用了
<script type="text/javascript" src="/Public/js/tinymce/tinymce.min.js"></script>
lrz插件也只需引入一个js文件即可,当然前提是要把插件的整个文件夹dist复制到项目里面
<script type="text/javascript" src="/Public/js/dist/lrz.bundle.js"></script>
接下来就是TinyMCE的初始化了
tinymce.init({
selector: 'textarea',
height: 300,
width: '100%',
language:"zh_CN",
plugins: [
'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code' ],
toolbar: 'fullscreen preview | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | mybutton',
setup: function (editor) {
editor.addButton('mybutton', {
text: '上传图片',
icon: false,
onclick: function () {
tinymceEditor = editor;
$("input[name='upload-img']").click();
}
});
},
//TinyMCE 会将所有的 font 元素转换成 span 元素
convert_fonts_to_spans: true,
//换行符会被转换成 br 元素
convert_newlines_to_brs: false,
//在换行处 TinyMCE 会用 BR 元素而不是插入段落
force_br_newlines: false,
//当返回或进入 Mozilla/Firefox 时，这个选项可以打开/关闭段落的建立 force_p_newlines: false,
//这个选项控制是否将换行符从输出的 HTML 中去除。选项默认打开，因为许多服务端系统将换行转换成，因为文本是在无格式的 textarea 中输入的。使用这个选项可以让所有内容在同一行。 remove_linebreaks: false,
//不能把这个设置去掉，不然图片路径会出错
relative_urls: false,
//允许拖动大小
resize: true,
font_formats: "宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Arial=arial,helvetica,sans-serif;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Tahoma=tahoma,arial,helvetica,sans-serif;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
});
其中：
selector ：富文本编辑器的容器，可以是id、class或者标签名
height、width:定义文本编辑器的宽高
language：语言文件，zh_CN.js为汉化包，自行下载后存放到langs目录下
plugins:插件
toolbar：工具栏
setup：自定义内容
onclick: function () {}：自定义按钮点击之后所执行的事件
接下来就是最关键的一步，图片异步上传上去之后怎样才能添加到所编辑的内容里面
var news_img = <img src=url>
tinymceEditor.insertContent(news_img);
url为异步上传图片返回的图片链接，tinymceEditor则在onclick: function () {}自定义按钮点击事件里面已经定义了,即tinymceEditor = editor;，当然，最为全局变量，必须在方法外先声明 var tinymceEditor;
当然异步上传图片除了lrz之外还有很多其他的选择，只要自定义按钮没问题，图片要怎么上传随便你。
以上就是全部内容，第一次写随笔，不足之处还望见谅。当然也希望各位大牛能指点一二。
