0

I have spent days trying to incorporate different editors within my site. None seem to be up to the job. I have delved in to their code a lot and one thing or another doesn't work.

Here's my requirements:

  • Basic formatting such as size, bold, italic, strikeout, subscript and superscript
  • Image upload via ajax, image resize and positioning
  • Link handling
  • Code tag or styled div with a drop down in the top right for selecting syntax highlighting. And on leaving the code tag/styled div the text updates via ajax to include line numbering.
  • Paste but encode users code

The main issues with editors I have tried are:

Carriage Returns/Line breaks don't get the cursor out of the current element and if they do they re-create the current element or re-create the current element within itself.

They use a lot of unnecessary code, such as multiple nested divs. Heck looking at the source of some you get <div><div><div><div><div><div>Hello World</div></div></div></div></div></div>

They don't work in quirks which I need them to.

Here's an image of my idea, it's just a knock up:

enter image description here

So my idea is to use a content Editable div and regex to track the code tags and implement my own functionality. But I need to get selection start and length of a content div in all browsers inc' quirks. How can I do that?

Also replacing text within the content div.

Any suggestions, ideas or help would be great thank you.

Craig Stewart
  • 1,461
  • 2
  • 13
  • 18
  • Stop right here would be my advice. The reason other editors are so sucky is because it is damn hard to do right. So please don't attempt it you will fail and safe yourself the headaches. – PeeHaa Jun 16 '12 at 21:46
  • P.S. I've used [Rangy](http://code.google.com/p/rangy/) for these kind of things which works pretty well. – PeeHaa Jun 16 '12 at 21:49
  • @PeeHaa I hear that, I appreciate the capabilities of the editors. But I can't stop, it's an iframe it's DOM objects it's all accessible. It should be possible. – Craig Stewart Jun 16 '12 at 21:52
  • I wish you the best of luck o brave one ;-) – PeeHaa Jun 16 '12 at 21:53
  • Suggestion. I have myself considered using [Create.js](http://createjs.org/). – r4. Jun 16 '12 at 21:46

1 Answers1

1

It's pretty easy actually. You just need a <div/> with an attribute called contenteditable. From then on, the only browser issues you may have is to reliably insert HTML into that div. But I've seen it work well before, so it shouldn't be a real problem.

Since you mentioned quirks mode, I'm afraid it's not possible without hue hacks, however, there's an easy fix: put your editor (the div) in a separate page and embed it within an iframe.

Regarding the image uploading part, your server needs to handle that. From the editor's aspect, it's just an <img/> tag.

Christian
  • 27,509
  • 17
  • 111
  • 155
  • This is how I've started, I'm using an iframe but it's difficult to get selection details and change underlying html in quirks and current browsers – Craig Stewart Jun 16 '12 at 21:59
  • Make sure the iframe is not in quirks mode. Next, use the code [here](http://stackoverflow.com/questions/10973458/replacehtmlat-using-jquery-inside-contenteditable-div/10973520#10973520) and you should be fine. – Christian Jun 16 '12 at 22:05
  • Also, for the "unnecessary markup" point you made, there's no easy fix. But that has always been a major issue of WYSIWYGs. – Christian Jun 16 '12 at 22:06
  • that code uses Range's which is not compatible with quirks :-( – Craig Stewart Jun 16 '12 at 22:07
  • That code uses whatever is available to do what you need. Also, I told you **use an iframe to avoid quirks mode**. – Christian Jun 16 '12 at 22:08
  • I've tried to use getRange() in quirks, I can't avoid quirks because some of my users may be using pre IE7 browsers. – Craig Stewart Jun 16 '12 at 22:10
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/12646/discussion-between-craig-stewart-and-christian) – Craig Stewart Jun 16 '12 at 22:11
  • I tried the wizzy, it's good for insertion but not much help for editing/formatting. – Craig Stewart Jun 16 '12 at 23:34