Forum

Thread tagged as: Suggestions

Multiple text editor config options

Something I've greatly enjoyed in another CMS is the possibility of using different configs for the wysiwyg text editor. The common use case is having a blog where the editor can add images and video, and then elsewhere in the site a wysiwyg is limited to bold/italic/links (or whatever is needed).

I am comfortable setting up the logic in the wysiwyg's _config.inc file, but there isn't an easy way I can see to get a variable in there without hijacking a pre-existing attribute like "size" to pass in a class name.

I'm imagining something like this:

<perch:content id="text" type="textarea" label="Text" editor="redactor" html="true" config="config_handle" />

It would then be up to the developer to set up the multiple configs in wysiwyg's _config.inc file based on the variable picked up from self.attr('data-config').

So perhaps the more general request is to enable pass-through of attributes from template tags to control panel form fields. Maybe that's preposterous, you tell me.
Kirk Roberts

Kirk Roberts 0 points

  • 6 years ago
Andrés Fernández

Andrés Fernández 5 points

6 years ago

Kirk, all you need is to specify the editor-config atribute in your textarea tag and add a little code in your redactor _config.inc.

First you add a global variable to define you config options, you can add it in _plugins/ui/config.inc or in your editor's config, in this case plugins/editors/redactor/_config.inc.

Example:

<script>
// Define editors config options
var PerchEditorOptions = {
  redactor: {
    content: {
      buttons: ['html', 'formatting', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link', 'file', 'video'],
      perchLinks: Perch.path + '/addons/plugins/editors/redactor/plugins/perchlinks/links.php',
      plugins: ['perchlinks', 'bufferbuttons', 'underline', 'video' ]
    },
    simple : {
      buttons: ['html', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'link'],
      perchLinks: Perch.path + '/addons/plugins/editors/redactor/plugins/perchlinks/links.php',
      plugins: ['perchlinks',  'underline']
    },
    minimal: {
      buttons: ['bold', 'italic', 'link'],
      perchLinks: Perch.path + '/addons/plugins/editors/redactor/plugins/perchlinks/links.php',
      plugins: ['perchlinks',  'underline']
    }
  },
  markitup: {}
};
</script>

The snippet above is in my ui/_config.inc, that's why I'm using the Perch.path variable. If you prefer to define the options in your editor's config file, you would use PERCH_LOGINPATH that's replaced by Perch.

Then in my redactor config file I have:

<script type="text/javascript" charset="utf-8"> 
$(function() {

  // Modify Redactor global defaults
  (function() {
    var defaults = {
      imageUpload: 'PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/upload.php?filetype=image',
      fileUpload: 'PERCH_LOGINPATH/addons/plugins/editors/redactor/perch/upload.php',
      cleanStyleOnEnter: true,
      removeComments: true,
      buttonSource: true,
      formatting: [],
      formattingAdd: [
        { tag: 'p', title: 'Párrafo Normal' },
        { tag: 'p', title: 'Párrafo Destacado', class: 'destacado' },
        { tag: 'blockquote', title: 'Cita' }
      ]
    };

    for (var option in defaults) {
      if ($.Redactor.opts.hasOwnProperty(option))
        $.Redactor.opts[option] = defaults[option];
    }
  })();

This modifies the default variables so I don't have to do so in the EditorOptions, then the rest is:

  var set_up_redactor = function() {
    $('textarea.redactor:not([data-init])').each(function(i,o)
    {
      var self = $(o);
      var uploadFields = {
        'width'  :  self.attr('data-width')||'',
        'height' :  self.attr('data-height')||'',
        'crop'   :  self.attr('data-crop')||'',
        'quality':  self.attr('data-quality')||'',
        'sharpen':  self.attr('data-sharpen')||'',
        'density':  self.attr('data-density')||'',
        'bucket' :  self.attr('data-bucket')||'default'
      };
      var config = {},
          editorConfig = self.attr('data-editor-config') || null;

      // defined in addons/plugins/ui/_config.inc
      var options = PerchEditorOptions['redactor'] || {};

      if (options.hasOwnProperty(editorConfig)) {
        config = options[editorConfig];
      }
      config.uploadFileFields = config.uploadImageFields = uploadFields;
      // grab textarea height from the element style
      config.minHeight = parseInt(self.css('height')) || 180;

      self.wrap('<div class="editor-wrap" style="float:left;"></div>');
      self.redactor(config);
      self.attr('data-init', true);
    });
  };

  set_up_redactor();

  $(window).on('Perch_Init_Editors', function(){ set_up_redactor(); });
});
</script>

So the perch tag would be:

<perch:content id="text" type="textarea" label="Text" editor="redactor" html="true" editor-config="content" />
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Sounds reasonable. I thought we actually had something to do this, so I guess no reason not to add it if it's not there.
Kirk Roberts

Kirk Roberts 0 points

6 years ago

Thanks Andrés and Drew. Andrés: thank you for sharing your code! The detail in your answer leads me to believe you have this working, but in my previous tests I wasn't able to get the data-config="" to show up in the control panel markup, hence my suggestion. That's the missing piece of the puzzle.
Kirk Roberts

Kirk Roberts 0 points

6 years ago

Ah, now I see. It HAS to be "editor-config", it can't be any attribute I dream up. Thanks!
Drew McLellan

Drew McLellan 2638 points
Perch Support

6 years ago

Ah yes, see, I thought we had that.

In my defence, it's a lot of code to keep track of!
Kirk Roberts

Kirk Roberts 0 points

6 years ago

Andrés, is the PerchLinks plugin your own device? I just did something potentially similar with redactor's definedLinks plugin, but I'm curious what PerchLinks does.
Andrés Fernández

Andrés Fernández 5 points

6 years ago

Yes, it's a custom plugin based on definedLinks. Adds a select box to the link dialog with a list of perch pages.
Kirk Roberts

Kirk Roberts 0 points

6 years ago

Cool, thanks for the reply. Using definedLinks is great, but I can see how it might be unwieldy with lots of pages/posts/etc. I wonder if in a custom plugin the Chosen jquery plugin could be added for a searchable drop-down. Sounds like something for me to explore when I'm feeling spunky.