将图像从本地上传到tinyMCE

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

tinyMCE有一个插入图像按钮,但如何处理它的功能请给出一些代码

6 个解决方案

#1

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

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

    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');
                }
            });
        }
    });

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.

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

6 个解决方案

#1

更多相关文章

随机推荐