Question

为什么我无法从计算机中插入用于页面阻止的照片（TinyMCE）。那些，当添加照片时，什么也没发生；仅当我插入带有照片的链接时{@ 3}}

Answer 1

当我们在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 2

我尝试了上述解决方案，但不适合我的工作。根据{{3}}

的第一个答案，因为它重新初始化了tinymce编辑器，并且我不想重新初始化它。

因此，我使用以下代码创建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>

或者您可以根据shazim ali

扩展视图

Answer 3

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

此解决方案对我有用

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

3 个答案: