WYSIWYG Inline Edit with Jeditable

Latest custom input for Jeditable uses jWYSIWYG editor by Juan M Martinez. This code has been almost ready for a while. This week I finally had time to fix some outstanding FireFox bugs.

If you are interested in writing your own Jeditable custom inputs read the introduction. You might also be interested in MarkItUp! custom input which is similar to jWYSIWYG input.

To test see the working demo and then download the source.

Usage

First include all needed JavaScript and CSS in your HTML.

<script src="jquery.js"" type="text/javascript"></script>
<script src="jquery.wysiwyg.js" type="text/javascript"></script>
<script src="jquery.jeditable.js" type="text/javascript"></script>
<script src="jquery.jeditable.wysiwyg.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.wysiwyg.css" type="text/css">

Now you can use input type wysiwyg. Set onblur to ignore. Otherwise clicking menubar will cause editing to quit. You should also include atleast submit and cancel parameters. All jWYSIWYG settings can be passed using wysiwyg parameter. Check documentation from Juan’s webpage.

$('.editable').editable('http://www.example.com/save.php', { 
    type      : 'wysiwyg',
    onblur    : 'ignore',
    submit    : 'OK',
    cancel    : 'Cancel',
    wysiwyg   : { controls : { separator04         : { visible : true },
                               insertOrderedList   : { visible : true },
                               insertUnorderedList : { visible : true }
                }
    }
});

I tested the code with IE6, IE7, FF2, Safari and Chrome. In case you find any problems drop me a line.

• Tweet
• G+

Tagged with: Jeditable   Jquery