JWYSIWYG jQuery editor

This plugin is an inline content editor to allow editing rich HTML content on the fly. It's an alternative to WYMeditor with much less features.

How to integrate..
create a html file copy paste below code (download 2 js and 1 css)
<style type="text/css" href="styles/jquery.wysiwyg.css">
<script type="text/javascript" src ="scripts/jquery-1.2.3.pack.js">
<script type="text/javascript" src ="scripts/jquery.wysiwyg.js">


<script type="text/javascript">
$(function()
{
$('#wysiwyg').wysiwyg();
});
</script>

<textarea id="wysiwyg" rows="11" cols="63" name="desc">    <textarea> 

------------------------------------------------------------------------------------------------

Activate hidden controls


If you want more controls please replace above script by below
<script type="text/javascript">
$(function()
{
$('#wysiwyg').wysiwyg(
{
controls : {
separator01 : { visible : true },
separator03 : { visible : true },
separator04 : { visible : true },
separator00 : { visible : true },
insertOrderedList : { visible : true },
insertUnorderedList : { visible : true },
undo: { visible : true },
redo: { visible : true },
justifyLeft: { visible : true },
justifyCenter: { visible : true },
justifyRight: { visible : true },
justifyFull: { visible : true },
subscript: { visible : true },
superscript: { visible : true },
underline: { visible : true }
}
} );
});
</script>

Download Link :Click

29 comments:

Anonymous said...

If any one needs help on this please post here

Anonymous said...

Yes please...
How do I get/use a html edit button ?

Anonymous said...

html:{visible : true}

Add above line in to hidden control activation section.

Anonymous said...

I have been looking around for a solution to this problem for a while and it seems that I am the only one who has ever wanted to do what I am doing. I need to be able to add text with javascript, like so:

document.getElementById('editor' + id).value='New Text';

But this does not work like it does with a regular text area. Anyone got any solutions?

Anonymous said...

I have the smae problem, I can't seem to set the text, or find any sample that does so

Bulli said...

I have added some text along with the tags(xml tags) in the textarea.
I saved the content and tried to the open it using the editor.
but editor is just showing the contents with out tags. How i can escape these tags in the editor?

Andrija said...

hello, how can you check if there is anything written in editor ? to determine if there is only tags inside = white space ?

Suhanto said...

<style type="text/css" href="styles/jquery.wysiwyg.css">

should be
<link href="styles/jquery.wysiwyg.css" >

Andrew said...

thank you so much. i found this script on another blog which only featured the script as their top 20 but not how to initiate it. cheers matey...

WebX said...

thanks dude. The explanation of how to show the hidden buttons was really helpful to me. Once on the official plugin page there's no documentation.

Anonymous said...

Has anyone figured out how to post text or html into the editor?

Alvin said...

If I use it on a Jquery UI modal dialog, I can not type on it. Any suggestions?

Alvin said...

I found the answer. You can not initalize the control until after you display the dialog.

Alaa Al-Hussein said...

Nice, but this editor can't manage the font-face or font-family

So, you can't change the font used.

I hope this will be solved.

Unknown said...

Is there a solution to not being able to initialize the control until after the dialog is open? I open the dialog many times and if I initialize, I get duplicate sections.

Anonymous said...

Hi,

I tried the code in a HTML file but it doesnt't work.

Could someone pack all needed files in a zip? Maybe I forgot one.
I just get a regular textarea without the functions

Kenton said...
This comment has been removed by the author.
Kenton said...

To Set content
$("#editor").wysiwyg("setContent",html_here);

To Get content this should work
$("#editor").wysiwyg("getContent").html();

but this always works
$( $("iframe").document(), "#editor" ).find("body").html();

Kenton said...

To Get content you could also do this

$("#editor").wysiwyg("saveContent").val()

Ash said...

when ever i try to use this i keep getting

"$("#wysiwyg ").wysiwyg is not a function"

in firebug.

any one shed some light 'cos I am stuck!

Hz.Root said...

does anyone know how to add table to editor?

Unknown said...

Hello,

I am having no luck with setting content in jwysiwyg.

$("#editor").wysiwyg("setContent",html_here);

Doesn't seem to work. It just brings up a normal text area instead of rendering out jwysiwyg.

Does anyone else have a solution to this?

Tim

Kenton said...

524684 to turn a textarea into a jwysiwyg control you should do this

$("#editor").wysiwyg();

Anonymous said...

this code does not work. please pack it in a zip working. thaks!!

Anonymous said...

How I can put a color selector????

Neto said...

Thanks!!!

Very well, I want to use mor controls for this plugin.

Reece Cropley said...

Great Post.

Probably a stupid question but oh well, I am using this plugin to edit text that will be inserted into a database.

The error is (You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'font-weight: bold;")

The datatype for the field the textarea will send to is Varchar

Any other information needed just ask. Hope someone can help

Neto said...

It is likely that the error is being generated because of aspas.Tente escape the quotes with addslashes (http://php.net/addslashes). Do not forget to remove the bars later with the stripslashes (http://br2.php.net/manual/en/function.stripslashes.php). Another important observation is the type of data from your table. Co varchar, you can only put up to 256 characters. The plugin will place the inline style, so will "increase" the size of the string. Imagine that I write "I like your blog" and decides to put a size to style, color, alignment and placing the underlined text. The string "I like your post", which had 16 characters, becomes:
"[font style='color:#CFEAFC; size:18px;text-align:justify; text-decoration:underline'] like your post [/ font]" and replaced by 109 characters for example. Imagine a larger text, or a more elaborate formatting, your field would not support.

Qamar said...

is it possible to add a font dropdown somehow? please let me know
my email add qamar_luct@live.com