JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed ForumsWeb DesignJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old March 6th, 2013, 07:50 AM
mattzo mattzo is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Aug 2004
Posts: 84 mattzo User rank is Second Lieutenant (5000 - 10000 Reputation Level)mattzo User rank is Second Lieutenant (5000 - 10000 Reputation Level)mattzo User rank is Second Lieutenant (5000 - 10000 Reputation Level)mattzo User rank is Second Lieutenant (5000 - 10000 Reputation Level)mattzo User rank is Second Lieutenant (5000 - 10000 Reputation Level)mattzo User rank is Second Lieutenant (5000 - 10000 Reputation Level)mattzo User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 21 h 52 m 47 sec
Reputation Power: 61
RTE comments

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
http://jsfiddle.net/iamnotanumber/WjBtN/5/

Javascript is definitely not my strong point, and I'm OK with jquery, so basic concept is to use jquery selectors at earliest possible opportunity to add/change the functionality. This is a bit of a 'sledgehammer' approach - but it keeps the code readable (for me).

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.

Limitations

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.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignJavaScript Development > RTE comments

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap