Basic WYSIWYG HTML Editor
This project was successfully completed by ithinksolutions for $700 USD in 15 days.Get free quotes for a project like this
Project Budget$250 - $750 USD
Completed In15 days
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.
Looking to make some money?
- Set your budget and the timeframe
- Outline your proposal
- Get paid for your work
Hire Freelancers who also bid on this project
Looking for work?
Work on projects like this and make money from home!Sign Up Now
- The New York Times
- Wall Street Journal
- Times Online