html - 将图像（本地）上传到 Tinymce

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 图像。