• View
• Edit
• History
• Print
• Backlinks

JsEditToolbar

Description

A toolbar for the edit form with regex find & replace tools to work on (selected)) text in the edit text box. It is using javascript and is complementing GUI edit buttons. There are six tools at present:

• Find & Replace, with regex, word, case insensitivity options
• Convert to Title Case
• Convert to UPPER CASE
• Convert to lower case
• Remove line breaks
• Trim spaces left and right

All these can act on a text selection, or the whole text.

Installation

Download jsedittoolbar.zipΔ and copy script to cookbook and the pub/edittoolbar folder to the pub directory. Install in config like:

$EnableEditToolbar = 1;
if($action=='edit')
include_once("$FarmD/cookbook/jsedittoolbar.php");

Edit page Site/EditForm and add before (:input e_textarea:) this markup:
(:e_toolbar:) When editing a page you should now see a number of tool buttons, including Find and Replace input boxes.

While this installations adds via the (:e_toolbar:) directive several HTML input controls making up the toolbar, the functionality is entirely based on javascript, and also makes use of PmWiki's native guiedit javascript functions.

Configuration

Nothing nees to be configured, but in the php script by changing the number in the $EditToolbar array for any of the six tools one can rearrange the order they are placed. And setting a number to 0 will remove it from display.

Internationalization

The following strings can be translated in an XLPage
ready for copying into array:

  'Find' => '',
  'find pattern or term'  => '',
  'Replace' => '',
  'replacement text'  => '',
  'replace in selection'  => '',
  'Word' => '', 
  'whole word'  => '',
  'case insensitive'  => '',
  'regular expression'  => '',
  'select all'  => '',
  'Page'  => '',
  'convert to Title Case'  => '',
  'convert to UPPER CASE'  => '',
  'convert to lower case' => '', 
  'remove line breaks'  => '',
  'trim spaces from lines'  => '',

Usage

For Find and Replace: enter your search term and replacement string, select options in checkboxes, THEN select the text portion, and only then click the Replace button.
For the other tools: select the text portion, or click the Page checkbox, then click on the tool button image. The tools act on the text in the textarea, you should see the change. You may wish to Preview before saving the page edit.

The Find input can accept regex patterns.

Shortcomings, perhaps fixable:

• There is no highlighting of found text.
• The inputs do not remember their previous values.
• Search patterns cannot be saved for future recalls.
• When using the Find & Replace tool the browser's Undo feature seems not working, so if things went wrong, one needs to cancel the page edit and start again.

Notes on creating this script

This recipe sprang from a need for a tool to remove line breaks and insert spaces instead, on paragraphs from imported pdf and other texts. Petko kindly gave me a solution using javascript based on the pmWiki js utilites and the guidedit js script. I learned a lot, and got the idea to expand making some other tools. But I shied away from the possibility to have all the tools created entirely in javascript, so I settled on a 'hybrid' approach I could understand: creating HTML input elements from within PHP, and having the js act from those. I do like to look at HTML source and to be able to relate that back to PHP, CSS and JS.

To do / some day / maybe

If you have future plans or wishes for this recipe.

Change log / Release notes

• 2026-01-30: initial release

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also

Contributors

Comments

See discussion at JsEditToolbar-Talk