Vue--TINYMCE Solutions for uploading images

Source: Internet
Author: User
Tags tinymce plugins

Create a new uploadimage--index.js file under Mo---tinymce plugins

/**
* Created by DELL on 2018/8/7.
*/
/**
* TINYMCE Plugin
* Created by Jerry on 16/8/5.
*/
TinyMCE. Pluginmanager.add (' Uploadimage ', function (editor) {

function Selectlocalimages () {
var dom = Editor.dom;
var input_f = $ (' <input type= "file" name= "thumbnail" accept= "image/jpg,image/jpeg,image/png,image/gif" multiple= " Multiple ">");
Input_f.on (' Change ', function () {
var form = $ ("<form/>",
{
Action:editor.settings.upload_image_url,//Set the route for uploading pictures, configure at initialization
Style: ' Display:none ',
Method: ' Post ',
Enctype: ' Multipart/form-data '
}
);
Form.append (Input_f);
Ajax Submission Form
Form.ajaxsubmit ({
Beforesubmit:function () {
return true;
},
Success:function (data) {
if (data && Data.file_path) {
Editor.focus ();
Data.file_path.forEach (function (src) {
Editor.selection.setContent (dom.createhtml (' img ', {SRC:SRC}));
})
}
}
});
});

Input_f.click ();
}

Editor.addcommand ("Mceuploadimageeditor", selectlocalimages);

Editor.addbutton (' Uploadimage ', {
Icon: ' Image ',
ToolTip: ' Upload image ',
Onclick:selectlocalimages
});

Editor.addmenuitem (' Uploadimage ', {
Icon: ' Image ',
Text: ' Upload image ',
Context: ' Tools ',
Onclick:selectlocalimages
});
}); When you use it, bring it in first.
Import ' Tinymce/plugins/uploadimage '

The time of initialization
Upload_image_url: '/tinymce ',//Configuring the routing of uploaded images
uploadimage',
Toolbar
' Bold Italic underline strikethrough | Fontsizeselect | ForeColor BackColor | AlignLeft aligncenter alignright alignjustify | Bullist Numlist | Outdent Indent blockquote | Undo Redo | Link unlink uploadimage | Removeformat ',



Vue--TINYMCE Solutions for uploading images

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.