Forum

Thread tagged as: Question, Configuration

A more limited markitup editor?

The editors at my client need to make very limited styling to text entered in a textile field and to establish some words as links. Is there a cut down version of the markitup interface that would only show the user - for example - bold and link options, and would eliminate other styling options like h1 h2, underscore, li etc? I've found that when they have too many styling possibilities that mistakes occur.
Peter Hammarling

Peter Hammarling 0 points

  • 6 years ago
Robert Ketter

Robert Ketter 103 points

6 years ago

This could be done with blocks and check boxes in templates. otherwise, you could just use textile which is a bit harder to learn, but very simple once understood.

RK
Peter Hammarling

Peter Hammarling 0 points

6 years ago

Thanks for the suggestions. I think that adding links in the textile only field is not intuitive enough for editors in a hurry and errors would result. Could explain a little more what you mean by using blocks and check boxes?
Fishtank Creative

Fishtank Creative 2 points

6 years ago

https://docs.grabaperch.com/video/v/introduction-to-blocks/

Currently using blocks and just thought I would paste what helped me
Peter Hammarling

Peter Hammarling 0 points

6 years ago

Thanks, that's interesting and looks useful but I don't see how one would use perch blocks to limit the styling choices while editing a field of text.

What I'd like to be able to do is offer editors less text styling options while maintaining a more intuitive interface than bare textile, say, like markitup.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

You can use the editor-config attribute to pass through a configuration option to the textarea. The value gets assigned as data-editor-config="your-value" which you can then look for in the JavaScript and pick different configuration options based on it.
Peter Hammarling

Peter Hammarling 0 points

6 years ago

Thanks Drew, that sounds ideal. Possibly a bit geeky for me but I'll give it a go. But a couple more questions:

Where do I establish that editor-config attribute? In the perch_content tag? In the template perch:content? Somewhere else?

What's the name of that js file and where would I find it?

Would the effect of the change then be global for every place that I'd specified editor="markitup?

Would the change be overwritten with Perch updates?
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

You'd use it like this:

 <perch:content id="text" type="textarea" editor-config="restricted" editor="markitup" textile="true" />

You'd then need to look for the data-editor-config attribute in this file:

/perch/addons/plugins/editors/markitup/config.js

This would get overwritten if you updated MarkItUp, yes.
Peter Hammarling

Peter Hammarling 0 points

6 years ago

I was able to edit the 'config.js' inside the markitup folder so as to eliminate unwanted styling options by deleting lines like

{name:'Stroke through', className:'fa fa-strikethrough', closeWith:'-', openWith:'-'}

but of course it acts globally on the whole site and not just in one instance. I tried duplicating and renaming the markitup folder to 'markitup-custom' and adjusting path names wherever, but if I change the perch:content to editor="markitup-custom" it isn't picked up.

data-editor-config doesn't exist in markitup/config.js or anywhere that I could find.
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

It's not in the config.js - it's an attribute that gets added to the textarea. This enables you to use it in your JavaScript to apply the desired configuration to each textarea. The code doesn't exist to do that - it's a mechanism to enable you to do that with your own code if you have the need.