Copying and Pasting in CKEditor
<p><strong> Having Problems Copy/Pasting to CKEditor?</strong> First, what is CKEditor? <a href="http://ckeditor.com/">CKEditor</a>, formerly FCKeditor, is an open source WYSIWYG text editor (WYSIWYG, pronounced [wiz-ee-wig], is an acronym for What You See Is What You Get) from CKSource that can be used in web pages. It aims to be lightweight and requires no client-side installation. The first version was released in 2003. –Wiki </p>
<p style="text-align: center;"><a href="/files/public/userfiles/1000/blog/2010/06/CKE1.jpg"><img width="468" height="206" class="size-full wp-image-260" title="CKE1" alt="CKEditor" src="/files/public/userfiles/1000/blog/2010/06/CKE1.jpg"></a></p>
<p style="text-align: left;">The CKEditor allows administrators of a web site to easily make content changes without having to know coding languages. (Note: CKEditor is not the only WYSIWYG text editor out there, but serves as a good example.) An issue that we have run into is that our end users are having problems seeing the content they entered. That is a big problem considering that this is the main purpose of the tool. We found that our users were having this problem when they were copy/pasting from <a href="http://office.microsoft.com/en-us/word/FX100487981033.aspx">Microsoft Word</a>. Here is an example: I copied and pasted the first paragraph of this entry into the CKEditor straight from Word. </p>
<p style="text-align: center;"><a href="/files/public/userfiles/1000/blog/2010/06/CKEditor.jpg"><img width="468" height="204" class="alignnone size-full wp-image-264" title="CKEditor" alt="" src="/files/public/userfiles/1000/blog/2010/06/CKEditor.jpg"></a></p>
<p style="text-align: left;">Now after I saved this entry this is what the page shows… </p>
<p style="text-align: left;"><a href="/files/public/userfiles/1000/blog/2010/06/CKEditor-Page.jpg"><img width="468" height="220" class="alignnone size-full wp-image-266" title="CKEditor Page" alt="" src="/files/public/userfiles/1000/blog/2010/06/CKEditor-Page.jpg"></a> </p>
<p style="text-align: left;">It shows a few hundred lines of this, then, shows the actual text from the first paragraph. What is all this code? It is the XML data related to the Word file. (XML- Extensible Markup Language is a set of rules for encoding documents electronically. –Wiki ) The XML data contains the code for things like the font style, font size, margins, meta data, style definitions, etc. <strong>So, let's talk solutions! </strong> There are many ways to solve this issue. The least creative non-technical method would be to manually type your content rather than using the copy/paste method, but who has time for that? A better non-technical approach would be to change the word processor you are using. The best thing to use is a text-only or plain text editor such as Notepad, which is included in all versions of <a href="http://www.microsoft.com/windows/">Microsoft Windows</a> since 1.0. One thing to note is that plain text editors do not include features like spell check, so be sure to proof your pasting! Now, let's get a little more technical. CKEditor, in the newest version <a href="http://cksource.com/blog/CKEditor_3.1_released">3.1</a>, has a "paste from word" button. This feature, theoretically, should strip the xml data when you copy and paste from Word. The feature does work, but there is some inconsistency in how this feature performs. Thus, we chose to exclude it from our application of CKEditor on our client websites. Other WYSIWYG text editors have plug-ins available that can be downloaded that perform the function of stripping the xml data. But again, there is inconsistency in how they perform. Most of the buzz around this issue suggests that CKEditor should automatically detect content formatted from Word and strip it. No editor has implemented this feature into the editor itself… yet.</p>
