working with xml snippets in CKEditor

Question

I am Using CKEditor in my application where the users can write blogs, create pages etc.., Source mode is disabled for the editor. Writing xml in the editor's text area is not retained after saving the content. I clearly see that the content got HTML Encoded and the same is supplied as input to the CKEditor's textarea.

Answer 1

Works as designed. Whatever you enter into the WYSIWYG area, will get HTML encoded. How would you want to behave it differently?

If you want a text editor for writing XML, maybe the answers to this question are useful: Textarea that can do syntax highlighting on the fly?

Answer 2

I too want CKEditor to support XML tags, but I understand that you can't just type them into the main window - anything typed here is assumed to be actual content, not tagging, and therefore gets encoded.

What I'd like to do is define a list of styles that cause a tag of my choosing to be used, e.g. if the user chooses the 'example' style, CKEDitor does <x>content</x>. Unfortunately I haven't had much success with this, despite hacking the dtd.js file.

My current solution is to define a list of styles but map them to a standard HTML tag, then put my desired XML tag name in as an attribute. I'll then need to write some XSLT that transforms the data later.

CKEDITOR.stylesSet.add('myStyles',
[{
  name: 'Example sentence', 
  element: 'span', 
  attributes: {'class': 'example', 'data-xmlTag': 'x'} 
}];        

config.stylesSet = 'myStyles'; 

element specifies a standard HTML tag – I use <span> if I want the XML to be inline and <div> if I want it to be block level. The data-xmlTag attribute says what XML tag I actually wanted to use (x in this case). The class allows me to define some styles in CSS and means I can group several XML tags under one class name. To define some CSS:

config.contentsCss = CKEDITOR.basePath+'tagStyles.css';