wiki:0.4/Integration
Last modified 5 years ago

Integration

Requirements

  • Microsoft Internet Explorer 6.0+ or Gecko based browser (e.g. Mozilla Firefox 1.5+) or Opera 9.0+ (Opera support is still experimental).
  • The  jQuery Javascript library 1.1.3+

Download

Download WYMeditor at SourceForge by following  this link and choosing latest WYMeditor 0.4 package.

Optional

  • A  nightly build is available as well.
  • All source code is kept under Subversion control, which you can  browse online.
    • If you have access to Subversion, you can connect to the repository here: 
      svn co svn://svn.wymeditor.org/wymeditor
    • If you're using make, you can build a WYMeditor package: 
      svn co svn://svn.wymeditor.org/wymeditor
cd wymeditor/trunk
make

Installation

  • Extract the package.
  • The 'wymeditor' folder and jQuery JS file must be accessible from your web page.
  • Edit your web page to include the configuration and javascript for WYMeditor.

Minimal page integration (converts all textarea elements into editors)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>WYMeditor</title>
<link rel="stylesheet" type="text/css" media="screen" href="wymeditor/skins/default/screen.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="wymeditor/jquery.wymeditor.pack.js"></script>
<script type="text/javascript">

jQuery(function() {
    jQuery(".wymeditor").wymeditor();
});

</script>
</head>

<body>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>

</html>

Explanation

  • The stylesheet wymeditor/skins/default/screen.css loads the default WYMeditor's skin.
  • jQuery(function() {}); is a shorthand for jQuery(document).ready(), allowing you to bind a function to be executed when the DOM document has finished loading.
  • If you prefer, you can use the jQuery '$' shortcut.
  • jQuery(".wymeditor").wymeditor(); will replace every element with the class wymeditor by a WYMeditor instance.
  • The value of the element replaced by WYMeditor will be updated by e.g. clicking on the element with the class wymupdate. See Customization.

Note: WYMeditor automagically detects the paths of required CSS and JS files.
You'll need to initialize basePath, cssPath and jQueryPath if you don't use default file names (i.e. jquery.wymeditor.js, wymeditor/skins/{skin name}/screen.css, jquery.js).
See Customization.

Basic customization example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>WYMeditor</title>
<link rel="stylesheet" type="text/css" media="screen" href="wymeditor/skins/default/screen.css" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="wymeditor/jquery.wymeditor.pack.js"></script>
<script type="text/javascript">

jQuery(function() {
    jQuery(".wymeditor").wymeditor({
       html: '<p>Hello, World!<\/p>',
       stylesheet: 'styles.css'
    });
});

</script>
</head>

<body>
<form method="post" action="">
<textarea class="wymeditor"></textarea>
<input type="submit" class="wymupdate" />
</form>
</body>

</html>

Explanation

  • The 'html' option will initialize the editor's content.
  • The 'stylesheet' option will automagically parse your CSS file to populate the Classes panel and to initialize the visual feedback.

See Customization.