1
votes

Impossible de télécharger des photos via le (TinyMCE) en utilisant le plugin de blocage de page laravel voyager

pourquoi je ne peux pas insérer de photos depuis mon ordinateur pour bloquer la page (TinyMCE). Ceux-ci, lors de l'ajout d'une photo, rien ne se passe; cela ne fonctionne que si j'insère un lien avec une photo entrez la description de l'image ici

php laravel voyager tinymce

0 commentaires

3 Réponses :

0
votes

téléchargez le nouvel éditeur TinyMce et écrivez un chemin où vous souhaitez enregistrer l'image dans le fichier ci-dessous tinymce\plugins\filemanager\config.php

Cette solution fonctionne pour moi

5 commentaires

@Maduhri Patel J'ai essayé l'option plugin mais cela ne fonctionne pas, je reçois un problème d'initialisation du plugin.

quelle version de tinymce utilisez-vous?

"pvtl / voyager-frontend": "^ 0.8.5", "pvtl / voyager-page-blocks": "^ 0.8.3", "tcg / voyager": "^ 1.1"

Je reçois ce problème dans le plugin de blocage de page de voyager.

hey link peut vous aider github.com/the-control-group/voyager/ numéros / 2365

1
votes

Ce problème se crée lorsque nous utilisons le plugin de bloc de page dans laravel voyager.i essayez et cette solution fonctionne pour moi

Dans config / voyager.php, ajoutez un fichier JS supplémentaire 'additional_js' => ['js / tinymce.js',],

Créez ensuite votre fichier tinymce.js avec le code suivant (ajustez bien sûr à vos besoins):

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,
  });
}

0 commentaires

1
votes

J'ai essayé la solution ci-dessus mais cela ne correspond pas à mon travail. Parce qu'il réinitialise l'éditeur tinymce et que je ne veux pas le réinitialiser, selon la première réponse de shazim ali

J'ai donc créé le fichier tinymce.js avec le code suivant:

<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>

et j'ai également ajouté un formulaire dans le fichier de vue pvtl du fournisseur.

edit-add.blade.php

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]';

});

ou vous pouvez étendre la vue selon le Documentation Pvtl

0 commentaires