Skip to content

Home

akzhan edited this page Jun 27, 2011 · 12 revisions

Introduction

This jquery 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. With a small file size less than 26Kb total and only 18Kb of code, the main concept is to keep it simple, not all users need font coloring or create tables, just the basic.

Compatibility

jwysiwyg is compatible with jQuery 1.3.2 and later (tested with 1.6.1) except erroneous jQuery 1.6; you can download the last release of jQuery from jQuery.com.

Quick Start

To start using jwysiwyg just add the jwysiwyg stylesheet (better in head) and javascript (always after jQuery) files in your document.

<link rel="stylesheet" type="text/css" href="jwysiwyg/jquery.wysiwyg.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jwysiwyg/jquery.wysiwyg.js"></script>
<script type="text/javascript">
// And now convert textarea #wysiwyg into Wysywyg editor.
$('#wysiwyg').wysiwyg();
</script>

Customization

You can customize WYSIWYG editor apperance using hash, specified as argument for $.wysiwyg method.

Editor controls

<link rel="stylesheet" type="text/css" href="jwysiwyg/jquery.wysiwyg.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jwysiwyg/jquery.wysiwyg.js"></script>
<script type="text/javascript">
(function($)
{
  $('#wysiwyg').wysiwyg({
    controls: {
      strikeThrough : { visible : true },
      underline     : { visible : true },

      separator00   : { visible : true },

      justifyLeft   : { visible : true },
      justifyCenter : { visible : true },
      justifyRight  : { visible : true },
      justifyFull   : { visible : true },

      separator01   : { visible : true },

      indent        : { visible : true },
      outdent       : { visible : true },

      separator02  : { visible : true },

      subscript    : { visible : true },
      superscript  : { visible : true },

      separator03  : { visible : true },

      undo         : { visible : true },
      redo         : { visible : true },

      separator04  : { visible : true },

      insertOrderedList    : { visible : true },
      insertUnorderedList  : { visible : true },
      insertHorizontalRule : { visible : true },

      separator07  : { visible : true },

      cut          : { visible : true },
      copy         : { visible : true },
      paste        : { visible : true },
      html         : { visible : true }
    }
  });
});
</script>

Styling

You can apply custom stylesheet to WYSIWYG editor content like that:

<link rel="stylesheet" type="text/css" href="jwysiwyg/jquery.wysiwyg.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jwysiwyg/jquery.wysiwyg.js"></script>
<script type="text/javascript">
$('#wysiwyg').wysiwyg({css: "/mystyle.css"});
</script>

Editor Size

By default, the editor's width and height is calculated based on the number of rows and columns of the original input tag. In order to override that size, you must set the iFrameClass option, and then specify width and height for that class using a stylesheet. Example:

<style>
.wysiwyg-input { width: 400px; height: 250px }
</style>
<script type="text/javascript">
$('#wysiwyg').wysiwyg({iFrameClass: "wysiwyg-input"});
</script>

Events

You can assign events to WYSIWYG content using events in constructor. Look at demo.

Editor API

You can access and modify the jwysiwyg editor through api calls:

Getting all content

$('#wysiwyg').wysiwyg('getContent');

Content manipulation

Replacing all content

$('#wysiwyg').wysiwyg('setContent', '<p>Replacing text</p>');

Insertion of image

$('#wysiwyg').wysiwyg('insertImage', 'http://domain.com/image.png');

Insertion of link

$('#wysiwyg').wysiwyg('createLink', 'http://google.com/');

Insertion of any html

$('#wysiwyg').wysiwyg('insertHtml', '<table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>');

Custom events etc.

$('#wysiwyg').wysiwyg('document').click(function(e)
{
  e.preventDefault();
  alert('You have clicked jWysiwyg content!');
});
Something went wrong with that request. Please try again.