[howto] A fullscreen editor for write your article body

sacripant · 2013-03-11 13:29:16

I read that recement Destry did not write these articles in the interface “textpattern”. And he used to comfort an external software.

I totally agree with him. The only difference is that I chose to install a full screen editor directly into Textpattern

I share this code on Github . It uses Ace editor and need bot_writ-tab-customize.

The editor provides syntax highlighting for textile. I use it but it is really flawed.
For cons, the syntax for markdown is much more complete.

To get a true full screen, use ‘F11’ browser.

It is certainly possible to make a plugin, but I still have no competence in this field.

I tested this code only in Chrome and Firefox

Hopla !

Destry · 2013-05-27 11:20:11

That looks like a great option! If Txp never moves to a doubled-pane, then I will definitely look into this as plan B. ;)

sacripant · 2014-01-23 12:11:24

Hello,

I updated my script with some improvments
Now it’s 1.0

Modifie Editor layout. Now Editor is in left of window. Scroll work better, in all window.
Little Js refactoring
Better sync between Textpattern textarea and Ace Editor.
Added Keyboard Shortcuts
- esc for close fullscreen Editor
- ctrl-S || cmd-S for save Article

you can dowload 1.0 Here
Github Code

In my roadmap :

Make a Textpattern Plugin
Add a white theme for the Editor
Add a help list for Ace Editor Keyboard Shortcut.
Add a AJAX article preview.

@Admin :

Now this message is in Archive. Not good for visibility. What is a better place?

jpdupont · 2014-01-24 13:40:29

Sacripant, thanks for the upgrade …

Yes now the message is in Archive. Could you explain me why ?
And now, with the new forum, I don’t get any news from the previous posts where I was registrated …
So, more difficult to read the forum.

els · 2014-01-24 14:51:52

sacripant wrote #278390:

@Admin :

Now this message is in Archive. Not good for visibility. What is a better place?

Yes, the ‘How-Tos and Examples’ forum doesn’t exist anymore since the forum upgrade. I’ll try and think of something that will make the how-tos that are still relevant more visible.

Edit: how is this?

uli · 2014-01-24 15:53:05

jpdupont wrote #278437:

And now, with the new forum, I don’t get any news from the previous posts where I was registrated …

Jean-Pol, did that happen even after this point in time? If so, please add your annotations in the linked topic.

jpdupont · 2014-01-24 16:23:35

The last mail from the forum is dated DEC 16 2013.

jpdupont · 2014-01-24 16:42:26

I just request a email change and I get a mail from this adress : notify@forum.xpattern.net ???

xpattern ?

els · 2014-01-24 18:59:24

jpdupont wrote #278452:

xpattern ?

That was the forum installation that was tested before the final upgrade, just another host ;) Can you please post your issue in the topic Uli linked to?

Gocom · 2014-01-25 11:28:07

The notify@forum.xpattern.net address is correct. That’s what it should be.

demoncleaner · 2014-02-08 10:51:28

When searching for a plugin that would highlight all tags in an article I stumbled over this one.

I installed it and like it very much.
Only thing is, it does not highlight textile or any other html tags.

I also did not find any other plugin that would do that. There are a couple of Editors/Plugins that would give me something like a code editor with highlighting for forms,pages and styles but I would like to have the tags highlighted in the article textarea.

I guess that would be very convenient for my clients. Because like that it would be fool proof. I could just say… “you can edit everything – just do not touch the little red parts” for example.

So has anybody an idea on how to achieve that or am I missing something on that ace-editor-plugin that will highlight tags or textile automatically as you wrote?
Any help here would be great. I am really wondering if I did not search enough or if the need for that is not shared by anybody else. I think for the non-geek-user (client) of the backend it would be a really helpful thing. Especially when using Stefs amazing smd_macro plugin as a container it would be cool if the macros are highlighted red for example.

Last edited by demoncleaner (2014-02-08 10:53:08)

sacripant · 2014-02-08 21:01:05

demoncleaner wrote #278713:

I installed it and like it very much.

Thanks

Only thing is, it does not highlight textile or any other html tags.

The editor provides syntax highlighting for textile. I use it but it is really flawed. he only highlight block tag, and unlike hightlight for markdown, xml syntax are not highlight in same time.

If you want highlight xml syntax :

In ace-for-write-tab.js file, change line 29

editor.getSession().setMode("ace/mode/textile");

by

editor.getSession().setMode("ace/mode/xml");

And for the moment, my color mode doesn’t support xml. you need change color mode

replace line 35

editor.setTheme("ace/theme/sacripant");

by

editor.setTheme("ace/theme/tomorrow_night_eighties");

you can test differents color modes in Ace kitchen Sink

Textpattern CMS

Textpattern CMS support forum

#1 2013-03-11 13:29:16