无法使用 laravel voyager 页面阻止插件通过 (TinyMCE) 上传照片

Question

为什么我无法从我的计算机插入照片用于页面块 (TinyMCE)。那些，当添加照片时，没有任何反应；仅当我插入带有照片的 link 时它才有效 enter image description here

Answer 1

下载新的 TinyMce Editor 并写下您要将图像保存到以下文件的路径 tinymce\plugins\filemanager\config.php

这个解决方案对我有用

Answer 2

当我们在 laravel voyager.i 中使用页面块插件时会出现此问题

在config/voyager.php中添加一个额外的JS文件 'additional_js' => ['js/tinymce.js', ],

然后使用以下代码创建 tinymce.js 文件（当然可以根据您的需要进行调整）：

function tinymce_init_callback(editor)
{
  editor.remove();
  editor = null;

  tinymce.init({
    menubar: false,
    selector:'textarea.richTextBox',
    skin_url: $('meta[name="assets-path"]').attr('content')+'?path=js/skins/voyager',
    min_height: 450,
    resize: 'vertical',
    plugins: 'link, image, code, table, textcolor, lists',
    extended_valid_elements : 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
    file_picker_callback: function (cb, value, meta) {
      var input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');

      /*
        Note: In modern browsers input[type="file"] is functional without
        even adding it to the DOM, but that might not be the case in some older
        or quirky browsers like IE, so you might want to add it to the DOM
        just in case, and visually hide it. And do not forget do remove it
        once you do not need it anymore.
      */

      input.onchange = function () {
        var file = this.files[0];

        var reader = new FileReader();
        reader.onload = function () {
          /*
            Note: Now we need to register the blob in TinyMCEs image blob
            registry. In the next release this part hopefully won't be
            necessary, as we are looking to handle it internally.
          */
          var id = 'blobid' + (new Date()).getTime();
          var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
          var base64 = reader.result.split(',')[1];
          var blobInfo = blobCache.create(id, file, base64);
          blobCache.add(blobInfo);

          /* call the callback and populate the Title field with the file name */
          cb(blobInfo.blobUri(), { title: file.name });
        };
        reader.readAsDataURL(file);
      };

      input.click();
    },
    toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table | code',
    convert_urls: false,
    image_caption: true,
    image_title: true,
  });
}

Answer 3

我尝试了上述解决方案，但它不适合我的工作。因为它重新初始化了 tinymce 编辑器，而我不想重新初始化它，根据 shazim ali

的第一个答案

所以我使用以下代码创建 tinymce.js 文件：

function tinymce_setup_callback(editor) {

editor.settings.content_css = "/css/custom_tiny_mce.css?" + new Date().getTime() + "",
    force_br_newlines = true;
editor.settings.image_caption = false;
}

tinyMCE.on('AddEditor', function (e) {
e.editor.settings.plugins = "link, image, code, table, textcolor, lists";
e.editor.settings.toolbar = "styleselect bold italic underline | forecolor backcolor | 
alignleft aligncenter alignright | bullist numlist outdent indent | link image table | 
code | sizeselect | fontselect |  fontsizeselect";

e.editor.settings.image_caption = false;
e.editor.settings.image_title = true;

e.editor.settings.extended_valid_elements = 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]';

});

我也在供应商的 pvtl 视图文件中添加了一个表单。

edit-add.blade.php

<iframe id="form_target" name="form_target" style="display:none"></iframe>
    <form id="my_form" action="{{ route('voyager.upload') }}" target="form_target" method="post" enctype="multipart/form-data" style="width:0px;height:0;overflow:hidden">
        {{ csrf_field() }}
        <input name="image" id="upload_file" type="file" onchange="$('#my_form').submit();this.value='';">
        <input type="hidden" name="type_slug" id="type_slug" value="pages">
    </form>

或者您可以根据Pvtl documentation

扩展视图

无法使用 laravel voyager 页面阻止插件通过 (TinyMCE) 上传照片

Can't upload photos via the (TinyMCE) by using laravel voyager page block plugin

php

tinymce

laravel

voyager