Textpattern tips, tutorials and code snippets

Distraction free writing environment for Textpattern

Textpattern is more than (not just) a blogging platform, but our CMS makes many references to blogging with Textile or the “Just write” concept.

But in practice, writing a blog post directly in the Textpattern Write Tab is unfortunately not very comfortable. And I think that many bloggers use word processing tools and then copy and paste into the CMS body textarea.

This practice of copy and paste however still has flaws: there are not many desktop word processors that supports the Textile syntax (Markdown has a better reputation), so you should always manage and/or check the syntax from the Textpattern interface. And this becomes even more complicate when you want to use Textpattern tags in the body of your article (eg inserting images).

I therefore propose a small script that allows you to add a distraction free writing environment for writing your articles in Textpattern.

Note: _For French users, documentation is available on my website.

Get started

  • To add the custom JS in write tab, install and activate the plugin bot_write_tab_customize
  • Download the latest version of Fullscreen text editor for Textpattern via my Github account.
  • Unzip the archive and copy the ace-for-write-tab/ folder in the /textpattern folder
  • Since your Textpattern back-office, paste the 3 lines of code below in Extensions> Write Tab customize> Additional js code and Save.
<link rel="stylesheet" href="ace-for-write-tab/theme-sacripant.css" />
<script src="ace-for-write-tab/src/ace.js" type="text/javascript"></script>
<script src="ace-for-write-tab/ace-for-write-tab.js" type="text/javascript"></script>

Usage

For a new article, the best practice is to enter Title and Sort and display informations (section + category) of the article, select Draft as Status and Save.

Click on the button available nearby Body label to open the editor.

How it works

The script simply opens an Ace Editor (synchronized with the body textarea) over the Textpattern interface.

Benefits

  • Have more comfortable interface for typing.
  • A syntax highlighting (pretty basic and perfectible) for Textile syntaxe.
  • Save your text with the keyboard shortcuts ctrl/cmd-s ;
  • And all the benefits of Ace Editor:
    • Automatic indent and outdent.
    • Search and replace.
    • multiple selections;
    • Displays hidden characters.
    • Drag and drop text using the mouse.
    • Lines duplication;

To Do

  • Add a white theme for the Editor
  • Add a help list for Ace Editor Keyboard Shortcut.
  • Add a Live reload article preview.
  • … Make a Textpattern Plugin.

For more information, see the forum thread on this topic.

1 Comment Comment feed

  • andor
  • 3 August 2015

I'd love to see this implemented for forms and pages like soo_edit