Настройка TinyMCE в редакторе Rich Text Editor в JIRA

Уровень опыта

Продвинутый

Временная оценка

15 мин

Приложение Atlassian

JIRA 7.3+

Обзор функций

Если вы прочитали эти два учебника: Учебник - Написание плагина для Rich Text Editor в JIRA и учебном пособии - Настройка Rich Text Editor в JIRA, вы узнаете, как добавить новые функции в Rich Text Editor. После прочтения этого руководства вы узнаете, как настроить параметры в основном редакторе TinyMCE. Предположим, вы хотите разрешить печатать заголовки, похожие на уценку. Конечный результат:

РИСУНКИ с видео роликами

Давайте погрузимся в детали.

Создание файла с логикой настройки

Листинг markdown-headings.js


require(["jira/editor/customizer"], function (EditorCustomizer) {
    EditorCustomizer.customizeSettings(function (tinymceSettings, tinymce, SchemaBuilder) {
        if (tinymceSettings.plugins.indexOf('textpattern') === -1) {
            tinymceSettings.plugins.push('textpattern');
        }

        tinymceSettings.textpattern_patterns = tinymceSettings.textpattern_patterns || [];

        Array.prototype.push.apply(tinymceSettings.textpattern_patterns, [
            {start: '#', format: 'h1'},
            {start: '##', format: 'h2'},
            {start: '###', format: 'h3'}
        ]);
    });
});

Что происходит в коде?

  • Во-первых,require  jira / editor / customizer, который позволяет нам изменять настройки TinyMCE с помощью метода customizeSettings.
  • Данная функция обратного вызова function (tinymceSettings, tinymce, SchemaBuilder) {...} будет вызываться до инициализации экземпляра редактора TinyMCE.Мы можем использовать три параметра:
  • объект tinymceSettings, который используется для инициализации экземпляра редактора TinyMCE: tinymce.init (tinymceSettings);

(подробнее см. документацию TinyMCE)

  •  tinymce Основной объект TinyMCE, который мы можем использовать, например, для добавления нового плагина TinyMCE

(некоторые примеры приведены в этой части документации TinyMCE)

 

  • Редактор Rich Text Editor SchemaBuilder контролирует параметры схемы, связанные с TinyMCE, такие как schema, valid_elements, valid_children или custom_elements, потому что только подмножество HTML поддерживается форматом Wiki Markup, который используется в качестве формата хранения в JIRA. Этот параметр подробно рассмотрен на следующей странице: Учебное пособие - Настройка редактора Rich Text в JIRA.
  • Внутри тела обратного вызова мы добавляем * textpattern * TinyMCE-плагин, если он еще не существует, и мы настраиваем этот плагин в соответствии с его спецификацией.

Загрузка файла в контекст редактора

Листинг atlassian-plugin.xml


<web-resource key="customizations" name="JIRA Editor Reference Plugin Customizations">
    <context>jira.rich.editor</context>

    <resource type="download" name="js/markdown-headings.js" location="js/markdown-headings.js"/>
</web-resource>

Вот и все! (улыбка)

Ссылки

Исходный код исходного плагина: bitbucket.org/atlassian/jira-editor-ref-plugin/overview

Документация TinyMCE: www.tinymce.com/docs/

По материалам Atlassian JIRA  Server Developer Customizing the TinyMCE within Rich Text Editor in JIRA