Подключение плагинов в TinyMCE — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Отмена правки 9029, сделанной Vitaliks (обсуждение))
(Метка: отмена)
 
(не показано 12 промежуточных версий 2 участников)
Строка 3: Строка 3:
 
== Задача ==
 
== Задача ==
  
Иногда возникает необходимость расширить или уменьшить функциональность визуального редактора TinyMCE при помощи изменения подключенных плагинов.  
+
Иногда возникает необходимость расширить или уменьшить функциональность визуального редактора TinyMCE.  
  
 
== Решение ==  
 
== Решение ==  
  
Для решения данной задачи нужно в конфигурационном файле /js/cms/wysiwyg/tinymce47/tinymce_custom.js добавить параметр plugins с массивом используемых плагинов.
+
Можно подключить один или несколько плагинов в файл /js/cms/wysiwyg/tinymce47/tinymce_custom.js, для этого потребуется добавить свойство plugins с массивом используемых плагинов в качестве значения.
 +
Полный список плагинов для tinymce вы можете посмотреть здесь[https://www.tiny.cloud/docs-3x/reference/TinyMCE3x@Plugins/].
  
Например нам необходимо в визуальном редакторе использовать такие теги как <html>, <head>, <body> или <style> тогда в список плагинов необходимо добавить плагин fullpage.
+
Например, нам необходимо в визуальном редакторе использовать такие теги, как <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>
  
Настройки в файле tinymce_custom.js заменяют исходные настройки поэтому необходимо взять все плагины которые используются и добавить к ним нужный нам плагин fullpage.
+
----
 +
 
 +
Если нужно добавить возможность использования какого-либо определенного тега, например, <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]"
};