javascriptcleditor

cleditor content riddled with <span> tags

I'm using cleditor as my Rich Text Editor of choice in a WordPress plugin.

However, seemingly randomly, it has decided to insert <span class="Apple-style-span"> into my content.

I've done a quick Google and can't find anything for cleditor, but apparently ckeditor had a similar bug on Webkit browsers - both of the content authors on my website use Google Chrome. This has been logged as a bug with webkit.

Does anyone know how to resolve this problem, short of doing a PHP str_replace on save or view of the content?

Here is an example of the output:

<h2 id="notes" class="profile_notes">Notes</h2>
<p>
    <span class="Apple-style-span" style="background-color: rgb(255, 255, 255); ">
        <div>
            This species is assigned the codes A220, A221 and A222 under the DATZ 'A' number system with these referring to similar-looking, possibly conspecific, populations. These differ in some aspects of colour pattern, particularly the orientation of the caudal-fin markings which may be horizontal, vertical, or somewhere inbetween.
        </div>
        <div>
            <br>
        </div>
        <div>
            One population displays an orange colouration on the belly and is sometimes referred to as A. mendezi 'orange' (A222) while another known as A. sp. 'fork-band' or 'gabelband' and collected in the rio Jaú may also represent a form of A. mendezi.
        </div>
        <div>
            <span class="Apple-style-span" style="background-color: rgb(255, 255, 255); ">
                <br>
            </span>
        </div>
            Apistogramma&nbsp;is...
        </div>
    </span>
</p>

Thanks in advance,

Solution

  • This is a "feature" that appears (with different results in different browsers) when the execcommand is called in javascript, helpfully summarized at http://www.quirksmode.org/dom/execCommand.html

    I don't know if this can be circumvented in the browser, but I doubt it. The best approach would be to cut the "offending" HTML classes in the backend using lxml or BeautifulSoup.