Forum

Thread tagged as: Configuration

Perch 3 and MarkItUp Customisation

Hi,

Recently we upgraded to Perch 3 and want to carry over our text editor customisation.

There is an example in the documentation for Redactor on how to do this. https://docs.grabaperch.com/api/editors/

I'm trying to locate an example for MarkItUp. Does anyone have any idea how to implement and if there are any differences?

Thanks
Dan Lee

Dan Lee 1 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

You need to write your Perch.UserConfig.markitup.get() function to return the MarkItUp configuration you want to use.
Dan Lee

Dan Lee 1 points

4 years ago

Ok - I guess what I'm saying is it isn't clear how to write the configuration inside the function for Markdown. Is there any examples or documentation that I can follow?

We originally had the following amends in our configuration file for Markdown which we want to retain across to Perch 3:

{name:'Script type', className:'fa fa-superscript', dropMenu: [
                        {name:'Superscript', className:'fa fa-superscript', openWith:'<sup>', closeWith:'</sup>' },
                        {name:'Subscript', className:'fa fa-subscript', openWith:'<sub>', closeWith:'</sub>' }
                        ]},
        {name:'Text size', className:'fa fa-text-height', dropMenu: [
                        {name:'Big', className:'fa fa-text-height', openWith:'<big>', closeWith:'</big>' },
                        {name:'Small', className:'fa fa-text-height', openWith:'<small>', closeWith:'</small>' }
                        ]},
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Yes, that's right - you'd keep it basically the same. Just return the config object. An example would be the markdownSettings var in the default config.
Dan Lee

Dan Lee 1 points

4 years ago

Ok thanks - I'll take a shot at it and see where I get.
Dan Lee

Dan Lee 1 points

4 years ago

I'm not getting this... am I on the right track here? Full code below removes the buttons from my markdown editors.

Perch.UserConfig.markitup = function(){

  markdownSettings = {
    nameSpace: 'markdown',
    previewParserPath:  '',
    onTab: {keepDefault:false, openWith:'    '},
    onShiftEnter:       {keepDefault:false, openWith:'\n\n'},
    markupSet: [
        {name:'Heading', key:'1', className:'fa fa-header', dropMenu: [
              {name:'Heading 1', className:'fa fa-header', closeWith:function(markItUp) { return miu.markdownTitle(markItUp, '='); }, placeHolder:'Your title here...' },
              {name:'Heading 2', className:'fa fa-header', closeWith:function(markItUp) { return miu.markdownTitle(markItUp, '-'); }, placeHolder:'Your title here...' },
              {name:'Heading 3', className:'fa fa-header', openWith:'### ',      placeHolder:'Your title here...' },
              {name:'Heading 4', className:'fa fa-header', openWith:'#### ',     placeHolder:'Your title here...' },
              {name:'Heading 5', className:'fa fa-header', openWith:'##### ',  placeHolder:'Your title here...' },
              {name:'Heading 6', className:'fa fa-header', openWith:'###### ', placeHolder:'Your title here...' }
              ]},
        {name:'Bold', className:'fa fa-bold', key:'B', openWith:'**', closeWith:'**'},
        {name:'Italic', className:'fa fa-italic', key:'I', openWith:'_', closeWith:'_'},
        {name:'Script type', className:'fa fa-superscript', dropMenu: [
                        {name:'Superscript', className:'fa fa-superscript', openWith:'<sup>', closeWith:'</sup>' },
                        {name:'Subscript', className:'fa fa-subscript', openWith:'<sub>', closeWith:'</sub>' }
                        ]},
        {name:'Text size', className:'fa fa-text-height', dropMenu: [
                        {name:'Big', className:'fa fa-text-height', openWith:'<big>', closeWith:'</big>' },
                        {name:'Small', className:'fa fa-text-height', openWith:'<small>', closeWith:'</small>' }
                        ]},
        {name:'Quotes', className:'fa fa-quote-left', openWith:'> '},
        {name:'Bulleted List', className:'fa fa-list-ul', openWith:'- ' },
        {name:'Numeric List', className:'fa fa-list-ol', openWith:function(markItUp) {
            return markItUp.line+'. ';
        }},
        {name:'Picture', className:'image-upload fa fa-picture-o', openWith:function(markItUp){miu.ImageUpload.upload(markItUp,'markdown');}},
        {name:'File', className:'file-upload fa fa-file-o', openWith:function(markItUp){miu.ImageUpload.upload(markItUp,'markdown',true);}},
        {name:'Link', className:'fa fa-link', key:'L', openWith:'[', closeWith:']([![URL:!:https://]!] "[![Title]!]")', placeHolder:'Your text to link here...' }
    ]
  };


  return  {
    'get': markdownSettings,
  };

}();
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Not really. Try:

Perch.UserConfig.markitup = function(){

    var get = function(profile, config, field) {

        return {
            nameSpace: 'markdown',
            previewParserPath:  '',
            onTab: {keepDefault:false, openWith:'    '},
            onShiftEnter:       {keepDefault:false, openWith:'\n\n'},
            markupSet: [
                {name:'Heading', key:'1', className:'fa fa-header', dropMenu: [
                      {name:'Heading 1', className:'fa fa-header', closeWith:function(markItUp) { return miu.markdownTitle(markItUp, '='); }, placeHolder:'Your title here...' },
                      {name:'Heading 2', className:'fa fa-header', closeWith:function(markItUp) { return miu.markdownTitle(markItUp, '-'); }, placeHolder:'Your title here...' },
                      {name:'Heading 3', className:'fa fa-header', openWith:'### ',      placeHolder:'Your title here...' },
                      {name:'Heading 4', className:'fa fa-header', openWith:'#### ',     placeHolder:'Your title here...' },
                      {name:'Heading 5', className:'fa fa-header', openWith:'##### ',  placeHolder:'Your title here...' },
                      {name:'Heading 6', className:'fa fa-header', openWith:'###### ', placeHolder:'Your title here...' }
                      ]},
                {name:'Bold', className:'fa fa-bold', key:'B', openWith:'**', closeWith:'**'},
                {name:'Italic', className:'fa fa-italic', key:'I', openWith:'_', closeWith:'_'},
                {name:'Script type', className:'fa fa-superscript', dropMenu: [
                                {name:'Superscript', className:'fa fa-superscript', openWith:'<sup>', closeWith:'</sup>' },
                                {name:'Subscript', className:'fa fa-subscript', openWith:'<sub>', closeWith:'</sub>' }
                                ]},
                {name:'Text size', className:'fa fa-text-height', dropMenu: [
                                {name:'Big', className:'fa fa-text-height', openWith:'<big>', closeWith:'</big>' },
                                {name:'Small', className:'fa fa-text-height', openWith:'<small>', closeWith:'</small>' }
                                ]},
                {name:'Quotes', className:'fa fa-quote-left', openWith:'> '},
                {name:'Bulleted List', className:'fa fa-list-ul', openWith:'- ' },
                {name:'Numeric List', className:'fa fa-list-ol', openWith:function(markItUp) {
                    return markItUp.line+'. ';
                }},
                {name:'Picture', className:'image-upload fa fa-picture-o', openWith:function(markItUp){miu.ImageUpload.upload(markItUp,'markdown');}},
                {name:'File', className:'file-upload fa fa-file-o', openWith:function(markItUp){miu.ImageUpload.upload(markItUp,'markdown',true);}},
                {name:'Link', className:'fa fa-link', key:'L', openWith:'[', closeWith:']([![URL:!:https://]!] "[![Title]!]")', placeHolder:'Your text to link here...' }
            ]
          };
    };

    var load = function(cb) {
        cb();
    };

    return  {
        'get': get,
        'load': load
    }

}();