Добавить собственный класс к выделенному тексту в tinymce V5 - PullRequest
Новая
       59

Добавить собственный класс к выделенному тексту в tinymce V5

0 голосов
/ 18 июня 2020

Я пытаюсь реализовать внутри tinymce настраиваемую кнопку, которая при нажатии добавляла бы класс вокруг выделенного текста.

Я пробовал это: 

editor.ui.registry.addButton('fwnormal', {
    text: 'N',
    class: 'nongras'
});

Но не работает, я получаю сообщение об ошибке Could not find valid *strict* value for "onAction"

Есть идеи, как я могу это сделать?

Ответы [ 3 ]

0 голосов
/ 18 июня 2020

пример 

tinymce.init({
  selector: 'textarea',
  style_formats: [
    {title: 'Class name', selector: 'p', classes: 'myclass'} 
  ]
});

http://fiddle.tinymce.com/Slhaab

0 голосов
/ 22 июня 2020

https://www.tiny.cloud/docs/configure/content-formatting/

Используйте такие коды: 

tinymce.init({
  selector: "#mytextarea",
  tinymce options: ... ,

  toolbar: "add_class",

  setup: function(editor) {
    editor.on("init", function(e) {

      tinymce.activeEditor.formatter.register("new_class", {
        selector: "p,div,h1,h2,h3,h4,h5,h6", // choose elements
        classes: "myclass",
        styles: { ... },
        attributes: { ... },
      });  // close formatter.register

    });  // close editor.on init

    editor.ui.registry.addButton("add_class", {
      tooltip: "new class",
      icon: "edit-block", // look editor-icon-identifiers page
      onAction: function() {
        tinymce.activeEditor.formatter.apply("new_class");
      }
    }); // close registry.addButton

  }, // close setup function

}); // close tinymce.init

Или попробуйте эти коды: 

tinymce.init({
  selector: "#mytextarea",
  tinymce options: ... ,

  toolbar: "add_class",

  setup: function(editor) {

    editor.ui.registry.addButton("add_class", {
      tooltip: "new class",
      icon: "edit-block", // look editor-icon-identifiers page
      onAction: function() {
        var element = tinymce.activeEditor.selection.getNode();
        tinymce.activeEditor.dom.setAttrib(element, "class", "myclass");
      }
    }); // close registry.addButton

  }, // close setup function

}); // close tinymce.init
0 голосов
/ 18 июня 2020

Пользовательские классы задаются в style_formats https://www.tiny.cloud/docs/configure/content-formatting/

...