1

Topic: Probs with setContent()

Hi all,

I just wrote me a little code sweeper plugin that is able to clean out the code on specific elements. There are some options the user can choose to sweep out of his HTML code within the tiny editor area:

HTML - deletes all HTML elements
word - should delete all word markups
css - deletes all styles
font - deletes all font tags and their attributes
span - delets all span tags and their attributes

This all works just fine with the following code:

var content = tinyMCE.activeEditor.selection.getContent({format : 'html'});
    var act;
    var btn = document.forms["details"].elements["act"];
    for (i=0; i<btn.length; i++) {
        if (btn[i].checked) act = btn[i].value;
    } 
    switch (act) {
      case "html":
        content = content.replace(/<\/?[^>]*>/g, "");
        break;
      case "word":
        // remove xml processing instructions
          content = content.replace("/<\\?xml[^>]*>/g", "");
          // remove all namespaces
          content = content.replace("/<\/?[a-z]+:[^>]*>/g", "");                
        // remove the class attributes    
          content = content.replace("/(<[^>]+) class=[^ |^>]*([^>]*>)/g", "$1 $2");            
        // remove the style attributes
          content = content.replace("/(<[^>]+) style=\"[^\"]*\"([^>]*>)/g", "$1 $2");
          // remove empy span els
          content = content.replace("/<span[^>]*><\/span[^>]*>/g", "");                     
        // remove doubled up empty span tags
          content = content.replace("/<span><span>/g","<span>");                             
          content = content.replace("/</span></span>/g","</span>");
        break;
      case "css":
        // remove the class attributes    
          content = content.replace(/(<[^>]+) class=[^ |^>]*([^>]*>)/g, "$1 $2");            
        // remove the style attributes
            content = content.replace(/(<[^>]+) style=\"[^\"]*\"([^>]*>)/g, "$1 $2");
        break;
      case "font":
        content = content.replace(/<\/?font[^>]*>/g, "");
        break;
      case "span":
        content = content.replace(/<\/?span[^>]*>/g,"");
        break;
    }
tinyMCE.activeEditor.selection.setContent(content);

Unfortunately, the last row doesn't do anything within the editor:
tinyMCE.activeEditor.selection.setContent(content);

Additional information:
- I mark the following Text in the editor
<span style="color:#efefef;">myText</span>
(looks like "myText" in ligther grey in the editor)
- after I opened the sweeper, I selected "Delete spans" and ran my script (I alert the result after filtering and it only shows "myText" without the filtered spans - so I see that the scripts is working very well)
- but if I use the setContent() function nothing happens in the editor - the selected text is no unselected but the span formats are still there

I just saw that if I select the former and the row after my text it works well.
What am I missing in my code or is Tiny missing the open tag or the closing tag in the "getContent()" function?

It should replace the selected editor content with the filtered one. What am I doing wrong, pls.

Thank you very much in advance
Hurga

BTW: I just tested the regex's for HTML, Span and Font. The others are not tested yet.

Last edited by Hurga_Gonzales (2009-08-07 15:06:34)

2

Re: Probs with setContent()

Are you getting any errors in Firebug? I would use the get('myeditor') method instead of activeEditor as well, works much better in most cases.

3

Re: Probs with setContent()

Hello Chrazy,

thanks for answering.
No, there are no errors.

If I use get('editor')... it is still the same.
I found that TinyMCE misses some of the gotten code.

It gets all the code by getContent() but the setContent() function doesn't replace all the selected code. It misses the first tag.

For example:
<h1>hello world</h1>
<table><tr><td>mytable</td><tr></table>
<p>text blablahh</p>

If I mark this using ctrl-c, open my sweeper it shows the selected code as shown above. My HTML filter works just fine and deletes all HTML code from it. But if I insert the filtered string with setContent() the content is:
<h1>hello world mytable textblablahh</h1>

Just saw:
Everytime I insert content now using setContent(), tinyMCE surrounds the code to be inserted with a <h1></h1>.
Result:
<h1><h1><h1>hello world mytable textblablahh</h1></h1></h1>

That's a problem.

Thank you
Hurga

Last edited by Hurga_Gonzales (2009-08-07 15:49:40)

4

Re: Probs with setContent()

Me again smile,

just found a bug in tinyMCE I think.

As described above I can insert my filtered content using setContent(). But if the first or any element within the selection is sourrounded by a <h1-6> tag, tinyMCE surrounds the whole selection with this <h>-tag. Little annoying is that if I select the whole content using ctrl-a and the first element is a headline 1, tinyMCE surrounds the whole content with a <h1> as many times I replace the content. Means, if I sweep the content 3 times, there are three <h1></h1> surrounding my content.

Maybe you can fix this sometimes. I am glad that there is NO problem with my sweeping code wink.

Greetings
Hurga