Блог

Главная - Вопросы по программированию - tinymce применить стиль ко всей строке, например, заголовок, абзац

tinymce применить стиль ко всей строке, например, заголовок, абзац

#select #format #styles #tinymce

#выберите #формат #стили #tinymce

Вопрос:

Я ищу способ применить стиль ко всей строке, например, к поведению заголовка или абзаца по умолчанию в редакторе tinymce.

Более очевидно, что при установке заголовка 1 или абзаца наблюдается странное поведение, когда вся строка курсора автоматически применяет стиль, не выделяя (синим) текст курсором.

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

 editor.addShortcut(
      'meta alt u', 'Add yellow highlight to selected text.', function () {
    tinymce.activeEditor.execCommand('FontSize', 0, '24px');
        
    });

это работает только с выделенным текстом, а не с полной строкой.

Ответ №1:

Разница заключается в том, к чему применяется формат в редакторе.

Некоторые стили являются «встроенными», и вы увидите, как редактор обертывает выделение <span> тегом, чтобы применить форматирование. Другие варианты поведения (например, сделать что-то заголовком) применяются ко всему элементу уровня блока (например <p> , или <div> ).

Параметр style_formats конфигурации предоставляет вам способ указать, как применять стиль. Вот скрипка TinyMCE, которая показывает, как добавлять стили как блочного, так и встроенного уровня:

http://fiddle.tinymce.com/Cthaab

Ключевой параметр конфигурации:

 style_formats: [
  {title: 'Red text - applies inline', inline: 'span', styles: {color: '#ff0000'}},
  {title: 'Red paragraph - applies to block', block: 'p', styles: {color: '#ff0000'}},
]

Вы увидите, что вы можете контролировать, как стиль применяется и к какому тегу. Документация лучше описывает все параметры для style_formats опции: https://www.tiny.cloud/docs/configure/editor-appearance/#style_formats

Скрипка также регистрирует в консоли браузера фактическую команду, которую выполняет TinyMCE, когда применяются эти два примера. Вы, конечно, можете использовать тот же API для самостоятельного применения стилей, но поскольку в редакторе уже есть пользовательский интерфейс для этого, казалось бы, проще использовать существующий пользовательский интерфейс.

Комментарии:

1. спасибо за ваше время и интерес, чтобы помочь мне. Я понимаю, что вы сказали. Но единственная проблема в том, могу ли я применить формат стиля при нажатии ярлыка? существует ярлык для применения заголовка (Alt Shift 3), но мне нужен пользовательский ярлык, например editor.addShortcut()

2. Пожалуйста, ознакомьтесь с этой обновленной скрипкой TinyMCE: fiddle.tinymce.com/Cthaab/1 Я добавил правильный вызов API к кнопке панели инструментов. Вы можете сделать то же самое с помощью меню или сочетания клавиш.

3. Небольшая вещь, можете ли вы сказать мне, как добавить сочетание клавиш, например Shift Alt Y, для доступа к этой кнопке

4. tiny.cloud/docs/api/tinymce/tinymce.editor/#addshortcut

5. Спасибо за это. В моей конфигурации magento tinymce сработало как шарм!!