html - 从本地上传图片到tinyMCE

Question

tinyMCE 有一个插入图片按钮，但是如何处理它的功能 请给一些代码

Answer 1

我对@pavanastechie 编写的代码投了赞成票，但我最终重写了很多。这是一个更短的版本，可能对某些人有值(value)

    tinymce.init({
        toolbar : "imageupload",
        setup: function(editor) {
            var inp = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
            $(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('<img src="'+img.src+'"/>');
                    inp.val('');
                }
                fr.readAsDataURL(file);
            });

            editor.addButton( 'imageupload', {
                text:"IMAGE",
                icon: false,
                onclick: function(e) {
                    inp.trigger('click');
                }
            });
        }
    });

注意:这依赖于 jquery，没有它就无法工作。此外，它假定浏览器支持 window.FileReader，并且不检查它。