CODEWITHSUNDEEP
ckeditororchardcmsclipboard
Matthias
Matthias

Reputation: 1436

CKEditor Source Code Mode Copy

Any other suggestions?

When using CKEditor copying from one instance to another (with CTRL+C/V). You always get some changed source code. Even with Advanced Content Filtering enabled and only allowing a few plugins and content rules.

Check this example here (Code 1):

<p>nubosys GmbH ist ein 
Infrastrukturanbieter und bietet für eine moderne Informations- und 
Kommunikationstechnologie (ICT) das ideale Umfeld.<p>

CTRL+C/V in another instance becomes this (Code 2):

<p><span>nubosys</span> GmbH ist ein Infrastrukturanbieter und bietet 
für eine moderne <span>Informations</span>- 
und  Kommunikationstechnologie (ICT) das ideale Umfeld.</p>

So what you see is that unnecessary span tags get inserted

When I monitor the clipboard I see this (Code 3):

original clipboard contents

So you see CKEditor does quit a good job filtering out things. But it is not 100% the same as in the original.

My approach would be to implement a source code based copy mode. So I am wondering if something like this does not exist already for CKEditor. My use case is to copy from one instance to another instance of the editor inside the CMS.

I case you want more background information. Here is the CKEditor Plugin for Orchard CMS we started: https://github.com/inteno/CustomCK/wiki/Introduction

How to force the user to copy the HTML Code from one instance to another (without source changes) with one click or by pressing CTRL+C/V.

When I use forcePasteAsPlainText: true, the problem does not occur, but the formatting is lost. I want a clean way to copy the formatting without changing the source.

Update:

In this fiddle http://jsfiddle.net/mjost/6rgo0udg/15/ the problem does not occur. CKEditor manages to filter out the bad code:

Version:0.9
StartHTML:0000000165
EndHTML:0000000886
StartFragment:0000000201
EndFragment:0000000850
SourceURL:http://fiddle.jshell.net/mjost/6rgo0udg/15/show/
<html>
<body>
<!--StartFragment--><p style="box-sizing: border-box; border-radius: 0px !important; margin: 0px 0px 10px; color: rgb(85, 85, 85); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20.7999992370605px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">nubosys GmbH ist ein Infrastrukturanbieter und bietet für eine moderne Informations- und Kommunikationstechnologie (ICT) das ideale Umfeld.</p><br class="Apple-interchange-newline"><!--EndFragment-->
</body>
</html>

(http://freeclipboardviewer.com/)

But that is because there are no spans even in the clipboard.

Update 2:

The problem occurs here when I work with none breaking spaces:

http://jsfiddle.net/mjost/r34c7fLe/5/

HTML

<body>
        <textarea id="cke1"><p>nubosys GmbH wurde 2011 von inteno ag und&nbsp;edicomp&nbsp;GmbH&nbsp;gegr&uuml;ndet. nubosys GmbH ist ein Infrastrukturanbieter und bietet f&uuml;r eine moderne Informations- und Kommunikationstechnologie (ICT) das ideale Umfeld.</p>
    </textarea>

            <textarea id="cke2"></textarea>
    </body>

JS

CKEDITOR.replace( 'cke1', {
    forcePasteAsPlainText: false,
     extraAllowedContent: 'span;'
} );
CKEDITOR.replace( 'cke2', {
    forcePasteAsPlainText: false,
     extraAllowedContent: 'span;'
} );

Updated Question:

According to the latest experiments I think it should be a Plugin that overwrites the default Copy&Paste and works on a Source Code base. Is this possible?

Upvotes: 0

Views: 934

Answers (1)

Xeevis
Xeevis

Reputation: 4531

It appears to be some incompatibility between CKEditor and Chrome/Webkit. I'm not sure if you have any specific reason for that javascript. But forcePasteAsPlainText: false is redundant because that's default value. And extraAllowedContent: 'span;' is what's causing your problem with inserted spans.

If you don't need to set more options you can remove all javascript and just use class="ckeditor" on textareas to load editors on them.

Another way is to hit Source button on CKEditor's toolbar and copy the source directly, that is always 1:1 then you can hit Source button on second CKEditor and paste it there, again 1:1.

Does it still bug for you in this fiddle? http://jsfiddle.net/tfoaw743/1/

Upvotes: 1

Related Questions