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

Материал из Umicms
Перейти к:навигация, поиск
(🐾)
 
(не показано 7 промежуточных версий 2 участников)
Строка 1: Строка 1:
Начиная с версии '''17 84088''' изменяемый файл /js/cms/wysiwyg/tinymce47/tinymce_custom.js
+
'''Актуально для версии 21'''
  
Для того чтобы отключить модерацию тегов в визуальном редакторе откройте файл \js\tinymce\jscripts\tiny_mce\tinymce_custom.js
+
== Задача ==
и замените его содержимое на следующее:
+
Отключить изменение тегов визуальным редактором.
  
 +
== Решение ==
 +
Добавить нужные элементы в список допустимых элементов.
  
 +
Например, имеется следующий код, который нужно добавить через визуальный редактор:
 +
<source lang="html">
 +
<iframe src="example.com" width="100" height="100" frameborder="0" allow="autoplay;fullscreen" allowfullscreen></iframe>
 +
</source>
 +
Из данного тега редактор автоматически удалит атрибуты frameborder, allow и allowfullscreen, так как посчитает их невалидными.<br>
  
 +
 +
Кастомизацию визуального редактора нужно производить в фале styles/common/js/cms/wysiwyg/tinymce47/tinymce_custom.js.<br>
 +
Для разрешения отдельных атрибутов можно указать их по-отдельности:
 +
<source lang="javascript">
 +
extended_valid_elements : 'iframe[frameborder|allow]'
 +
</source>
 +
А можно разрешить для тега iframe любые атрибуты:
 +
<source lang="javascript">
 +
extended_valid_elements : 'iframe[*]'
 +
</source>
 +
 +
 +
После внесения нужных правок содержимое файла tinymce_custom.js  будет выглядеть следующим образом:
 
<source lang="javascript">
 
<source lang="javascript">
 
window.mceCustomSettings = {
 
window.mceCustomSettings = {
extended_valid_elements :  
+
content_css : '/styles/common/js/cms/wysiwyg/tinymce47/tinymce_custom.css',
"a[*],abbr[*],acronym[*],address[*],applet[*],area[*],article[*],aside[*],audio[*],b[*],base[*],basefont[*],bdi[*],bdo[*],\
+
extended_valid_elements : 'iframe[*]' // элементы можно перечислять через запятую
bgsound[*],big[*],blink[*],blockquote[*],body[*],br[*],button[*],canvas[*],caption[*],center[*],cite[*],code[*],col[*],\
+
};
colgroup[*],command[*],comment[*],datalist[*],dd[*],del[*],details[*],dfn[*],dir[*],div[*],dl[*],dt[*],em[*],embed[*],\
 
fieldset[*],figcaption[*],figure[*],font[*],footer[*],form[*],frame[*],frameset[*],h1[*],h2[*],h3[*],h4[*],h5[*],h6[*],\
 
head[*],header[*],hgroup[*],hr[*],html[*],i[*],iframe[*],img[*],input[*],ins[*],isindex[*],kbd[*],keygen[*],label[*],\
 
legend[*],li[*],link[*],listing[*],map[*],mark[*],marquee[*],menu[*],meta[*],meter[*],multicol[*],nav[*],nobr[*],\
 
noembed[*],noframes[*],noscript[*],object[*],ol[*],optgroup[*],option[*],output[*],p[*],param[*],plaintext[*],pre[*],\
 
progress[*],q[*],rp[*],rt[*],ruby[*],s[*],samp[*],script[*],section[*],select[*],small[*],source[*],spacer[*],span[*],\
 
strike[*],strong[*],style[*],sub[*],summary[*],sup[*],table[*],tbody[*],td[*],textarea[*],tfoot[*],th[*],thead[*],time[*],\
 
title[*],tr[*],track[*],tt[*],u[*],ul[*],var[*],video[*],wbr[*],xmp[*]",
 
content_css : "/css/cms/style.css"
 
 
}
 
}
 
</source>
 
</source>
<br />
 
<br /><strong>UPD:</strong>
 
 
<br />В версиях после 2.8.5.3 адрес файла изменился на \js\cms\wysiwyg\tinymce\jscripts\tiny_mce\tinymce_custom.js<br />В версиях между 2.8.5.3 и 2.8.6.2 надо в файле - \js\cms\wysiwyg\wysiwyg.js, после 30 строки добавить запись - <source lang="javascript">jQuery('<script src="/js/cms/wysiwyg/tinymce/jscripts/tiny_mce/tinymce_custom.js"
 
type="text/javascript" charset="utf-8"></script>').appendTo('head');</source>
 
В версии 2.9.1 данная запись уже существует.
 
  
 +
Для более тонкой настройки редактора можно обратиться к официальной документации: [https://www.tiny.cloud/docs/configure TinyMCE configuration options reference]
 
[[Категория:Решение проблем и ошибок]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]
 
[[Категория:Решение проблем и ошибок]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]]

Текущая версия на 09:39, 2 апреля 2020

Актуально для версии 21

Задача

Отключить изменение тегов визуальным редактором.

Решение

Добавить нужные элементы в список допустимых элементов.

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

<iframe src="example.com" width="100" height="100" frameborder="0" allow="autoplay;fullscreen" allowfullscreen></iframe>

Из данного тега редактор автоматически удалит атрибуты frameborder, allow и allowfullscreen, так как посчитает их невалидными.


Кастомизацию визуального редактора нужно производить в фале styles/common/js/cms/wysiwyg/tinymce47/tinymce_custom.js.
Для разрешения отдельных атрибутов можно указать их по-отдельности:

extended_valid_elements : 'iframe[frameborder|allow]'

А можно разрешить для тега iframe любые атрибуты:

extended_valid_elements : 'iframe[*]'


После внесения нужных правок содержимое файла tinymce_custom.js будет выглядеть следующим образом:

window.mceCustomSettings = {
	content_css : '/styles/common/js/cms/wysiwyg/tinymce47/tinymce_custom.css',
	extended_valid_elements : 'iframe[*]' // элементы можно перечислять через запятую
};
}

Для более тонкой настройки редактора можно обратиться к официальной документации: TinyMCE configuration options reference