sfWmdPlugin - 1.0.0

Wysiwym Markdown Editor

You are currently browsing
the website for symfony 1

Visit the Symfony2 website


« Back to the Plugins Home

Signin


Forgot your password?
Create an account

Tools

Stats

advanced search
Information Readme Releases Changelog Contribute
Show source

sfWmdPlugin - A Symfony wrapper of Wmd, a wysiwym markdown editor

Author

Copyright (C) 2008 Jacques Philip.
Using a modified version the WMD scripts:
Copyright (C) 2008 WMD , John Fraser

License

MIT

Versions

There are now two version of the plugin:

  • This is Version 1 located in branches/1 in the SVN repository. It uses mostly the orininal obfuscated files of WMD posted by John Fraser.
  • Version 2 is located in branches/2 in the SVN repository.
    It uses the JS files of the forked WMD project by stackoverflow.com.
    Git repo for the JS files at: git://github.com/derobins/wmd.git.

Prerequisites

PHP v 5.2.0+

Features

  • The plugin adds WMD as another choice for a rich text editor in Symfony
    Use it exactly like FCKEditor or TinyMce.
    For security, you can remove all HTML before saving a field to the database and use sfMarkdown to display it.

    screen shot

  • The editor offers wysiwym edition of the markdown syntax with live preview and syntax help.

Browser compatibility

Tested on IE 6 and 7, Firefox 2 and 3, Opera 9 on Windows.
According to the author, the WMD scripts should work with in recent versions of Firefox, Safari, Opera, Konqueror, and Camino, as well as IE6 and IE7.

Installation

Install plugin as usual.
Create a link or virtual directory called sfWmdPlugin, pointing to the web folder of the plugin.

Settings and customization

Setting in app.yml

all:  
  .settings:
    rich_text_editor_class: Wmd
    rich_text_wmd_image_browser_url: '@admin_images?action=list&select=url'
    rich_text_wmd_syntax_file:   <?php echo(SF_ROOT_DIR."/web/syntax.php\n") ?>
    rich_text_no_preview: off
  • The first line simply sets Wmd as rich text editor for the application. This is only required for the helper in Symfony 1.0, not for the widget.
  • The second line defines a Url where the user can browse and select an image to be incorporated in the editor.
    When it is defined, a Browser Server button is added to the Add Image Dialog.
    This Url should include a link to a JS callback function in the form:

    window.opener.setUrl('url/of/image');

  • The third line allows you to define a template to overwrite the default markdown syntax help that shows in the plugin.
    You can copy/paste the one located in the lib/helper folder of the plugin.
  • The fourth displays the editor without a preview pane.

Options in the helper function

textarea_tag('name', '', array('wmdOptions' => array('wmd_image_browser_url' => 'url/of/image'),
'cols' => 80, 'rows' => 20, 'rich' => true))

You can also pass wmd_image_browser_url as an option of the textarea_tag helper function.
In this case, pass it as a member of a wmdOptions array:

textarea_tag('name', '', array('wmdOptions' => array('wmd_image_browser_url' => 'url/of/image'),
'cols' => 80, 'rows' => 20, 'rich' => true))

You can also pass the cols and rows options as seen in the previous example.

To set options per editor instance, you can pass the js options file for WMD in the wmd_options_file helper option (See further for the syntax to use in the file):

<?php echo textarea_tag('area', '', array('rich' => true, 'wmd_options_file' => 'wmd-options1.js')) ?>

Options in wmd-options.js

The WMD options have to be passed in a js file which is included by the plugin. The file is called wmd-options.js and has to be placed in the js folder of the web folder of your application. By default, it would be /web/js/wmd-options.js.
For options per editor instance, pass the file name in the helper function options.

The following options can be set there:

wmd_options = {
    // format sent to the server.  Use "Markdown" to return the markdown source.
    // This also determines what format is saved to the database.  
    output: "HTML",
    // line wrapping length for lists, blockquotes, etc.
  lineLength: 40,

    // toolbar buttons.  Undo and redo get appended automatically.
    buttons: "bold italic | link blockquote code image | ol ul heading hr",

    // option to automatically add WMD to the first textarea found.  See apiExample.html for usage.
    autostart: true
};

Limitations

The current version of WMD comes with obfuscated js code and it is hard to modify.
The only modification I made was to add server browsing capability to the Add Image Dialog.

Usage for Symfony 1.0

In a template:

<?php
    textarea_tag('name', '', array('wmdOptions' => array('wmd_image_browser_url' => 'url/of/image'),
    'cols' => 80, 'rows' => 20, 'rich' => true))
?>

In a generator file:

comments: 
  type: textarea_tag
  name: Description
  params: rich=true size=120x20

sfWidgetFormTextareaWmd

The sfWidgetFormTextareaWmd widget can be used with Symfony's forms in versions 1.1 or 1.2.
The same options are available:

//In the form class
public function configure()
{
  $this->widgetSchema['content'] = new sfWidgetFormTextareaWmd(array('cols' => 60, 'rows' => 30,  'wmd_no_preview' => true, 'wmd_image_browser_url' => 'image/browse', 'wmd_options_file' => 'wmd-options-no-image.js'));
}