13

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

到目前为止，发布故事的人都有一个用于文本输入的文本区域，以及一个用于为故事上传图像的表单字段。

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

在查看了最受欢迎的，或者至少是我在谷歌上找到的那些之后，我认为 tinyMCE 是最好的文档，这就是为什么我认为我会使用它，尽管我已经使用它大约 4-5 小时，所以我真的不在乎是否必须切换到另一个编辑器。

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

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

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

4

5 回答 5

8

我推荐“响应式文件管理器”

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

在此处输入图像描述

伟大的特点：

  1. 只需简单的拖放即可上传文件。
  2. 用作独立文件管理器、TinyMCE、CKEditor 或 CLEditor 插件或跨域。
  3. 许多自定义参数，例如上传图像的自动调整大小、图像尺寸的可选限制、文件允许列表。
  4. 上传图片、视频和音频的完整预览。
  5. 缩略图的自动创建和外部更改后缩略图的自动重新对齐

和 ...

于 2015-06-10T06:00:58.083 回答
7

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

于 2012-06-20T13:46:32.347 回答
3

有一个名为MCImageManager的付费插件文件管理器

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

于 2012-06-20T12:55:13.383 回答
1

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

向 tinymce 添加一个 ID 为“mybutton”且无点击事件的按钮：

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以保存图像并使用新图像的 URL 响应。

最后捕获上传的响应并将您的图像标签添加到 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

于 2015-04-18T05:22:26.347 回答
0

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

于 2012-07-21T13:36:22.800 回答