在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 条评论
登录 后参与评论

相关文章

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

ionic2 处理android硬件返回按钮

1174
来自专栏Web 开发

用fiddler进行debug

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

600
来自专栏王二麻子IT技术交流园地

十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题。今天我们来重新调...

23610
来自专栏静默虚空的博客

图解使用VS的安装项目打包程序

背景 这段时间一直在做客户端程序的打包程序,遇到各种坑。因为以前没有任何这方面的经验,历经各种折腾,费尽九牛二虎之力总算是完成了。 虽然没有太多技术含量,但是因...

1835
来自专栏FreeBuf

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

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

860
来自专栏Golang语言社区

golang使用protobuf

为什么要使用protobuf 最近的项目中,一直使用Json做数据传输。Json用起来的确很方便。但相对于protobuf数据量更大些。做一个移动端应用,为用户...

4705
来自专栏前端人人

React多页面应用4(webpack自动化生成多入口页面)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包...

5375
来自专栏后端云

vm被systemd删除

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

1104
来自专栏日常分享

JSP/Servlet Web 学习笔记 DayTwo

   定义JSP文件中的全局属性、一个JSP页面可以包含多个page指令、除了Import以外,其他page指令定义的属性/值只能出现一次。

882
来自专栏向治洪

React Native打包

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

2585

扫码关注云+社区