Отключаем обрезку кода в редакторе TinyMCE

Есть проблема: При вставке javascript кода, или же стилей <style> в наш любимый редактор TinyMCE мы либо вовсе не получим кода, либо получим код в закомментированом виде, который не будет работать.

Результат будет плачевный, любимый нами ролик не будет проигрываться, а эффекты не будут показываться. Во многих современных CMS уже существует настройка отключения обрезки кода, но как быть, где такой функции нет?

На некоторых сайтах есть множество решений, но не одно из них мне не помогало, даже добавление в конфиг ниже написанных настроек не дало результатов, без редактирования кода самого редактора:

cleanup: false,
valid_elements: "*[*]",
extended_valid_elements: "*[*],script[charset|defer|language|src|type],style",
custom_elements: "*[*],script[charset|defer|language|src|type],style",
valid_children: "+body[style],+body[script]",
verify_html: false,
media_strict: false,

На решение данной проблемы я потратил пол дня, и нашёл выход на сайте stackoverflow.com. Пример будет описан для моей версии 4.3.3 (2016-01-14).

При использовании редактора подключается один из файлов: tinymce.js или tinymce.min.js.

На моём редакторе код комментируется в <![CDATA[... Для начала открываем tinymce.js и находим следующее (подобное):

		// Force script into CDATA sections and remove the mce- prefix also add comments around styles
		htmlParser.addNodeFilter('script,style', function(nodes, name) {
			var i = nodes.length, node, value, type;

			function trim(value) {
				/*jshint maxlen:255 */
				/*eslint max-len:0 */
				return value.replace(/(<!--\[CDATA\[|\]\]-->)/g, '\n')
						.replace(/^[\r\n]*|[\r\n]*$/g, '')
						.replace(/^\s*((<!--)?(\s*\/\/)?\s*<!\[CDATA\[|(<!--\s*)?\/\*\s*<!\[CDATA\[\s*\*\/|(\/\/)?\s*<!--|\/\*\s*<!--\s*\*\/)\s*[\r\n]*/gi, '')
						.replace(/\s*(\/\*\s*\]\]>\s*\*\/(-->)?|\s*\/\/\s*\]\]>(-->)?|\/\/\s*(-->)?|\]\]>|\/\*\s*-->\s*\*\/|\s*-->\s*)\s*$/g, '');
			}

			while (i--) {
				node = nodes[i];
				value = node.firstChild ? node.firstChild.value : '';

				if (name === "script") {
					// Remove mce- prefix from script elements and remove default type since the user specified
					// a script element without type attribute
					type = node.attr('type');
					if (type) {
						node.attr('type', type == 'mce-no/type' ? null : type.replace(/^mce\-/, ''));
					}

					if (value.length > 0) {
						node.firstChild.value = '// <![CDATA[\n' + trim(value) + '\n// ]]>';
					}
				} else {
					if (value.length > 0) {
						node.firstChild.value = '<!--\n' + trim(value) + '\n-->';
					}
				}
			}
		});

В коде выше описана функция комментирования javascript кода. При удаления всей функции комментирование исчезает, но появляется другая проблема - mce-no/type, который добавляется в <script type="*">, тем самым не давая исполнять код.

Разбираться дальше я не стал и воспользовался вторым способом, открыл tinymce.min.js и нашёл там фрагмент:

,o.length>0&&(i.firstChild.value="// <![CDATA[\n"+n(o)+"\n// ]]>")

И удалил этот код, для предотвращения добавления тегов комментирования в скрипты.

Кроме того, чтобы стили так же не комментировались, нужно удалить этот код:

&&(i.firstChild.value="<!--\n"+n(o)+"\n-->")

Внимание! При копировании и поиска вышеописанных кодов, выделяйте небольшую часть, т.к. текстовый редактор может не учесть некоторые символы и не найти нужный вам фрагмент, а так же, в разных версиях возможны разные фрагменты, проявите инициативу и внимательность, при удалении фрагментов кода.

Теперь важно не забыть, что настройки, добавленные в конфиг (выше) начнут работать и в сумме описанные действия не дадут вашему коду пропасть из редактора.

• Скачать модифицированный мной tinymce.min.js

• Теги: 
• javascript

Нет опубликованных комментариев.