With HTML editors such as ckeditor, there seems to be a convention to distinguish between editing HTML inside <textarea/> content, and »inline« editing via contenteditable.
When doing the latter, the editor automatically recognizes the difference between elements that allow flow content (i.e. <div/>) and such ones that only allow phrasing content (i.e. <p/>) and allows only valid elements inside the respective contenteditable.
I need a way to edit HTML inside of a <textarea/> with ckeditor, while allowing only phrasing content. Is there a way to achieve this?
I found a bit of a hack way of doing this. I looked up CKEDITOR.inline() in the source tree in ckeditor-dev/core/creators/inline.js. The existing code automatically creates a <div/> tag if you want to inline-edit a <textarea/>
Then I monkey patched it to accept an additional string argument, which determines the name of the automatically created contenteditable element, which is otherwise hardcoded to be a <div/>.
Related
It seems that CKeditor automatically initializes on any element that has contenteditable=true. It even says so on their Guides page, but with no instructions on whether this can be avoided.
This makes me lose a lot of control over the content on my page. I have some content that should be editable with the rich text editor, and some other that shouldn't. But this makes CKeditor initialize on elements that don't even expect rich text, and they don't get saved as rich text in the database... So I need to get rid of it from the interface, but I don't know how...
Can I tell it to avoid automatic initialization?
The answer to the question is No.
The alternate solution, is to omit the contenteditable=true, then after initializing the CKEDITOR, set the contenteditable attribute on the required element from Javascript.
Try
CKEDITOR.disableAutoInline = true;
(See this answer from another question)
I have a CKEditor widget resembling a tab-module.
As editables I have defined a span.title and div.content.
When I am in editing mode inside a span.title and then paste something using CTRL+V, the span gets broken and I have two spans. As if it gets divided on whatever position I paste.
When I am in editing mode inside a div.content and then paste something using CTRL+V, the contents of the clipboard are correctly inserted into that div.
Is it because span is an inline-element and div is a block-element and CKEditor doesnt allow pasting into inline-elements?
Can I somehow change this behaviour?
CKEditor allows pasting of block and inline elements (keep in mind that content filtering (ACF) can be used which also affects pasting) so it is probably not the issue in this case.
I would also make sure that the content which you are trying to paste does not contain any HTML which may cause the behavior you described.
If you could provide widget HTML/template or code which you are using I will be glad to investigate this issue in more depth.
I had this issue when trying to have a <cite> element as an editable. Trick was to tweak the CKEDITOR.dtd properties.
// This prevents the pasting from splitting parent element.
delete CKEDITOR.dtd.$removeEmpty.cite;
// This tells the editor to allow editing in this element.
CKEDITOR.dtd.$editable.cite = 1;
I imagine this would affect the behavior of all <cite> elements in any editor currently loaded. Not ideal in all cases for most elements, but for our requirements for a blockquote/pullquote widget, the <cite> element is only allowed inside our <blockquote> elements in any editor.
sorry, a newbie Q. Is it possible to hide a specific attribute throughout an XML doc?
I need a way to synchronize the contents of the editor with non-Ace objects elsewhere on the DOM (unfortunately a SWF file that loads the xml seperately...). I thought to label each node throughout the doc, e.g. tag='1', so that if a node with a given tag is manipulated in Ace, I can just use the tag to figure out what exactly was manipulated (and vice versa, update Ace when the xml is manipulated outside of Ace).
Best that people do not manipuate these tags, hence wanting to hide them from view.
Thanks :)
you can create folds to hide text, but i think for tracking changes it is better to use anchors which keep their position relative to text
a=ace.session.doc.createAnchor(row,col); // create
a.getPosition();
a.detach(); // remove when not needed anymore
CKeditor apparently automatically creates matching end tags when you enter a start tag. Is there a way to turn this behavior off?
I have a situation where I am creating two blocks of text in an admin program using CKeditor, then I'm using these to paint a page with the first block, some static content, and then the second block. Now I've got a case where I want to wrap the static content in a table. I was thinking, No problem, I'll just put the <table> tag in the first block and the </table> tag in the second block, and the static content will be inside the table. But no, CKeditor insists on closing the table tag in the first block.
In general, I can go to source mode and enter HTML directly, but CKeditor then decides to reformat my tagging. This seems to rather defeat the purpose of having a source mode. (I hate it when I tell the computer what I want and it tells me, No, you're wrong, I know better than you what you want!)
CKEditor produces valid HTML. Valid HTML has to include both - start and end tags. There's no way to change this behaviour without hacking editor. Note that even if you'll force editor to produce content without one of these tags it will then try to fix this and won't do this as you expect. E.g. load:
<p>foo</p></td></tr></table>
And you'll completely loose this table so only regexp based fix on data loading could help. In the opposite case:
<table><tr><td><p>foo</p>
You'll end up with paragraph wrapped with table, so it's better. But what if someone would remove this table from editor contents?
Therefore you should do this integration outside editor - prepend table to contents of one editor and append to contents of second one. You simply cannot force editor to work on partial HTML.
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.
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?
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';