Narzędzia użytkownika

Narzędzia witryny


tinymce

Inicjacja edytora JS

function mce(h = 400, p = 2, tt) {
  return new Promise((resolve, reject) => {
    var editor = tinymce.init({
      selector: "textarea.tmce",
      language: "pl",
      height: h,
      promotion: false,
      auto_focus: true,
      plugins:
        "preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion",
      editimage_cors_hosts: ["picsum.photos"],
      menubar: "file edit view insert format tools table help",
      toolbar:
        "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",
      content_css: "/js/tinymce/style.css",
      templates: '/sm/tmce',
      setup: function (editor) {
        resolve(editor);
      }
    });
  });
}

W formularzu

 <?= $form->field($model, 'tresc')->textarea(['class' => 'tmce']) ?>
<?php
$this->registerJs("
var editor = mce(400,2).then((editor) => {
    editor.on('init', function () {
        $('#xx').on('click',function(){
            editor.execCommand('mceInsertContent', false, 'Wstawiany tekst'); // wstawia tekst po kliknięciu zewnętrznego przycisku
        });
    });
  });
");

Wstawienie do edytora pobranej treści

 $.get('/mail-tresc/tresc?id=' + $('.szabl').val(),function(data){
     $('.tmce').val(data); // potrzebne jeśli pole jest required
     tinymce.activeEditor.setContent(data);
 });

Edytor w modalu bootstrap

Dla poprawnego działania wymagany jest kod JS:

$this->registerJs("
    $('#myModal').on('hidden.bs.modal', function () {
        tinymce.remove();
    });
 
    $(document).on('focusin', function(e) {
        if ($(e.target).closest('.tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root').length) {
           e.stopImmediatePropagation();
        }
      });
 
");
tinymce.txt · ostatnio zmienione: 2024/09/15 16:22 przez 127.0.0.1