如何使用TinyMCE上传图像？

我检查了tinyMCE文档，但无法获得完整的工作脚本，通过拖放文本编辑器上传图像或上传/浏览按钮。如何使用TinyMCE上传图像？

我现在使用的波纹管：

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script> 
<script> 
tinymce.init({ 
    selector: "textarea", 
    relative_urls : true, 
    remove_script_host : false, 
    convert_urls : true, 
    default_link_target:"_blank", 
    images_upload_base_path: '../images/tinymce', 
    automatic_uploads: true, 
    file_browser_callback_types: 'file image media', 
    images_upload_url: 'postAcceptor.php', 

    plugins: [ 
    "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", 
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
    "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern" 
    ], 

    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", 
    toolbar2: "image | media | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor code | insertdatetime preview | forecolor backcolor", 
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", 
//image, media from toolbar2 
    menubar: false, 
    toolbar_items_size: 'small', 
    height: 300, 
    style_formats: [{ 
    title: 'Bold text', 
    inline: 'b' 
    }, { 
    title: 'Red text', 
    inline: 'span', 
    styles: { 
     color: '#ff0000' 
    } 
    }, { 
    title: 'Red header', 
    block: 'h1', 
    styles: { 
     color: '#ff0000' 
    } 
    }, { 
    title: 'Example 1', 
    inline: 'span', 
    classes: 'example1' 
    }, { 
    title: 'Example 2', 
    inline: 'span', 
    classes: 'example2' 
    }, { 
    title: 'Table styles' 
    }, { 
    title: 'Table row 1', 
    selector: 'tr', 
    classes: 'tablerow1' 
    }], 

    templates: [{ 
    title: 'Test template 1', 
    content: 'Test 1' 
    }, { 
    title: 'Test template 2', 
    content: 'Test 2' 
    }], 
    content_css: [ 
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
    '//www.tinymce.com/css/codepen.min.css', 
    "dist/css/AdminLTE.min.css", 
    ] 
}); 
</script>

你能告诉我怎样才能启用或利用TinyMCE的上传图片？

来源

2016-05-07 shibbir ahmed

您需要处理/保存上传图像的服务器端脚本。 –

我已经有它 –

您需要在您的服务器上使用PHP，并且您需要'postAcceptor.php'来处理图片上传。

来源

2016-05-07 17:18:17

我有代码 –

代码的PHP文件然后你需要开始调试该文件，记录/转储请求开始。 POST中会发生什么？任何错误？ –

我会先从浏览器的控制台中查看是否有任何与尝试调用PHP文件相关的错误 - 如果PHP文件未被调用，则该图像肯定不会被保存。

假设PHP文件实际上是被调用时，我就开始添加调试到PHP文件...

确保其被称为
确保$ _ POST变量包含图像
找出它实际上对发布的图像做了什么。

上TinyMCE的图像上传过程中的一些背景...

的基本过程是，TinyMCE的，将为您使用图像编辑器修改图像每一个单独的HTTP POST。它会根据init中images_upload_url选项的设置将该图像发送到您选择的URL（通过HTTP POST）。

images_upload_url（您必须创建）中引用的URL处的图像处理程序必须执行任何需要将图像“存储”到应用程序中的操作。这可能意味着是这样的：一个文件夹中

存储项Web服务器
存储该项目上的数据库中
存放在资产管理系统

的项目.. 。无论您选择存储图像的位置，您的图像处理程序需要返回一行JSON，以告知TinyMCE图像的新位置。由于TinyMCE的文档中引用这可能看起来像：

{位置：“/uploaded/image/path/image.png”}

TinyMCE的，然后将更新图像的src属性来回报您的价值。如果您在init中使用images_upload_base_path setting，那么它将被预置到返回的位置。 TinyMCE的页面已对所有的更多细节：

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

这里净是当嵌入图像中的内容存在，但它不可能知道如何处理在该图像做到这一点TinyMCE的知道应用程序的上下文，以便作业（“图像处理程序”）是您必须创建的。

来源

2016-05-09 15:30:32

如何使用TinyMCE上传图像？

回答

相关问题