Inputfield EasyMDE

[Robin S]

An inputfield module that brings EasyMDE Markdown editor to ProcessWire.

EasyMDE is a fork of SimpleMDE, for which there is an existing PW module. Inputfield EasyMDE has a few advantages though:

• EasyMDE seems to be more actively developed than SimpleMDE, which hasn't seen any updates for several years.
• You can define options for Inputfield EasyMDE.
• Inputfield EasyMDE can be used in Repeater fields and in custom fields for File/Image fields.

 

Inputfield EasyMDE

EasyMDE (Easy Markdown Editor) as an inputfield for ProcessWire.

EasyMDE is a Markdown editor with some nice features, allowing users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. More information is at the EasyMDE website.

Installation

Install the Inputfield EasyMDE module.

Usage

Create a new textarea field, and in the "Inputfield Type" dropdown choose "EasyMDE". Save the field and if you like you can then configure the EasyMDE options for the field as described below.

To convert Markdown to HTML you can install the core TextformatterMarkdownExtra module and apply the textformatter to the field. Alternatively you can use $sanitizer->entitiesMarkdown() on the field value, e.g.

echo $sanitizer->entitiesMarkdown($page->your_field_name, ['fullMarkdown' => true]);

Configuration

On the "Input" tab of the field settings you can define EasyMDE options for the field in JSON format. Refer to the EasyMDE documentation for the available options. Keys in the JSON must be surrounded with double quotes.

Example:

"toolbar": ["bold", "italic", "heading", "|", "side-by-side"],  
"sideBySideFullscreen": false

 

https://github.com/Toutouwai/InputfieldEasyMDE
https://processwire.com/modules/inputfield-easy-mde/

[szabesz]

This is great! Finally it is easily possible to ditch CKEditor. Thank you so much Robin!

[szabesz]

2 hours ago, Robin S said:

Usage

Create a new textarea field, and in the "Inputfield Type" dropdown choose "EasyMDE". Save the field and if you like you can then configure the EasyMDE options for the field as described below.

You might want to add that using the Markdown/Parsedown Extra textformatter is needed as well. It might be obvious to some, but first time I tried without it ? 

[bernhard]

Thx Robin for another great module! ? 

I'm always stripping down the interface of CKEditor as much as possible using your great hooks. I wonder where and why you'd be using this field? I think markdown is still too complicated for clients.

2 hours ago, Robin S said:

can be used in Repeater fields and in custom fields for File/Image fields.

I'm not using any of those nowadays. Maybe that's why I can't think of where to use this field at the moment. But I'd be happy to hear where you are using it and what you dislike with ckeditor (or why you built the module in the first place). The only thing that I really don't like is copy/paste issues with custom formatting that can get annoying. But there's also a solution for this here.

[szabesz]

2 hours ago, Robin S said:

Configuration

On the "Input" tab of the field settings you can define EasyMDE options for the field in JSON format. Refer to the EasyMDE documentation for the available options. Keys in the JSON must be surrounded with double quotes.

@Robin S I cannot figure out how to style the preview. Have you already done that? Looks like the option named "previewClass" should be used somehow but I do not get what exactly this means: "previewClass: A string or array of strings that will be applied to the preview screen when activated. Defaults to "editor-preview".

Also, the example provided does not help much either:

previewClass: "my-custom-styling",
previewClass: ["my-custom-styling", "more-custom-styling"],

my-custom-styling it says, but where is it defined and how?

[Robin S]

21 minutes ago, szabesz said:

You might want to add that using the Markdown/Parsedown Extra textformatter is needed as well.

This module is just the inputfield and doesn't get involved with what the user might want to do with the field contents. But I take your point that some users might not know how to convert Markdown to HTML, so thanks for raising it. Using the textformatter you suggested is one way to get HTML from Markdown, or alternatively you could use $sanitizer->entitiesMarkdown() on the field value. I've added a paragraph to the readme. 

 

26 minutes ago, bernhard said:

But I'd be happy to hear where you are using it

For me personally, the current application is for getting HTML out of custom fields for File/Image fields because CKEditor isn't supported there. Although I emailed Ryan today with some suggested fixes for getting CKEditor working there so hopefully that might change soon.

More broadly I think some people just prefer working with Markdown rather than a full-blown WYSIWYG, so this is an inputfield for them. ?

 

1 hour ago, szabesz said:

I cannot figure out how to style the preview.

I don't think EasyMDE has options for loading custom CSS - the previewClass option is just if you want to specify a different class name than the default on the preview wrapper element. If you want to target the preview element with custom CSS in Page Edit you could write style rules like this:

.InputfieldEasyMDE .editor-preview h1 { color:red; }

And load your custom CSS file with AdminOnSteroids or with a hook like this:

$wire->addHookBefore('ProcessPageEdit::execute', function(HookEvent $event) {
	$config = $event->wire()->config;
	$config->styles->add($config->urls->templates . 'custom-styles.css');
});

 

[szabesz]

15 minutes ago, Robin S said:

the previewClass option is just if you want to specify a different class name than the default on the preview wrapper element.

Thanks for the explanation, now it all makes sense to me ?