Javascript tinyMCE - 如何处理图片上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11119854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
tinyMCE - how to handle image uploads
提问by ppp
I have a site where people post news, it is written in PHP.
我有一个人们发布新闻的网站，它是用 PHP 编写的。
Up to now, people who post stories had a textarea for the text input, and a form field to upload an image for the story.
到目前为止，发布故事的人都有一个用于文本输入的文本区域，以及一个用于上传故事图像的表单字段。
Now I am upgrading the site, and I am considering giving people more flexibility, so I plan to use a javascript WYSIWYG text editor.
现在我正在升级网站，我正在考虑给人们更多的灵活性，所以我计划使用 javascript 所见即所得文本编辑器。
After reviewing the most popoular, or at least the ones I found googling, I think tinyMCE is the best documented and thats why I think I'm going to go with it, though I've just worked with it for around 4-5 hours, so I don't really care if I'll have to switch to another editor.
在查看了最受欢迎的，或者至少是我在谷歌搜索中发现的那些之后，我认为 tinyMCE 是最好的记录，这就是为什么我认为我会继续使用它，尽管我刚刚使用它大约 4-5 个小时，所以我真的不在乎我是否必须切换到另一个编辑器。
When you drag-drop images in the textarea, tinyMCE encodes the image in base64 and uses it as the src attribute for the image tag.
当您在 textarea 中拖放图像时，tinyMCE 以 base64 对图像进行编码，并将其用作图像标签的 src 属性。
I was wondering, is there a way to make tinyMCE upload the images to the server as files so that I can handle them with php (make thumbnails, name and store them as I wish)?
我想知道，有没有办法让 tinyMCE 将图像作为文件上传到服务器，以便我可以用 php 处理它们（制作缩略图、命名并按照我的意愿存储它们）？
If not, is there an editor where that would be an option?
如果没有，是否有可以选择的编辑器？
采纳答案by Abhishek
There is another plugin for tiny mce which is free and open source. You can use this
http://justboil.me/tinymce-images-plugin/
tiny mce 还有另一个插件，它是免费和开源的。你可以使用这个
http://justboil.me/tinymce-images-plugin/
回答by Milad Safaei
I recommend "Responsive File Manager"
我推荐“响应式文件管理器”
Which is a free open-source file manager and image manager made with the jQuery library, CSS3, PHP and HTML5 that offers a nice and elegant way to upload and insert files, images and videos.
这是一个免费的开源文件管理器和图像管理器，由 jQuery 库、CSS3、PHP 和 HTML5 组成，提供了一种漂亮而优雅的上传和插入文件、图像和视频的方式。
GREAT FEATURES :
很棒的功能：
- Upload files with a simple drag & drop.
- Use as stand-alone file manager, as TinyMCE, CKEditor or CLEditor plugin or as crossdomain.
- Many customisation parameters such as Automatic resizing of uploaded images, Optional limiting of image dimensions, Files allowed lists.
- Full preview of uploaded images, videos and audios.
- Automatic creation of thumbnails and Automatic realignment of thumbnails after external changes
- 通过简单的拖放上传文件。
- 用作独立文件管理器、TinyMCE、CKEditor 或 CLEditor 插件或跨域。
- 许多自定义参数，例如上传图像的自动调整大小、图像尺寸的可选限制、允许的文件列表。
- 上传图片、视频和音频的完整预览。
- 自动创建缩略图并在外部更改后自动重新对齐缩略图
and ...
和 ...
回答by Lawrence Cherone
There is a paid plugin file manager called MCImageManager
有一个名为MCImageManager的付费插件文件管理器
Or you could integrate uplodify or such into the add image popup, then when an image is uploaded update the tinyMCEImageList.js file.
或者您可以将 uplodify 等集成到添加图像弹出窗口中，然后在上传图像时更新 tinyMCEImageList.js 文件。
回答by Daniel Flippance
Here's a simple option for uploading images from TinyMCE directly from a toolbar button using Plupload without needing additional popup windows. Note - this allows you to select the file using your file picker but doesn't support drag drop.
这是一个使用 Plupload 直接从工具栏按钮从 TinyMCE 上传图像的简单选项，无需额外的弹出窗口。注意 - 这允许您使用文件选择器选择文件，但不支持拖放。
Add a button to tinymce with an ID 'mybutton' and no click event:
向 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);
});
}
});
Reference this button in the Plupload initialization:
在 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',
You'll need to write the server side code for your upload path /path/to/upload/the/imageto save the image and respond with the URL to the new image.
您需要为上传路径编写服务器端代码/path/to/upload/the/image以保存图像并使用 URL 响应新图像。
Lastly catch the uploaded response and add your image tag to TinyMCE:
最后捕获上传的响应并将您的图像标签添加到 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);
}
}
Full source code is here (Tested on TinyMCE 4.1.9; Plupload 2.1.2): https://gist.github.com/danielflippance/e1599fd58ada73b56bfb
完整源代码在这里（在 TinyMCE 4.1.9 上测试；Plupload 2.1.2）：https://gist.github.com/danielflippance/e1599fd58ada73b56bfb
回答by Ond?ej Bouda
Try PDW File Browser. Unlike its web page, it is really good (and intuitive, in my opinion, since it offers GUI similar to MS Windows File Explorer).
试试PDW 文件浏览器。与它的网页不同，它非常好（而且在我看来很直观，因为它提供了类似于 MS Windows 文件资源管理器的 GUI）。
