Use tinymce rich text editor in angular2, and realize uploading picture function

Use tinymce rich text editor in angular2, and realize uploading picture function

Use tinymce rich text editor to upload pictures:

The first step: use the jquery.form.js plugin;

Go to Baidu to download this plug-in.

Step 2: Introduce in the angular2 directory, how to import:

Create a js folder in assets and import jquery.form.js,

Then add the code to .angular-cli.json

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

Introduce the jquery.form.js plugin.

third step:

 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 and image upload related options
      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:'Upload pictures',
          icon: false,
          onclick: function () {
            $("input[name='upload-img']").click();
          }
        })


      }
    });
  }

Add the plug-in function imageupload in plugins, add imageupload in toolbar1,

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

Add editor.addButton and other content at the end.

Step 3: After uploading, the backend will return the url of the displayed image, and go to node_modules/tinymce/plugins/imageupload/plugin.min.js to modify the src of the img.

 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('Upload error: 2');
                        }
                    });
                }

Perfectly solve the picture upload function, which is dynamically displayed in the box.

There is another one: tinymce needs to be upgraded to version 4.5.6 to use

Look at my code if you don’t understand it:

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

Reference: https://cloud.tencent.com/developer/article/1148194 Use tinymce rich text editing in angular2, and realize the function of uploading pictures-Cloud + Community-Tencent Cloud