Подключение плагинов в TinyMCE — различия между версиями
Whoa (обсуждение | вклад) |
Denisov (обсуждение | вклад) |
||
(не показано 11 промежуточных версий этого же участника) | |||
Строка 3: | Строка 3: | ||
== Задача == | == Задача == | ||
− | Иногда возникает необходимость расширить или уменьшить функциональность визуального редактора TinyMCE | + | Иногда возникает необходимость расширить или уменьшить функциональность визуального редактора TinyMCE. |
== Решение == | == Решение == | ||
− | + | Можно подключить один или несколько плагинов в файл /js/cms/wysiwyg/tinymce47/tinymce_custom.js, для этого потребуется добавить свойство plugins с массивом используемых плагинов в качестве значения. | |
+ | Полный список плагинов для tinymce вы можете посмотреть здесь[https://www.tiny.cloud/docs-3x/reference/TinyMCE3x@Plugins/]. | ||
− | Например, нам необходимо в визуальном редакторе использовать такие теги, как <html>, <head>, <body> или <style>, тогда в | + | Например, нам необходимо в визуальном редакторе использовать такие теги, как <html>, <head>, <body> или <style>, тогда в массив плагинов необходимо добавить плагин fullpage. |
+ | Настройки в файле tinymce_custom.js заменяют исходные настройки, поэтому необходимо взять все плагины, которые используются, и добавить к ним нужный нам плагин fullpage. | ||
Тогда JS код в файле tinymce_custom.js будет выглядеть следующим образом: | Тогда JS код в файле tinymce_custom.js будет выглядеть следующим образом: | ||
Строка 17: | Строка 19: | ||
// Файл с кастомным CSS | // Файл с кастомным CSS | ||
// @link https://www.tinymce.com/docs/configure/content-appearance/#content_css | // @link https://www.tinymce.com/docs/configure/content-appearance/#content_css | ||
− | content_css : '/js/cms/wysiwyg/tinymce47/tinymce_custom.css' | + | content_css : '/js/cms/wysiwyg/tinymce47/tinymce_custom.css', |
− | plugins: ["fullpage", "anchor", "advlist", "charmap", "codemirror", "contextmenu", "fullscreen", "image", "link", "lists", "media", "paste", "searchreplace", "table", "textcolor", "visualchars"] | + | plugins: ["fullpage", "anchor", "advlist", "charmap", "codemirror", "contextmenu", "fullscreen", "image", "link", "lists", "media", "paste", "searchreplace", "table", "textcolor", "visualchars"] |
}; | }; | ||
</source> | </source> | ||
− | + | ---- | |
+ | |||
+ | Если нужно добавить возможность использования какого-либо определенного тега, например, <style>, то можно добавить свойство '''valid_children''' со значением '''"+body[style]"'''. | ||
+ | |||
+ | '''Valid_children''' позволяет вам контролировать, какие дочерние элементы могут существовать в каких родительских элементах. | ||
+ | |||
+ | Тогда JS код в файле tinymce_custom.js будет выглядеть следующим образом: | ||
+ | <source lang="javascript"> | ||
+ | window.mceCustomSettings = { | ||
+ | // Файл с кастомным CSS | ||
+ | // @link https://www.tinymce.com/docs/configure/content-appearance/#content_css | ||
+ | content_css : '/js/cms/wysiwyg/tinymce47/tinymce_custom.css', | ||
+ | valid_children : "+body[style]" | ||
+ | }; | ||
+ | </source> | ||
[[Категория:Решение проблем и ошибок]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]] | [[Категория:Решение проблем и ошибок]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]] |
Текущая версия на 14:13, 27 ноября 2019
Актуально для версии 20.
Задача
Иногда возникает необходимость расширить или уменьшить функциональность визуального редактора TinyMCE.
Решение
Можно подключить один или несколько плагинов в файл /js/cms/wysiwyg/tinymce47/tinymce_custom.js, для этого потребуется добавить свойство plugins с массивом используемых плагинов в качестве значения. Полный список плагинов для tinymce вы можете посмотреть здесь[1].
Например, нам необходимо в визуальном редакторе использовать такие теги, как <html>, <head>, <body> или <style>, тогда в массив плагинов необходимо добавить плагин fullpage. Настройки в файле tinymce_custom.js заменяют исходные настройки, поэтому необходимо взять все плагины, которые используются, и добавить к ним нужный нам плагин fullpage.
Тогда JS код в файле tinymce_custom.js будет выглядеть следующим образом:
window.mceCustomSettings = {
// Файл с кастомным CSS
// @link https://www.tinymce.com/docs/configure/content-appearance/#content_css
content_css : '/js/cms/wysiwyg/tinymce47/tinymce_custom.css',
plugins: ["fullpage", "anchor", "advlist", "charmap", "codemirror", "contextmenu", "fullscreen", "image", "link", "lists", "media", "paste", "searchreplace", "table", "textcolor", "visualchars"]
};
Если нужно добавить возможность использования какого-либо определенного тега, например, <style>, то можно добавить свойство valid_children со значением "+body[style]".
Valid_children позволяет вам контролировать, какие дочерние элементы могут существовать в каких родительских элементах.
Тогда JS код в файле tinymce_custom.js будет выглядеть следующим образом:
window.mceCustomSettings = {
// Файл с кастомным CSS
// @link https://www.tinymce.com/docs/configure/content-appearance/#content_css
content_css : '/js/cms/wysiwyg/tinymce47/tinymce_custom.css',
valid_children : "+body[style]"
};