Basic WYSIWYG HTML Editor

IN PROGRESS
Bids
7
Avg Bid (USD)
$636
Project Budget (USD)
$250 - $750

Project Description:
I need a relatively basic javascript WYSIWYG editor capable of creating HTML pages and opening pages created by the editor, but not required to open and parse generic HTML code created by other editors.

I attached an image, which is a quick mockup showing how the editor should function.

While most WYSIWYG editors generate HTML tables, this editor should put individual items into DIV tags, so they can be independently resized and moved around the page. An item can be either be a text box or image. All of the items should be listed in the bottom-right corner of the editor, and clicking an item should highlight it in the list and put a move/resize box around the item on the page. The user should then be able to drag the box to move the item, or use resize handles to resize it. The user should also be able to delete an item by selecting it, then pressing the DELETE key. In the mockup image, the green box in the bottom-right of the page is an item that the user has clicked.

The user should be able to layer the items, by dragging the item's name up or down in the list. This will adjust the corresponding DIV tag's "z-index" property. In the mockup, "image1" is the blue box, and "image2" is the gray box. The user has dragged "image2" up in the list, so that the gray box is showing on top of the blue box.

In the top-right of the page, there should be some options that vary depending on what type of item is currently selected. If an image has been selected, as shown in the mockup, it should display a slider that can adjust the transparency of that image. This will adjust the DIV tag's "opacity" property.

If a textbox has been selected, the top-right options should display dropdown boxes to select the Font, Font Size, and Color. There should also be buttons to align the text to the left, right, or center within the textbox. And also buttons to bold, italicize, and underline the text within that box. The user should also be able to click inside the text box to edit the text. The text should wrap automatically depending on the size of the textbox.

The user should be able to add a new item by clicking either "Add Textbox" or "Add Image". Clicking "Add Textbox" will create a new textbox with the sample text "Your Text Here". Clicking "Add Image" should open a box where the user can upload a new image in JPG, GIF, or PNG format. This should include a HTML form where a member can click "Browse" to select a file on their computer. The form should then upload the file to the server, and display the image within the WYSIWYG editor.

For the image uploads, I can write the server-side PHP code that gets the file via POST or AJAX, and copies it to the server's directory. What the editor needs to do is get the filename, so it can seamlessly put the uploaded images into the page once the upload completes. I believe this can all be done by AJAX, but I'll let the programmer choose the best method.

Finally, below the editor, there should be a textarea that displays the resulting HTML code. The code should update in real-time when items are added, changed, or deleted from the editor.

The editor should work in IE9, Firefox, and Chrome. For this project, I will need to have exclusive ownership and copyright of the code.

Thank you, and please let me know if you have any questions.

Skills required:
AJAX, HTML, Javascript, PHP, Software Architecture
Additional Files: wysiwyg_example.jpg
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


Hire ithinksolutions
$ 700
in 15 days
Hire jqMike
$ 750
in 10 days
$ 750
in 10 days
$ 555
in 33 days
$ 400
in 5 days
$ 600
in 20 days
$ 700
in 10 days