rex_markitup – Redaxo be_style Plugin

Kompletter rewrite des bisherigen Markitup Addons mit modernerer/flexiblerer Codebase

Features

• Aktuelle MarkItUp Lib v.1.1.14
• ImageManager Unterstützung
• “smartinsert” Mode minimiert linebreak/whitespace Problematik für Einsteiger deutlich
• Fullscreen Mode(Button)
• Backend UI zum definieren eigener Buttons
• EP zum programmatischen injizieren eigener Buttons aus anderen Addons/Plugins oder Modulen heraus
• Definition einer Markitup textareas lediglich über eine CSS Klasse – kein PHP Code notwendig.
• Auswahl von Buttons/Buttonsets per data Attribut der textarea
• Mehrsprachigkeit – gekoppelt an Redaxo backend Sprache – lang strings per i18n und *.lang Datei
• Fluid Editor Layout..
• ..und ein klein wenig aufgehübscht das ganze

Anwendung im Modul

Aufruf per CSS Klasse

<textarea class="rex-markitup"></textarea>

Data Attribute

<textarea class="rex-markitup" data-buttonset="full"></textarea>
<textarea class="rex-markitup" data-buttons="h1,h2,h3,|,…"></textarea>

Settings

Button CSS Beispiel:

.markItUpButton.markitup-example a {
    background-image: url('path/to/my/example.png');
}

rex_markitup.buttondefinitions Beispiel: (siehe auch MarkItUp Doku)

examplebutton:
{
  name:         'Example Button',
  openWith:     '[foobar]',
  closeWith:    '[/foobar]',
  beforeInsert: function(h) {
    text = "You've just click the "+h.name+" button ";
    text+= "which will wrap '"+h.selection+"' ";
    text+= "with "+h.openWith+" and "+h.closeWith+".";
    alert(text);
  },
  afterInsert:  function(h) {
    text = "The result is now:\n";
    text+= $(h.textarea).val();
    alert(text);
  },
  placeHolder: 'Placeholder Text..'
}

rex_markitup.buttonsets Beispiel:

exampleset:
'h1,h2,h3,|,bold,italic,examplebutton'

Screenshots

Editor @ agk_skin => fixed with parent elem

Editor @ fullscreen mode

Editor @ rexdev_skin => fluid with parent elem