Question

我查看了tinyMCE文档，但无法通过拖放 OR 上传/浏览按钮获得完整工作脚本以在文本编辑器中上传图像。

我现在使用的是：

<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启用或上传图像？

Answer 1

您的服务器上需要PHP，并且需要“postAcceptor.php”＃39;那里处理图片上传。

Answer 2

我首先要查看浏览器的控制台，看看是否有任何与尝试调用PHP文件相关的错误 - 如果没有调用PHP文件，那么图像肯定不会成为保存。

假设实际调用了PHP文件，我将开始向该PHP文件添加调试...

确保将其称为
确保$ _POST变量包含图像
弄清楚它实际上对发布的图片做了什么。

关于TinyMCE图片上传过程的一些背景知识......

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

images_upload_url（你必须创建）中引用的URL处的图像处理程序必须做任何需要做的事情来存储＆＃34;应用程序中的图像。这可能意味着：

将项目存储在Web服务器上的文件夹中
将项目存储在数据库中
将项目存储在资产管理系统中

...无论您选择存储图像的位置，您的图像处理程序都需要返回一行JSON，告诉TinyMCE图像的新位置。如TinyMCE文档中所述，这可能如下所示：

{location：＆＃39; /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知道您的内容中何时存在嵌入式图像，但它可能无法知道在您的应用程序上下文中如何处理该图像以便该作业（＆＃34;图像处理程序＆＃34;）是你必须创造的东西。

Answer 3

最简单的方法（比postAcceptor.php更简单）在tinymce.init内部将image添加到插件和工具栏后添加：

image_advtab: true,
file_picker_callback: function(callback, value, meta) {
  if (meta.filetype == 'image') {
    $('#upload').trigger('click');
    $('#upload').on('change', function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        callback(e.target.result, {
          alt: ''
        });
      };
      reader.readAsDataURL(file);
    });
  }
},

并添加

<input name="image" type="file" id="upload" class="hidden" onchange="">

tinymce的textarea标签之后

如何使用TinyMCE上传图像？

3 个答案: