March 6th, 2013, 07:50 AM
Against everyone's advice, I've been trying to develop a simple RTE for a CMS, as I've found the code behind established RTE's very difficult to understand, and adapt.
Here's what I have so far
You can see this at work in the 'table', 'list' and 'link' options, and could be extended (for example:to add 'class' options for h1, h2 and p tags).
Works for ie9 + other modern browsers (not tested on mobile yet). ie8 not working as have used getSelection() for getting the 'selection'. Looked at Tim Down's 'Rangy' but want to avoid third party libraries (other than jquery) if possible.
Elements are treated as 'block' (h1, h2, p, table, list) or 'inline' (strong, em, a).
There is always a 'block' element.
Block elements cannot contain other block elements (meaning no <p> tags inside lists or tables), and inline elements cannot contain other inline elements. Reason for this is caret's parent block element, and parent inline element (if there is one) is assigned an id, which I can then select with jquery and work with.
I'm not concerned about the limitations of the 'block' elements (as limiting user options in RTE's can be a good thing), but may have to change things for the 'inline' elements as (for example) you cannot create an <a> inside a <strong>.
The rangeParent() function I've created is also insufficient for 'inline' elements as it doesn't work if the selection crosses tag boundaries. Any advice on this would be appreciated.
I also need to create undo/redo functions, which I'm thinking would just be a matter of storing the generated RTE html in an array at various points then, going back/forward through the array to change the html in the RTE. Again, if anyone has any better ideas . . .
Posted this here for any general/specific comments to help tailor my approach.