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

       开发过几个项目之后总感觉那些常用的富文本编辑器差了点什么,遂决定找一款更好用的,经过度娘的帮助,终于找到一款既简介又美观,既轻巧又实用,即使在移动端使用也过得去的富文本编辑器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之外还有很多其他的选择,只要自定义按钮没问题,图片要怎么上传随便你。

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,206评论 0 11
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,100评论 0 1
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,550评论 0 17
  • 出生时候,婴儿啼哭,是对未知的恐惧,和对前世的不舍。 濒临死亡,人落泪,是对生命的留恋,和对今世的感慨 即将走向未...
    燃烧的锿阅读 279评论 0 0
  • 杨柳新枝翠河堤, 冰融水暖红鱼戏。 才将棉羽换轻衫, 龙女夜啼清明里。
    今时明羽阅读 301评论 1 0