Questions answered by this recipe

How can I edit PmWiki pages using a rich-text (WYSIWYG) editor instead of the native textarea?

Description

RichEdit replaces PmWiki's standard textarea editor with a rich-text editing interface that allows users to format content visually while working directly with PmWiki markup. The editor converts rich-text formatting to PmWiki markup on save/preview, maintaining compatibility with all PmWiki features.

Features

• Visual formatting - Bold, italic, underline, headings, alignment
• Toolbar interface - Easy access to formatting options
• Direct markup generation - Converts rich-text to clean PmWiki markup
• Manual markup insertion - Modal editor for inserting custom PmWiki markup
• Preview support - Preview pages before saving
• Keyboard shortcuts - Ctrl+B (bold), Ctrl+I (italic), Ctrl+U (underline), Ctrl+S (save)
• Site-wide replacement - Works on all pages automatically
• Preserves unknown markup - Passes through markup not explicitly handled

Supported Markup (V1)

• Bold: '''text'''
• Italic: //text//
• Underline: [_text_] (custom markup added by recipe)
• Headings: !, !!, !!!, !!!!
• Code blocks: [@code@]
• Text sizing: [-small-], [+large+]
• Alignment: %left%, %center%, %right%

Installation

Requirements

• PmWiki 2.2.0 or later
• Modern web browser with contenteditable support

Download

Download the following files and place them in your PmWiki installation:

• Attach:richedit.php? → cookbook/richedit/richedit.php
• Attach:richedit-template.php? → cookbook/richedit/richedit-template.php
• Attach:richedit.js? → pub/richedit/richedit.js
• Attach:richedit.css? → pub/richedit/richedit.css

Installation steps

1. Create directories:

   * cookbook/richedit/
   * pub/richedit/

2. Place files in appropriate directories as shown above

3. Add to local/config.php:

include_once("$FarmD/cookbook/richedit/richedit.php");

4. Clear browser cache and reload

Configuration

No configuration required. RichEdit automatically replaces the edit interface site-wide.

Usage

1. Navigate to any page and click Edit
2. Use the toolbar buttons to format text:
   1. B - Bold
   2. I - Italic
   3. U - Underline
   4. H1-H4 - Heading levels
   5. '''

      ]''' - Code block
      ## '''[-]''' - Small text
      ## '''[+]''' - Large text
      ## '''⬅''' - Align left
      ## '''↔''' - Align center
      ## '''➡''' - Align right
      ## '''</>''' - Insert custom PmWiki markup
      # Click '''Preview''' to see how the page will look
      # Click '''Save''' to save changes
      # Click '''Cancel''' to discard changes
      
      !!! Manual Markup Insertion
      
      Click the '''</>''' button to open the markup editor modal. This allows you to:
      * Insert PmWiki directives (e.g., [@(:include PageName:)

      )

• Add custom recipe markup
• Insert any PmWiki markup not directly supported by toolbar buttons

The markup you insert will be rendered when you preview or save.

Keyboard Shortcuts

• Ctrl+B or Cmd+B - Bold
• Ctrl+I or Cmd+I - Italic
• Ctrl+U or Cmd+U - Underline
• Ctrl+S or Cmd+S - Save

Troubleshooting

Editor doesn't appear

• Check that files are in correct directories
• Verify config.php includes the recipe
• Check browser console for JavaScript errors
• Clear browser cache

Formatting not converting properly

• Use Preview to check markup before saving
• Some complex nested formatting may need manual adjustment
• Use the manual markup editor (</>button) for complex cases

Conflicts with other recipes

• RichEdit intercepts the edit action
• If another recipe also intercepts edit, load RichEdit last
• Check $HandleActions['edit'] for conflicts

Known Limitations

• Lists (bulleted/numbered) not yet supported (V2)
• Tables not yet supported (V2)
• Links require manual markup insertion (V2)
• Images require manual markup insertion (V2)
• Complex nested formatting may need adjustment

Future Enhancements (V2+)

• Visual representation of unknown markup blocks
• List (bulleted/numbered) support
• Table editing interface
• Link insertion dialog
• Image upload and insertion
• Undo/redo functionality
• Auto-save drafts
• Collaborative editing

Release Notes

• 2025-01-07 - Version 1.0 initial release
  • Basic text formatting (bold, italic, underline)
  • Heading levels (H1-H4)
  • Text alignment (left, center, right)
  • Code blocks
  • Text sizing (small, large)
  • Manual markup insertion modal
  • Preview and save functionality

See Also

• Edit Form
• WikiSandbox - Test the editor
• Basic Editing

Contributors

• Kirk Siqveland - Original author

Comments

(:comment:)

• RichEdit-Talk

(:commentbox:)