Recipe for Adding Wiki Format Buttons Using Quicktags

Submitted by mgifford on

The quicktags module provides a tinymce-button-style solution for formatting wiki posts. Quicktags adds buttons to the textarea and uses on-the-fly generated javascript. It is not a wysiwyg editor, but something far simpler: It simply inserts the basic code into your textarea.

Here is a screenshot of quicktags in action:

You can download quicktags here: http://drupal.org/project/quicktags
Don't forget to enable users who will need this in Access Control

Here is some modified code (from quicktags.module) that creates quicktags buttons for italic, bold, wiki heading 1,2,3 and url. Note: The tag close function - the checkmark icon - is added automatically at the end of the list.

<?php $items = array( 'ed_italic' =&gt; array( 'name' =&gt'Italic''prefix' =&gt"\'\'"'suffix' =&gt"\'\'"'accesskey' =&gt'i''weight' =&gt10'icon' =&gt$path .'ed_italic.png', ), 'ed_bold' =&gt; array( 'name' =&gt'Bold''prefix' =&gt"\'\'\'"'suffix' =&gt"\'\'\'"'accesskey' =&gt'b''weight' =&gt20'icon' =&gt$path .'ed_bold.png', ), 'ed_header' =&gt; array( 'name' =&gt'Header Level One''prefix' =&gt'==''suffix' =&gt'==''accesskey' =&gt'1''weight' =&gt30'icon' =&gt$path .'button_headline.png', ), 'ed_block' =&gt; array( 'name' =&gt'Header Level Two''prefix' =&gt;'===''suffix' =&gt'===''accesskey' =&gt'2''weight' =&gt40'icon' =&gt$path .'button_headline2.png', ), 'ed_blocka' =&gt; array( 'name' =&gt'Header Level Three''prefix' =&gt;'=====''suffix' =&gt'=====''accesskey' =&gt'3''weight' =&gt42'icon' =&gt$path .'button_headline3.png', ), 'ed_link' =&gt; array( 'name' =&gt'link''prefix' =&gt;'[''suffix' =&gt']''accesskey' =&gt'l''weight' =&gt50'icon' =&gt$path .'ed_link.png', ), ?>

The module requires a patch to add functionality to determine which content types the quicktags will appear on: http://drupal.org/node/62100#comment-403430

Once you apply the patch, do the following here: /admin/settings/quicktags
Under 'Show quicktags on specific pages', insert the following code so that the quicktags only appear on wiki pages:

<?php <!--?php
$match 
FALSE;

/* this section controls visibility on EXISTING content */

$types = array('wiki' =--> 1,); if (arg(0) == 'node' &amp;&ampis_numeric(arg(1))) { $nid arg(1); $node node_load(array('nid' =&gt$nid)); $type $node-&gt;type; if (isset($types[$type])) { $match TRUE; } } /* this section controls visibility on NEW content */ if (strpos(request_uri(),"node/add/wiki")) { $match TRUE;} return $match; ?&gt?>

This is important since the buttons you are creating are for wikis formatting only and not for HTML WYSIWYG.

  • Coupes
  • Sports cars
  • Technology Internet
  • HTML
  • wysiwyg editor
  • tinymce-button-style solution
  • http://drupal.org/node/62100#comment-403430Once
  • http://drupal.org/project/quicktags

Section: 

Topic: 

Add new comment