upload image from local into tinyMCE

后端 未结 8 814
小鲜肉
小鲜肉 2021-02-04 02:33

tinyMCE has an insert image button, but how to handle its functionality pls give some code

8条回答
  •  说谎
    说谎 (楼主)
    2021-02-04 03:00

    I have upvoted the code written by @pavanastechie, but I ended up rewriting it quite a lot. Here's a version that is far shorter, which might have value to some people

        tinymce.init({
            toolbar : "imageupload",
            setup: function(editor) {
                var inp = $('');
                $(editor.getElement()).parent().append(inp);
    
                inp.on("change",function(){
                    var input = inp.get(0);
                    var file = input.files[0];
                    var fr = new FileReader();
                    fr.onload = function() {
                        var img = new Image();
                        img.src = fr.result;
                        editor.insertContent('');
                        inp.val('');
                    }
                    fr.readAsDataURL(file);
                });
    
                editor.addButton( 'imageupload', {
                    text:"IMAGE",
                    icon: false,
                    onclick: function(e) {
                        inp.trigger('click');
                    }
                });
            }
        });
    

    NOTE: this relies on jquery, and won't work without it. Also, it assumes that the browser supports window.FileReader, and doesn't check for it.

提交回复
热议问题