Best JavaScript WYSIWYG solution for a fixed box

8
votes

I have a box which is exactly 425px x 100px and I want my users to style this boxes content with a WYSIWYG editor. They should be able to use nearly every HTML inside of this box.

No, I'm looking for a proper WYSIWYG editor, I used to use TinyMCE for these kind of problems, but I think its best for a long continuous text, but right now I have a fixed box.

It would be great if the editor is able to position text and images absolute, so the user could position their contents wherever they want inside of this box.

5
javascripthtmltinymcewysiwyg
Are you asking for a web app that allows users to place html elements absolutely within a fixed container? – Mike Depies
yes some sort of a wysiwyg editor. thats optimised for a fixed container. – Frederick Behrends

5 Answers

6
votes

http://ckeditor.com/

i found ckeditor useful, have rich functionality regarding image or text, allow you both WYSIWYG and html source formatting methods, and it also have fix sized "canvas" the user could customize according to need,

print screen of my practical use of it, enter image description here

and here is the source screen enter image description hereand finally i am using 800x500 fixed size canvas

enter image description here

4
votes

You can do this using tinymce. To position text and images fix you will need an own content css (see the tinymce documentation for the configuration parameter content_css). You may even define the width of paragraphs of the tinymce content in this css, solving your box issue. The css (to be placed in your own css file) for your box issue would look like the following:

p {
  width: 100px;
}

Concerning the length (or better heigth) you might need to implement an own plugin and check for the length of the editor content there. If that length has been reached already you remove the letter/content the user just tried to insert.

1
votes

A simple yet effective solution would be PageDown. It uses Markdown, so it allows HTML formatting. However, PageDown includes two scripts to sanitize its content. With a bit of tinkering you can allow or restrict additional tags.

As for positioning, as Thariama said, that's easily controlled by your CSS, so it's a non-issue for WYSIWYG editors.

0
votes

depending on your need i would suggest for nicedit. You can have it in light version too along with fixed height and width also.