Custom WYSIWYG Editor

  • Status Closed
  • Budget $250 - $750 USD
  • Total Bids 21

Project Description


The company I'm working with now is in need of a nice wysiwyg editor with all options that can be enabled and disabled depending on who's viewing it (via somekind of configs that could be set on page load via a php session, for example if session == admin, do all these features, and then if session is not admin, only do some features).

Currently we're using CKEditor which is ok, but it has a lot of little issues that we cant keep happening. For example, when the client erases all the text, we need to keep the styles that were for that text in place so when they start typing again it stays the same. In firefox, its hard to get the cursor to stay in place cause the page keeps jumping up, and we gotta do all kinds of crazy stuff just to get the cursor were we need it at to be able to edit the text.

We would like something professional, almost like [url removed, login to view] or [url removed, login to view] interface for building their page / screen design. But we're not using it to build a website. We're using it to build menus in cafeterias

Heres a basic idea of how this editor would work..

We need to be able to assign a background, either with color, image, or a video. The images and videos would be coming from within the users folder of files, and they would also be able to upload images / videos (Only jpg, png, gif, and ogv file type right now because of how our set up is going).

Once we have the background picked out, we would need to be able to pick different block elements, mainly a table (kinda make it look like Microsoft word with how many rows / columns to first add the table to the screen).

We would need to be able to resize the table with a click and drag, and move the table around on top of the background to where ever we would need it to be (using position:absolute / relative). We do not want the table block to snap to place, we want the table to stay where ever we place it. We would need to be able to add and remove rows / columns easily. all table cells would have a vertical-align:middle set (So we can set the height of the table and always keep the text in the middle, and also only add rows but fit for that height, maybe make it scroll (not overflow:auto) if theres more rows within the table then the allowed height on the table)

Then we would also need to be able to edit the font color, aligning, bold, italic, underline, indent, bullet-ed / numbered lists, sup, and sub text, undo, redo, paste from word (cause people like to do that, and word brings their tags along when copied), a way to add special characters (the e with the astrics and other special characters), font size, font face / family that could be coming in using google fonts api, and / or have another folder on our server with the fonts in it we could use. (maybe a mix of both)

I'll also need a spellchecker in there, something that people are use to with them red swirly lines under the misspelled words in the textarea box.

It would be cool if we could select some text, copy it to a new rows, and also while the text is selected have it be editable with the toolbar buttons.

We will also need to add images and videos on top of the background as well, but have them resize-able.

The main background (if its an image or video cannot be resized, and should stretch over the whole screen (100%x100%)

And of course it would need to generate the html for submission of the form, and it would be really awesome if we could use percent based sizes instead of pixels so it would look the same / nice on 1920x1080 and 1280x768 for landscape view, and then flipped for portrait view 768x1280 and 1080x1920. (yes we would need both landscape and portrait views). Currently our set up uses 1280x768 for landscape and 768x1280 for portrait, but like I said, we want to move to percent based sizes for everything looks right on different screen sizes.

We'd need it to work in IE8/9/10, chrome, and firefox the same.

Also, we need it to work with exsisting html content with css and javascript included.

Get free quotes for a project like this

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

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online