TinyMCE富文本编辑器开发本地图片上传插件

       开发过几个项目之后总感觉那些常用的富文本编辑器差了点什么，遂决定找一款更好用的，经过度娘的帮助，终于找到一款既简介又美观，既轻巧又实用，即使在移动端使用也过得去的富文本编辑器TinyMCE，官方下载的是英文版，好在可以汉化，这里就不赘述。

      虽然优点不少，但是有一个明显的缺点就是不能直接上传图片，只能手动输入图片链接，这就意味着只能使用别的服务器的图片，这样很不方便。但是TinyMCE还有一个强大之处是可以自己开发插件。这里主要使用TinyMCE和lrz异步压缩上传图片插件

TinyMCE只需要引入js文件就可以使用了

lrz插件也只需引入一个js文件即可,当然前提是要把插件的整个文件夹dist复制到项目里面

接下来就是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 =

 tinymceEditor.insertContent(news_img);

url为异步上传图片返回的图片链接，tinymceEditor则在onclick: function () {}自定义按钮点击事件里面已经定义了,即tinymceEditor = editor;，当然，最为全局变量，必须在方法外先声明 var tinymceEditor;

当然异步上传图片除了lrz之外还有很多其他的选择，只要自定义按钮没问题，图片要怎么上传随便你。

以上就是全部内容，第一次写随笔，不足之处还望见谅。当然也希望各位大牛能指点一二。