Нелегко решить это. Я использовал TinyMCE для создания редактора WYSIWYG, чтобы сотрудники могли скопировать/вставить из Word в эту программу, чтобы проверить наличие ошибок (т.е. Несколько заголовков h1).
Проблема, с которой я столкнулась, - это исправление выделенной ошибки. Как удалить свой атрибут или стиль из этого элемента? Вот мой JS, который делает проверку и создает журнал. Я предполагаю, что мне нужно использовать MutationObserver? Я никогда не использовал его и не видел, чтобы найти хорошее объяснение.
function styleGuide(){
var searchInput = tinyMCE.activeEditor.getContent();
document.getElementById('findAllErrors').innerHTML = searchInput;
var resultsLog = document.getElementById('passFailLog');
// search for h1
var h1 = document.querySelectorAll('h1');
var i = 0;
do {
if(h1.length == 0){
resultsLog.innerHTML = "<br /><span class='warning'>You do not have an H1 element.</span>";
}
else if(h1.length > 1){
resultsLog.innerHTML = "<br /><span class='error'>You have more than one H1 element.</span>";
}
else {
resultsLog.innerHTML = "<br /><span class='pass'>You have the correct amount of H1 headers.</span>";
}
//set style for errors
if(i > 0){
h1[i].style.color = "Red";
h1[i].setAttribute("class", "fixIt");
}
i++;
}
while (i < h1.length);
//Update Error Found to Original Editor
var outputUpdate = document.getElementById('findAllErrors').innerHTML;
var mceContent = tinyMCE.activeEditor.getContent();
var errorsFound = outputUpdate.replace(mceContent, outputUpdate);
tinymce.activeEditor.setContent(errorsFound);
}
Начало вашей функции должно сбросить/удалить все ранее установленные ошибки (удаление Red
цвета и удаление класса fixIt
).
Затем функция может выполнять свою операцию проверки и при необходимости повторно применять ошибки.
Это позволяет вам просто вызывать одну и ту же функцию каждый раз, когда пользователь вносит изменения.