使用JS跟踪和更新元素

时间:2017-09-12 17:44:50

标签: javascript dom

很难解决这个问题。我已经使用TinyMCE创建一个WYSIWYG编辑器,以便员工可以从Word复制/粘贴到此程序中以检查错误(即多个h1标头)。

我遇到的问题是他们纠正了突出显示的错误。如何从此元素中删除其set属性或样式?到目前为止,这是我的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);
}

1 个答案:

答案 0 :(得分:1)

您的函数的开头应该重置/删除任何先前设置的错误(删除Red颜色并删除fixIt类。)

然后,该函数可以执行其检查操作,并在需要时重新应用错误。

这使您可以在每次用户进行更改时调用相同的功能。