1

Topic: tinymce adding <p>&nbsp;</p> before and after selection.setContent

I have a custom function that I used to close text within a custom quotebox. The function I'm using is the following:

function addquotebox() {
    if (tinyMCE.get('elm1').selection.getContent() == "") {
        var selection="INSERT TEXT HERE";
    } else {
        var selection=tinyMCE.get('elm1').selection.getContent().replace(/<p(.*?)>(.*?)<\/p>/gi,'$2');
    }
    var content="<p style='background-color: #cbcbcb; border: solid 1px black; padding: 5px;'>"+selection+"</p>";        
    tinyMCE.get('elm1').selection.setContent(content);
}

When I use this function the text appears fine but then when I click on SOURCE tinymce adds a <p>&nbsp;</p> before and after the edited text. How do I stop it from doing this?

Last edited by grkblood13 (2011-08-27 21:22:53)

2

Re: tinymce adding <p>&nbsp;</p> before and after selection.setContent

Hi,

  I tried running your code against TinyMCE 3.4.4 on Safari & Firefox on Mac OSX and IE8 on Win7. In all cases I didn't see an extra "empty" P tags being added.

  I did see an odd thing occur on IE8 when you don't have text selected. An error was thrown in the selection.js.

  I was using a pretty standard config similar to the one in the Full Feature demo. Can you provide additional information, for instance the configuration you are using and the browser(s) this is occurring on?

  Cheers,
  Brett

Brett Henderson
http://tinymce.ephox.com

3

Re: tinymce adding <p>&nbsp;</p> before and after selection.setContent

It's doing it only any browser I use. Here's my configuration.

<script type="text/javascript">
    tinyMCE.init({
               
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

        // Theme options
        theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : false,
            relative_urls : false,

        content_css : "/css/myfile.css?" + new Date().getTime(),
        content_css : "/css/custom_content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.php",
        media_external_list_url : "lists/media_list.js",
        extended_valid_elements : "iframe[src|width|height|name|align]",
       
        // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ],

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        },
        'setup' : function (ed) {
            // process content before editor pre-process
                ed.onPreProcess.add (function (ed, o) {
                       o.node.innerHTML = o.node.innerHTML
                           // Remove comment tags
                           .replace(/<!--(.*?)-->/gi,'')
                           // Replace <div>s with <p>s
                           .replace(/<div(.*?)>(.*?)<\/div>/gi,'<p$1>$2</p>');           
                });
        }
    });
</script>

4

Re: tinymce adding <p>&nbsp;</p> before and after selection.setContent

Also when I do it it appears to be fine until i click SOURCE. When I click source it adds <p>&nbsp;</p> before and after the quotebox and then appears when I go back to STYLED.

5

Re: tinymce adding <p>&nbsp;</p> before and after selection.setContent

Hi,

  I think I've worked out the problem.

  So when you select some text and wrap it in styled P tag, what is actually being inserted appears to be the new P, within the old P. So instead of

<p style="background-color: #cbcbcb; border: solid 1px black; padding: 5px;">
Some text wrapped in a styled P tag
</p>

you get

<p><p style="background-color: #cbcbcb; border: solid 1px black; padding: 5px;">
Some text wrapped in a styled P tag
</p></p>

  Now this isn't a problem as TinyMCE resolves the extra P tag by removing it.

  The problem however comes in your onPreProcess event handler. When you set the o.node.innerHTML it closes the first <p> tag and removes the trailing </p> resulting in

<p></p>
<p style="background-color: #cbcbcb; border: solid 1px black; padding: 5px;">
Some text wrapped in a styled P tag
</p>

which is where your "empty" paragraph comes from.

  I'd consider looking at alternative ways to do the processing you currently have in onPreProcess.

  Cheers,
  Brett

Brett Henderson
http://tinymce.ephox.com

6

Re: tinymce adding <p>&nbsp;</p> before and after selection.setContent

Hello,

I am new here and to using tinyMCE. I also have some challenges with <p>&nbsp;</p> for line and placing <p> and </p> before and after every line instead of <br />. How do you get this resolved.

I am using tinyMCE on my job board ===> http://www.jobnavy.com

You check the situation there.

Thank you.

7

Re: tinymce adding <p>&nbsp;</p> before and after selection.setContent

If you don't use paragraphs at all, disable them in your config. Otherwise use [shift][enter] to start a new line within an existing paragraph. TinyMCE can handle that.

Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)