WYMeditor

Setting up WYMeditor ==================== #. WYMeditor requires a version of jQuery between 1.2.6 and 1.9.1. First ensure that your page includes jQuery. .. note:: If a version of jQuery at or above 1.8.0 is used, WYMeditor also requires jQuery Migrate. Ensure that your page also includes jQuery Migrate after jQuery is included. See :ref:`jquery-migrate`. #. Download the `Version 1.0.0b4 `_ archive and extract the contents to a folder in your project. #. Include the ``wymeditor/jquery.wymeditor.min.js`` file on your page. This file will pull in anything else that's required. .. code-block:: html #. Now use the ``wymeditor()`` function to select one of your ``textarea`` elements and turn it in to a WYMeditor instance. eg. if you have a ``textarea`` with the class ``my-wymeditor``: .. code-block:: javascript $('.my-wymeditor').wymeditor(); .. note:: You'll probably want to do this initialization inside a ``$(document).ready()`` block. #. If you'd like to receive the valid HTML your editor produces on form submission, just add the class wymupdate to your submit button. .. code-block:: html #. ??? #. Profit! Sample Minimal Page Integration ------------------------------- .. code-block:: html WYMeditor **Explanation** * ``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 :doc:`customize`. .. 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 :doc:`customize`. More examples with different plugins and configuration options can be found in your ``examples`` directory. .. _jquery-migrate: Page Integration with jQuery Migrate ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. code-block:: html WYMeditor This is only necessary if the included version of jQuery is at or above 1.8.0. Be sure to include jQuery Migrate **after** including jQuery.