CODEWITHSUNDEEP
tinymce
Erik
Erik

Reputation: 20722

TinyMCE: Copying and Pasting from one Editor to Another

When working with TinyMCE, I've found that the following steps:

  1. Select all the conent in a TinyMCE editor
  2. Command-X (or control-X if you're PC)
  3. Repaste into the same editor

The result is your original content, wrapped by a DIV with any styles which apply to the content_css body applied to a div and your content wrapped in it. To be more clear, if you start with:

<p>Content!</p>

and have content_css : 'content.css' containing:

body { padding: 20px; }

when you paste, you end up with

<div style='padding: 20px;'>
<p>Content!</p>
</div>

If you cut the new content and paste again, you now have it wrapped twice. Is there a way to easily prevent tinyMCE from enacting this behavior? I removed the custom ID assigned to the editor body, so now its just grabbing styles on the BODY tag of my css.

I've tried writing a custom stylesheet that doesn't put any rules on the main #tinyMCE selector itself, but i still get my content wrapped by a generic DIV with some default rules when doing the copy/paste.

Is there a way to avoid this?

If its helpful for the TinyMCE experts out there, my init call is fairly simple:

tinyMCE.init({
        // General options
        mode            : "specific_textareas",
        editor_selector : "enableMCE",
        theme           : "advanced",
        skin            : "o2k7",
        skin_variant    : "silver",
        plugins         : "table",
        inline_styles   : false,
        theme_advanced_blockformats         : '',
        theme_advanced_toolbar_location     : "top",
        theme_advanced_buttons1             : "bold,italic,bullist,numlist,|,styleselect,|,indent,outdent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,table,visualaid,|,removeformat",
        theme_advanced_buttons2             : "",
        theme_advanced_toolbar_align        : "left",        
        content_css     : '/assets/admin/css/events-editor.css',
        rows: 100,
        // Style formats
        style_formats : [
          { title : 'Headline', block : 'h2' },
          { title : 'Subhead', block : 'h3' },
          { title : 'Minor Head', block : 'h4' },
          { title : 'Paragraph', block : 'p' }
        ]
});

Upvotes: 2

Views: 2258

Answers (2)

Capripot
Capripot

Reputation: 1509

As an alternative, you can also use invalid_elements option. Particularly if your entry is mainly about text or images, you probably can ban all the div html tags from your copied text.

To achieve that, I just added that to my TinyMCE configuration : 

invalid_elements : "div"

Upvotes: 0

Thariama
Thariama

Reputation: 50832

Problem here will be that tinymce cannot decide here whrer the pasted contetn comes from and wraps it by default. You will have to modify the pasted content yourself using the tinymce init paramter paste_preprocess. Using this paramameter you may check for an own flag it the pasted content came froma tinymce editor instance or not and if necessary cut unnecessary tags out.

Upvotes: 1

Related Questions