Чтобы ограничить ввод заголовков в TinyMCE в сочетании с Vue.js, вам потребуется использовать настройки плагина и выполнить несколько дополнительных шагов.
Первым шагом будет настройка TinyMCE с помощью опций плагина valid_elements и valid_children, которые определяют разрешенные теги и их дочерние элементы. Например, чтобы ограничить заголовки до <h1> и <h2>, вы можете установить следующие опции:
tinymce.init({
// ... другие настройки ...
valid_elements: 'h1,h2',
valid_children: '+body[h1,h2]',
// ... другие настройки ...
});
В этом примере мы указали, что разрешены только теги <h1> и <h2>, а внутри тегов <h1> и <h2> разрешены только теги <body>. Это предотвратит ввод других заголовков или элементов внутри заголовка.
Вторым шагом будет добавление валидации в вашем Vue.js компоненте. Вы можете добавить функцию, которая будет проверять содержимое TinyMCE при отправке формы или редактировании значения. Например, вы можете добавить следующую функцию в вашем компоненте:
methods: {
validateTinyMCEContent() {
const content = tinymce.get('editor-id').getContent();
const regex = /<(?!/?(h1|h2)[s>]).*?>/gi;
if (regex.test(content)) {
// Обнаружено недопустимое содержимое
return false;
} else {
// Содержимое прошло валидацию
return true;
}
},
// ... другие методы ...
}
В этом примере мы извлекаем содержимое TinyMCE с помощью метода getContent() и затем используем регулярное выражение, чтобы проверить, нет ли недопустимых тегов (за исключением <h1> и <h2>). Если обнаружено недопустимое содержимое, функция возвращает false, что может быть использовано для предотвращения отправки формы или ввода значений.
Не забудьте указать ID редактора TinyMCE в методе tinymce.get('editor-id').getContent(), заменив 'editor-id' на реальный ID вашего редактора.
Таким образом, вы можете использовать как настройки TinyMCE, так и валидацию в компоненте Vue.js для ограничения ввода заголовков в TinyMCE.