在angular2中使用tinymce富文本编辑,并实现上传图片功能

使用tinymce富文本编辑实现上传图片功能:

第一步:使用jquery.form.js插件;

自己去百度下载这个插件。

第二步:在angular2的目录中引入,如何引入:

在assets中建一个js文件夹,将jquery.form.js引入,

然后到.angular-cli.json 中添加代码

"scripts": [
            "../node_modules/jquery/dist/jquery.min.js",
            "../src/assets/js/jquery.form.js"
      ],

将jquery.form.js插件引入。

第三步:

 tinymce.init({
      selector: '#post_editor',
      skin_url: '/assets/skins/lightgray',
      convert_urls: false,
      //menubar:false,
      // 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
      // 'searchreplace wordcount visualblocks visualchars code fullscreen',
      // 'insertdatetime media nonbreaking save table contextmenu directionality',
      // 'emoticons template paste textcolor colorpicker textpattern imagetools codesample'
      plugins: [
        'advlist autolink lists link imageupload charmap preview hr anchor pagebreak',
        'searchreplace wordcount visualblocks visualchars code fullscreen',
        'insertdatetime nonbreaking save table contextmenu directionality',
        'emoticons template paste textcolor colorpicker textpattern codesample'
      ],
      toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link imageupload',
      toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
      imageupload_url: 'http://rapapi.org/mockjsdata/20823/upload/images',
      //image_advtab: true,
      codesample_content_css: '/assets/css/prism.css',
      //文件和图片上传相关的选项
      file_browser_callback_types: 'image',
      file_browser_callback: function (field_name, url, type, win) {
        console.log(type);
        console.log(type == 'image');
        if (type == 'image') {
          let event = new MouseEvent('click', {
            'view': window,
            'bubbles': true,
            'cancelable': true
          });
          let fileInput = document.getElementById('img_input');
          fileInput.dispatchEvent(event);
        }
      },
      setup: editor => {
        // editor.setContent("12345");
        this.editor = editor;
        editor.on('blur', () => {
          this.tinymceContent.left = editor.getContent();
          this.RichTextGoOut.emit(this.tinymceContent);
          // this.content = editor.getContent();
        });

        editor.addButton('mybutton', {
          text: '上传图片',
          icon: false,
          onclick: function () {
            $("input[name='upload-img']").click();
          }
        })


      }
    });
  }

在plugins添加插件功能 imageupload,在toolbar1中添加imageupload,

imageupload_url: 'http://rapapi.org/mockjsdata/20823/upload/images',

在最后添加editor.addButton等内容。

第三步:上传之后后端会返回展示的image 的url,到node_modules/tinymce/plugins/imageupload/plugin.min.js中修改img的src.

 var submitUpload = function(){
                    $('#uploadImageForm').ajaxSubmit({
                        dataType: 'json',
                        success: function(response){
                          console.log(response)
                          var tpl = '<img src="https://avatars1.githubusercontent.com/u/26200899?v=3&s=40" />';
                          ed.insertContent(tpl.replace('%s', response.path));
                          ed.focus();
                          removeForeground();
                          removeBackground();
                           
                        },
                        error: function(){
                            showImageUploadError('上传错误:2');
                        }
                    });
                }

完美解决图片上传功能,动态显示在了框内。

还有一个:tinymce需要升级到4.5.6版本才能用

还看不懂就去看我的代码吧:

https://git.oschina.net/kaykie/unique

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Angular&服务

ionic2实现扫描二维码功能

1612
来自专栏游戏杂谈

基于Node.js的Web Socket

以前看到过很多关于node.js的文章,但一直没有尝试去搭建node.js的环境。这里有一篇文章叫“websocket与node.js的完美结合”

1732
来自专栏无所事事者爱嘲笑

ionic2 处理android硬件返回按钮

1364
来自专栏从零开始的linux

安装linux系统

第1步:启动RHEL7的主机电源。 ? 第2步:敲击回车。 ? 第3步:等待即可。 ? 第4步:选择安装系统时的语言。 ? 第5步:配置信息界面,敲击“In...

3659
来自专栏菩提树下的杨过

利用Spring的@Async异步处理改善web应用中耗时操作的用户体验

Web应用中,有时会遇到一些耗时很长的操作(比如:在后台生成100张报表再呈现,或 从ftp下载若干文件,综合处理后再返回给页面下载),用户在网页上点完按钮后,...

2687
来自专栏向治洪

React Native打包

前面写了关于React的一系列入门章:http://lib.csdn.net/xiangzhihong8/5375/chart/React%20Native ...

3675
来自专栏FreeBuf

EKFiddle:基于Fiddler研究恶意流量的框架

EKFiddle是一个基于Fiddler web debugger的,用于研究漏洞利用套件、恶意软件和恶意流量的框架。

1200
来自专栏Web 开发

用fiddler进行debug

昨晚在家里调试一个页面,弄了好一会,fiddler都没有抓到数据。最后Google之,才发现因为我等都装了SwitchySharp这类自动翻墙插件。导致Chro...

830
来自专栏后端云

vm被systemd删除

发现计算节点重启后,所有的该节点上的vm被删除了,查看vm对应的qemu日志,qemu-kvm: terminating on signal 15 from p...

2694
来自专栏偏前端工程师的驿站

.Net魔法堂:史上最全的ActiveX开发教程——自动更新、卸载篇

一、前言                               B/S模式的特点之一,客户端版本升级相对简单、快捷,适合产品的快速迭代。而ActiveX组...

1958

扫码关注云+社区

领取腾讯云代金券