Question

嗨，我在网页中使用Tinymce编辑器。它使用以下配置启动，该配置允许浏览本地计算机以从编辑器中插入图像...

            tinymce.init({
            selector: '#editor',
            plugins: 'image code',
            menubar: false,
            toolbar: 'link image | bold italic  | alignleft aligncenter alignright alignjustify |',
            image_title: true,
            automatic_uploads: true,
            file_picker_types: 'image',
            file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*'); 
            input.onchange = function () {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function () {
            var id = 'blobid' + (new Date()).getTime();
            var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
            var base64 = reader.result.split(',')[1];
            var blobInfo = blobCache.create(id, file, base64);
            blobCache.add(blobInfo);
            cb(blobInfo.blobUri(), { title: file.name });
            };
            reader.readAsDataURL(file);
            };

            input.click();
            }
            });

步骤1）文件浏览正常步骤2）一旦选择了图像，它将在编辑器内容中设置为base64数据（例如数据： <p>This is image test<img title="tree.png" src="data:image/png;base64,iVBORwiYGXicDLEwMvE4GXJwZeJgI..." alt="" width="90" height="111" /></p>. ）步骤3）我将编辑器的全部html内容保存在DB中。 Step4）在“更新”页面中再次获取并显示数据时，我将编辑器值（数据将以实际方式从数据库中获取）设置为，

                var data =  '<p>This is image test<img title="tree.png" src="data:image/png;base64,iVBORwiYGXicDLEwMvE4GXJwZeJgI..." alt="" width="90" height="111" /></p>';
                tinyMCE.get('editor').setContent(data);

数据的文本内容在编辑器中正确显示，而图像未呈现。

在 Chrome 中，我在浏览器控制台中收到错误消息，为“ data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAAN0AAAERCAIAAABw ... net :: ERR_INVALID_URL” 在 Firefox 中，浏览器控制台没有错误，但编辑器中未显示图像部分 ...我在哪里出错？请指导... TIA

如何在Tinymce编辑器中显示保存的图像？

0 个答案: