Question

我有一个人们发布新闻的网站，它是用PHP编写的。

截至目前，发布故事的人都有文本输入的文本区域和上传故事图像的表单字段。

现在我正在升级网站，我正在考虑给人们更多的灵活性，所以我打算使用javascript WYSIWYG文本编辑器。

在回顾了最流行的，或者至少是我发现谷歌搜索的那些之后，我认为tinyMCE是最好的记录，这就是为什么我认为我会接受它，尽管我刚刚使用它4个左右-5小时，所以我真的不在乎我是否必须切换到另一个编辑器。

当您在textarea中拖放图像时，tinyMCE会在base64中对图像进行编码，并将其用作图像标记的src属性。

我想知道，有没有办法让tinyMCE将图像作为文件上传到服务器，以便我可以用php处理它们（根据我的意愿制作缩略图，名称并存储它们）？

如果没有，是否有编辑可以选择？

Answer 1

还有另一个小型mce插件，它是免费和开源的。你可以使用这个 http://justboil.me/tinymce-images-plugin/

Answer 2

我推荐“Responsive File Manager”

这是一个免费的开源文件管理器和图像管理器，它使用jQuery库，CSS3，PHP和HTML5，提供了一种漂亮而优雅的方式来上传和插入文件，图像和视频。

enter image description here

伟大的功能：

使用简单的拖放功能上传文件下降。
用作独立文件管理器，如TinyMCE，CKEditor或CLEditor插件或作为交叉域。
许多自定义参数，例如自动调整上传大小图像，可选的图像尺寸限制，文件允许列表。
上传图片，视频和音频的完整预览。
自动创建缩略图并在外部更改后自动重新调整缩略图

和......

Answer 3

有一个名为MCImageManager

的付费插件文件管理器

或者您可以将uplodify等集成到添加图像弹出窗口，然后在上传图像时更新tinyMCEImageList.js文件。

Answer 4

这是一个简单的选项，可以使用Plupload直接从工具栏按钮上传TinyMCE中的图像，而无需额外的弹出窗口。注意 - 这允许您使用文件选择器选择文件，但不支持拖放。

添加一个带有ID＆＃39; mybutton＆＃39;的按钮。没有点击事件：

tinymce.init({selector:'.use-tinymce', 
    plugins: "code link visualblocks", 
    menubar: false,
    extended_valid_elements : "span[!class]",
    toolbar: "undo redo | formatselect | link code | mybutton",
    visualblocks_default_state: true,
    setup: function(editor) {
        editor.addButton('mybutton', {
            type: 'button',
            title: 'Insert image',
            icon: 'image',
            id: 'mybutton'
        });
        editor.on('init', function(e) {
            var pluploadHandler = new PluploadHandler(jQuery, plupload);
        });
    }           
});

在Plupload初始化中引用此按钮：

var PluploadHandler = function( $, plupload ) {
    ...
    this.uploader = new plupload.Uploader({
        runtimes : 'html5,flash,silverlight,html4',
        browse_button : document.getElementById('mybutton'),
        url : '/path/to/upload/the/image',

您需要为上传路径/path/to/upload/the/image编写服务器端代码，以保存图片并使用新图片的网址进行回复。

最后捕获上传的回复并将您的图片标记添加到TinyMCE：

    this.uploader.init();
    this.uploader.bind("FilesAdded", handlePluploadFilesAdded);
    this.uploader.bind("FileUploaded", handlePluploadFileUploaded);

    function handlePluploadFilesAdded(up, files) {
        console.log("+ handlePluploadFilesAdded");
        up.start();
    }

    function handlePluploadFileUploaded(up, file, res) {
        console.log("++ res.response: " + JSON.stringify(res.response));
        var img = "<img src='" + res.response + "?" + Date.now() + "'>";
        tinymce.activeEditor.execCommand('mceInsertContent', false, img);
    }
}

这里有完整的源代码（在TinyMCE 4.1.9上测试; Plupload 2.1.2）： https://gist.github.com/danielflippance/e1599fd58ada73b56bfb

Answer 5

试试PDW File Browser。与其网页不同，它非常好（在我看来，直观，因为它提供类似于MS Windows文件资源管理器的GUI）。

tinyMCE - 如何处理图像上传

5 个答案: