Question

我想问一下是否有可用的插件可以将图像从我的本地系统上传到tinymce？ Tinymce有图像上传但在线图像。此外，从本地系统上传图像是tinymce的一个先进功能，需要购买。那么，是否有一个免费的插件可以用来集成从本地系统到tinymce的图像上传？谢谢！：）

Answer 1

您可以编写自己的插件并将图像作为base64编码的字符串插入。

示例：您需要从Web获取javascript函数并创建字符串my_image_base64_string（此处已经给出）。该片段显示了之后如何插入图像。使用自己的插件，您将能够创建一个按钮并使用例如弹出窗口。

var my_image_base64_string = 'R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';

tinymce.activeEditor.execCommand('insertHTML', false, '<img src="data:image/gif;base64,' + my_image_base64_string + '" width="16" height="14">');

Answer 2

我在Github上创建了一个插件，允许你上传图像并作为嵌入，在该图像自动转换为Base64数据字符串之后，插件可以在下面的链接中找到： https://github.com/buddyexpress/bdesk_photo

Answer 3

您可以创建自定义按钮：

        tinymce.init({
        selector: `#${this.props.id}`,
        ...
        toolbar: '... uploadimage ...',
        paste_data_images: true,
        setup: 
            ...
            editor.addButton('uploadimage', {
                text: '',
                icon: 'image',
                onclick: this.uploadImage,
            });
        },
    })

和uploadImage函数：

uploadImage() {
    var editor = tinymce.activeEditor;
                // create input element, call modal dialog w
                var fileInput = document.createElement('input');
                fileInput.setAttribute('type', 'file');
                fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
                // if file is submitted run our key code
                fileInput.addEventListener('change', () => {

                    if (fileInput.files != null && fileInput.files[0] != null) {
                        // create instance of FileReader()
                        let reader = new FileReader();
                        // create event triggered after successful reading operation
                        reader.onload = (e) => {
                            // insert content in TinyMCE
                            editor.insertContent('<img src="' + e.target.result + '">');
                            fileInput.value = '';
                        };
                        reader.readAsDataURL(fileInput.files[0]);
                    }
                });
        fileInput.click()
    }

此后，您应该在编辑器中看到base64映像。

将图像（本地）上传到Tinymce

3 个答案: