Hello,
I am wondering how does the editor work from the conceptual point of view?
I mean the following:
- what is happening when a page with the editor is loading?
- what new elements appear in DOM when the editor gets instatiated?
- what is happening to the original textarea tag?
- in what DOM element the user input text gets inserted?
I am asking this because I am trying to make acceptance tests (I use CasperJs) of my app that contains the editor and I should know how to imitate user behaviour: how to fill in the editor with a content, how to click toolbar buttons, how to select a text etc.
Conceptually, I do not understand what happens to the DOM once the editor is loaded. I see that there appears a frame, that the original texarea tag becomes invisible, but what element recieves the user input remains unclear for the moment,
I would like to have an access to that element by means of selectors in order to change the element content.
Thank you for any clarification!
Maybe this can help you?
Maybe this can help you?
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
Thanks a lot, that diagram
Thanks a lot, that diagram helps to understand the dataflow inside the editor.
What I can not still understand is interaction part between the browser and the editor. Probably, I am saying the same things again, but what is happening to the DOM when the browser is loading an html page containing the editor?
If we disable javascript, then what we see is a plain textarea field which a user can type in.
Once javascript is enables, the the editor script modifies the textarea: I see that it acquires attributes visible: hidden and display: none. Starting from this moment, I can not type in directly the textarea (since it is in fact not present on the display). Nevertheless, the user can effectively type in because the editor adds some elements into DOM in such a way that the user does not notice the difference and thinks to type in the original textarea. This is what I can not understand so far.
Some crazy idea: does the editor intercepts what keys get pressed to imitate user input??
create a sample html document
create a sample html document and add there this:
That's the basics of CKEditor. Big part of the magic is the browser itself and CKEditor tries to make it work correctly.
Thank you for the example: it
Thank you for the example: it highlights the problem in the sence that now that html document has niether "input" nor "textarea" elements!
But as far as I know, they are the only elements by means of which the browser allows the user to insert data into the page content!
So, the paradox is: the web page contains no elements to enter data, but I can still insert data! Exactly this issue is interesting me: what magic does the editor do in order to make the html document recieve the user data?
Thank you for the example: it
That's the problem with your "paradox". Your assumtion is wrong and the browser also allows to edit those elements.
It's like asking why can you type on an input or textarea. that's the way it works.
That's the problem with your
Could you please, clarify your point?
I perfectly understand that by means of javascript one can modify DOM. I do not understand how user can dymanically insert data in an html document that has no textarea and input elements?
The only possibility that I can see is that the editor intercepts what key is pressed by user but this approach seems too heavy...