I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.

I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.

Bonus points for:

• Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
• Uses some method other than Flash as a default for upload.
• Uses jQuery as I use it a lot.
• RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
• Uses new technologies, like HTML5 and / or CSS3.

Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like @hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.

To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).

I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.

I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.

Bonus points for:

• Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
• Uses some method other than Flash as a default for upload.
• Uses jQuery as I use it a lot.
• RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
• Uses new technologies, like HTML5 and / or CSS3.

Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like @hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.

To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).

• php
• javascript
• jquery
• upload

Share Improve this question Follow edited Jun 16, 2011 at 10:24 duality_ asked Jun 15, 2011 at 15:18 duality_duality_ 18.8k2424 gold badges8484 silver badges9696 bronze badges 4

• What did you do so far? This is not a get a free programmer forum... – Naftali Commented Jun 15, 2011 at 15:27
• 1 Anything in here that meets with your reqs? ckeditor./developer-features – hakre Commented Jun 15, 2011 at 15:34
• @hakre: yes, it does. I'm gonna have to take a closer look at this. I will also edit my question to clarify a few things. You can make this into an answer (maybe more elaborate one? :)) and I'll vote you up. – duality_ Commented Jun 16, 2011 at 10:13
• I have just found out about jwysiwyg, which is a jQuery RTE plugin and is veeeery extensible, open and feels modern. It also has a well thought of uploading and insert image capabilities. I think this will be a part of my solution. – duality_ Commented Jun 16, 2011 at 11:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Anything in here that meets with your reqs? http://ckeditor./developer-features

You taken a look at TinyMCEor CKEditor?

The "fake answer" you gave yourself is quite accurate. You would need a RTE editor that supports custom functionality.

The logistics would go along these lines:

1. User presses a button
2. An empty div is appended to the input with a unique id
3. An image uploader popup will open, with pointers to the new div
4. A bination of jQuery / AJAX / PHP will allow the user to upload a file within the page
5. The filename is returned after the upload process and inserted in the originally appended div

If you are looking for the specific code for each of these steps, I would remend finding some tutorials as this isn't something that we can write some fast example code for.