Свой div добавить в TinyMCE Rich Text Editor

Здравствуйте, а есть пошаговая инструкция как внедрить в TinyMCE Rich Text Editor, какой-нибудь свой div class для быстрой вставки в редакторе. Выделил текст, нажал заготовленный текст и он обернулся сам в него…

2022-08-20-18-50-47
Игорь
Игорь
20 августа 2022, 14:55
modx.pro
2 068
0

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

    Игорь
    Игорь
    20 августа 2022, 21:10
    0
    не удалось

    вроде все сделал.
    вот тут не понял, где взять tinymcerte.toolbar1:

    3) Переходим в Системные настройки > Пространство имен tinymcerte и указываем следующие параметры в tinymcerte.plugins добавляем название плагина, в нашем примере mxs_mce_plugin в tinymcerte.toolbar1 добавляем work_desc название кнопки

    там нет tinymcerte.toolbar1

    2022-08-21-1-04-45
      Алексей Смирнов
      Алексей Смирнов
      21 августа 2022, 09:08
      +2
      Просто пересчелкните на 2ю страницу… И там все есть.
        Игорь
        Игорь
        21 августа 2022, 15:06
        0
        Спасибо, точно, теперь увидел.
        но все равно не срабатывает

        все делаю по инструкции

        2022-08-21-19-02-14 2022-08-21-19-03-46 2022-08-21-19-04-15 2022-08-21-18-57-08
          Гарри
          Гарри
          21 августа 2022, 18:22
          +2
          tinymcerte-2.0.5-pl использует TinyMCE v5 (версию 5). Связанный пример относится к версии 4.
          Новый синтаксис:
          tinymce.PluginManager.add('mxs_mce_plugin', function(editor, url) {
	editor.ui.registry.addButton('work_desc', {
		text: 'Work desc',
		onAction: function() {
			editor.insertContent('<div class="work__desc"><p>Тут описание</p></div>');
		}
	});
});
            Игорь
            Игорь
            21 августа 2022, 19:39
            0
            спасибо за ответы
              Игорь
              Игорь
              21 августа 2022, 19:40
              0
              а тут можно сделать что б выделенный текст сразу помещался в заданный кусок html кода?
                Гарри
                Гарри
                21 августа 2022, 22:16
                +1 
                editor.selection.setContent('<div class="work__desc"><p>' + editor.selection.getContent() + '</p></div>');
                  Игорь
                  Игорь
                  22 августа 2022, 12:27
                  0 
                  tinymce.PluginManager.add('mxs_mce_plugin', function(editor, url) {
	editor.ui.registry.addButton('work_desc', {
		text: 'Work desc',
		onAction: function() {
			//editor.insertContent('<div class="work__desc"><p>Тут описание</p></div>');
			editor.selection.setContent('<div class="work__desc"><p>' + editor.selection.getContent() + '</p></div>');
		}
	});
});
                  Выделенный текст (например мне надо столбик текста обернуть в , текст заменяеся на «тут описание».
                    Игорь
                    Игорь
                    24 августа 2022, 20:58
                    0
                    не получается. все равно текст заменяется на «тут описание»
                      Гарри
                      Гарри
                      24 августа 2022, 22:33
                      +1
                      Очистите кеш браузера, чтобы загрузить текущую версию файла плагина.
                        Игорь
                        Игорь
                        25 августа 2022, 11:48
                        0
                        Спасибо вам огромное! очистил Кеш и заработало! Вопрос решен!!!
                          Игорь
                          Игорь
                          25 августа 2022, 13:25
                          0
                          Не могу теперь эту кнопку переименовать, вставить в нее другой html, даже удаляю
                          assets/components/tinymcerte/js/vendor/tinymce/plugins/mxs_mce_plugin/plugin.min.js
                          файл все равно доступен по адресу. Чистил кэши в панели, браузера, инкогнито пробовал…
          Игорь
          Игорь
          20 августа 2022, 21:23
          0
          Пытался еще пойти другим путем, нашел статью, там описывается так:
          2022-08-21-1-20-06

          но я не увидел у себя assets/components/tinymcerte/tinymcerte/js/external-config.json
          этот файл external-config.json его нет нигде!!!
          установлен пакет tinymcerte-2.0.5-pl
            Игорь
            Игорь
            21 августа 2022, 15:34
            0
            Наконец-то нашел нормальную пошаговую инструкцию с объяснением человеческим

            ссылка www.pandoge.com/stati-i-sovety/otobrazhaem-knopki-upravleniya-tablicami-v-vizualnom-redaktore-tinymce-v-modx-revo инструкция в самом конце была.

            Эта инструкция относится для Modx Revo. Речь пойдет о текстовом редакторе TinyMCE Rich Text Editor.

            На днях, ознакомился с данной статьей и появилась идея. Идея в том, что мне часто необходимо вставлять готовые текстовые/медиа блоки между абзацами когда добавляю статьи в блоге.

            Каждый раз, копировать код или искать чанк, и потом вставлять в контент, не удобно и требует времени.

            Когда начал изучать текстовый редактор TinyMCE для Modx Revo, узнал, что он больше не поддерживается разработчиками и решил заменить его на TinyMCE Rich Text Editor.

            И начал разбираться, как включить или добавить необходимые плагины/кнопки в текстовый редактор TinyMCE Rich Text Editor в Modx Revolution.

            И так, начнем.

            1. Устанавливаем TinyMCE Rich Text Editor.

            2. Заходим в настройки TinyMCE Rich Text Editor. Для этого, заходим в Системные настройки (находится в правом углу админки).

            3. В пространстве имен skr.sh/sFFx07nlKhu?a выбираем tinymcerte. Откроются настройки.

            4. Находим «Плагины» в списке настроек. skr.sh/sFFfa3NbIys?a. В значениях два раза кликаем мышкой. Вставляем курсор в конце и обязательно вставляем пробел и пишем template. Нажимаем Enter.

            5. На той же странице настроек, находим Раздел Панель инструментов 1 skr.sh/sFFcgTOuWvt?a и в значениях 2 раза кликаем мышкой и в конце строки вставляем пробел | template и нажимаем Enter.

            6. Далее, открываем Notepad++ или любой другой текстовый редактор в компьютер (например, Блокнот) и пишем следующий код:

            {
	"templates": [{
		"title": "Some title 1",
		"description": "Some desc 1",
		"content": "[[$chunkname]]"
	}, {
		"title": "Some title 2",
		"description": "Some desc 2",
		"url": "../assets/components/tinymcerte/templates/template-name.html"
	}]
}
            и сохраняем файл с названием external-config.json в директории /assets/components/tinymcerte/tinymcerte/js/.

            7. В настройках в Поиск по ключу вводим tinymcerte.external_config (скриншот) skr.sh/sFFsNtBYYCy?a

            и в значение относительный путь к файлу external-config.json. В нашем случае, это ../assets/components/tinymcerte/tinymcerte/js/external-config.json. Жмем Enter.

            На всякий случай, чистим кэш и проверяем как работает новый визуальный редактор.
              Гарри
              Гарри
              24 августа 2022, 22:37
              0 
              {
	"templates": [{
		"title": "Replace content template",
		"description": "This template includes a button, and the label of the button will be replaced on insert.",
		"content": "<button class=\"button\"><span class=\"content-replacement\">[selected content will insert here]</span></button>"
	}],
	"template_selected_content_classes": "content-replacement"
}
              Документация TinyMCE
              Игорь
              Игорь
              21 августа 2022, 19:38
              0
              2022-08-21-23-34-38

              Вот самое нужное, это как сделать клон 
              <blockquote></blockquote>
              , назвать его 
              <blockquote-info></blockquote-info>
              и сделать отдельный стиль, но как не понятно… Удобно когда выделяешь блок текста, и назначаешь «цитирование» и текст оборачивается сразу…
                Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                17