Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Tipps & Tricks ›

Rund um das Modul WYSIWYG

Eingetragen von throgh (5)
am 28.12.2011 - 21:04 Uhr in
  • Tipps & Tricks

Hallo liebe Drupalcenter-Gemeinde!

Im Zuge der Arbeiten an einem Relaunch einer Webseite suchte ich nach einem feinen WYSIWIG-Modul für Drupal 6.22. Gefunden habe ich: http://drupal.org/project/wysiwyg. Natürlich fehlte hier auch noch der entsprechende RTF-Editor. Entschieden habe ich mich hier für http://markitup.jaysalvat.com/home/.

Weiterhin ergänzt habe ich dann BBCode (http://drupal.org/project/bbcode) und Emoticons (http://drupal.org/project/smileys). Jetzt ist natürlich die Frage wie man all diese Module übereinander legen kann und auch die Emoticons im Editor anzeigen kann. Hierzu habe ich einige Änderungen am Modul vornehmen müssen. Diese würde ich gern einmal teilen. Vielleicht helfen sie in Zukunft auch Leuten mit ähnlichen Problemstellungen:

Im Modul WYSIWIG wurden folgende Dateien verändert: "markitup.inc" und "markitup.js".

Die Datei markitup.inc!

<?php

/**
* @file
* Editor integration functions for markItUp.
*/

/**
* Plugin implementation of hook_editor().
*/
function wysiwyg_markitup_editor() {
  $editor['markitup'] = array(
    'title' => 'markItUp',
    'vendor url' => 'http://markitup.jaysalvat.com',
    'download url' => 'http://markitup.jaysalvat.com/downloads',
    'library path' => wysiwyg_get_path('markitup'),
    'libraries' => array(
      '' => array(
        'title' => 'Source',
        'files' => array('markitup/jquery.markitup.js'),
      ),
      'pack' => array(
        'title' => 'Packed',
        'files' => array('markitup/jquery.markitup.pack.js'),
      ),
    ),
    'version callback' => 'wysiwyg_markitup_version',
    'themes callback' => 'wysiwyg_markitup_themes',
    'settings callback' => 'wysiwyg_markitup_settings',
    'plugin callback' => 'wysiwyg_markitup_plugins',
    'versions' => array(
      '1.1.5' => array(
        'js files' => array('markitup.js'),
      ),
    ),
  );
  return $editor;
}

/**
* Detect editor version.
*
* @param $editor
*   An array containing editor properties as returned from hook_editor().
*
* @return
*   The installed editor version.
*/
function wysiwyg_markitup_version($editor) {
  // Changelog was in markitup/markitup/readme.txt <= 1.1.5.
  $changelog = $editor['library path'] . '/markitup/readme.txt';
  if (!file_exists($changelog)) {
    // Changelog was moved up to markitup/CHANGELOG.md after 1.1.5.
    $changelog = $editor['library path'] . '/CHANGELOG.md';
    if (!file_exists($changelog)) {
      return;
    }
  }
  $changelog = fopen($changelog, 'r');
  $line = fgets($changelog);
  if (preg_match('@([0-9\.]+)@', $line, $version)) {
    fclose($changelog);
    return $version[1];
  }
  fclose($changelog);
}

/**
* Determine available editor themes or check/reset a given one.
*
* @param $editor
*   A processed hook_editor() array of editor properties.
* @param $profile
*   A wysiwyg editor profile.
*
* @return
*   An array of theme names. The first returned name should be the default
*   theme name.
*/
function wysiwyg_markitup_themes($editor, $profile) {
  return array('simple', 'markitup');
}

/**
* Return runtime editor settings for a given wysiwyg profile.
*
* @param $editor
*   A processed hook_editor() array of editor properties.
* @param $config
*   An array containing wysiwyg editor profile settings.
* @param $theme
*   The name of a theme/GUI/skin to use.
*
* @return
*   A settings array to be populated in
*   Drupal.settings.wysiwyg.configs.{editor}
*/
function wysiwyg_markitup_settings($editor, $config, $theme) {
  // Whoever is guilty for adding this horrible CSS-file-without-filepath
  // override "feature" to Drupal core... stand in the corner!
  drupal_add_css($editor['library path'] . '/markitup/skins/' . $theme . '/style.css', 'theme');

  $settings = array(
    'root' => base_path() . $editor['library path'] . '/markitup/',
    'nameSpace' => $theme,
    'markupSet' => array(),
  );

  // Add configured buttons or all available.
  $default_buttons = array(
    'bold' => array(
      'name' => t('Bold'),
      'className' => 'markitup-bold',
      'key' => 'B',
      'openWith' => '(!(<strong>|!|<b>)!)',
      'closeWith' => '(!(</strong>|!|</b>)!)',
    ),
    'italic' => array(
      'name' => t('Italic'),
      'className' => 'markitup-italic',
      'key' => 'I',
      'openWith' => '(!(<em>|!|<i>)!)',
      'closeWith' => '(!(</em>|!|</i>)!)',
    ),
    'stroke' => array(
      'name' => t('Strike-through'),
      'className' => 'markitup-stroke',
      'key' => 'S',
      'openWith' => '<del>',
      'closeWith' => '</del>',
    ),
    'list-bullet' => array(
      'name' => t('Bulleted List'),
      'className' => 'markitup-list-bullet',
      'key' => '',
      'openWith' => '<li>',
      'closeWith' => '</li>',
  'multiline' => 'true',
  'openBlockWith' => '<ul>',
  'closeBlockWith' => '</ul>',
    ),
    'list-numeric' => array(
      'name' => t('Numeric List'),
      'className' => 'markitup-list-numeric',
      'key' => '',
      'openWith' => '<li>',
      'closeWith' => '</li>',
  'multiline' => 'true',
  'openBlockWith' => '<ol>',
  'closeBlockWith' => '</ol>',
    ),
    'image' => array(
      'name' => t('Image'),
      'className' => 'markitup-image',
      'key' => 'P',
      'replaceWith' => '<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />',
    ),
    'link' => array(
      'name' => t('Link'),
      'className' => 'markitup-link',
      'key' => 'K',
      'openWith' => '<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>',
      'closeWith' => '</a>',
      'placeHolder' => 'Your text to link...',
    ),
    'emoticon' => array(
      'name' => t('Emoticon'),
      'className' => 'markitup-emoticon',
      'key' => 'E',
      'openWith' => ' :smile: ',
      'closeWith' => '',
  'dropMenu' => array(
'emoticon-smile' => array('name' => t('Smile'), 'className' => 'markitup-emoticon-smile', 'openWith' => ' :smile: ', 'closeWith' => '',),
'emoticon-lol' => array('name' => t('Laughing Loudly'), 'className' => 'markitup-emoticon-lol', 'openWith' => ' :lol: ', 'closeWith' => '',),
'emoticon-bigsmile' => array('name' => t('Big Smile'), 'className' => 'markitup-emoticon-bigsmile', 'openWith' => ' :bigsmile: ', 'closeWith' => '',),
'emoticon-wink' => array('name' => t('Wink'), 'className' => 'markitup-emoticon-wink', 'openWith' => ' :wink: ', 'closeWith' => '',),
'emoticon-tongue' => array('name' => t('Tongue'), 'className' => 'markitup-emoticon-tongue', 'openWith' => ' :tongue: ', 'closeWith' => '',),
'emoticon-shock' => array('name' => t('Shocked'), 'className' => 'markitup-emoticon-shock', 'openWith' => ' :shock: ', 'closeWith' => '',),
'emoticon-flat' => array('name' => t('Stare'), 'className' => 'markitup-emoticon-flat', 'openWith' => ' :stare: ', 'closeWith' => '',),
'emoticon-sad' => array('name' => t('Sad'), 'className' => 'markitup-emoticon-sad', 'openWith' => ' :sad: ', 'closeWith' => '',),
'emoticon-sick' => array('name' => t('Sick'), 'className' => 'markitup-emoticon-sick', 'openWith' => ' :sick: ', 'closeWith' => '',),
'emoticon-angry' => array('name' => t('Angry'), 'className' => 'markitup-emoticon-angry', 'openWith' => ' :angry: ', 'closeWith' => '',),
  ),
    ),
    // @todo
    // 'cleanup' => array('name' => t('Clean-up'), 'className' => 'markitup-cleanup', 'replaceWith' => 'function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") }'),
    'preview' => array(
      'name' => t('Preview'),
      'className' => 'markitup-preview',
      'call' => 'preview',
    ),
  );
  $settings['markupSet'] = array();
  if (!empty($config['buttons'])) {
    foreach ($config['buttons'] as $plugin) {
      foreach ($plugin as $button => $enabled) {
        if (isset($default_buttons[$button])) {
          $settings['markupSet'][$button] = $default_buttons[$button];
        }
      }
    }
  }

  return $settings;
}

/**
* Return internal plugins for this editor; semi-implementation of hook_wysiwyg_plugin().
*/
function wysiwyg_markitup_plugins($editor) {
  return array(
    'default' => array(
      'buttons' => array(
        'bold' => t('Bold'), 'italic' => t('Italic'),
        'stroke' => t('Strike-through'),
'list-bullet' => t('Bulleted List'),
'list-numeric' => t('Numeric List'),
        'image' => t('Image'),
'link' => t('Link'),
'emoticon' => t('Emoticon'),
        'cleanup' => t('Clean-up'),
        'preview' => t('Preview'),
      ),
      'internal' => TRUE,
    ),
  );
}

Die Datei markitup.js!

(function($) {

/**
* Attach this editor to a target element.
*/
Drupal.wysiwyg.editor.attach.markitup = function(context, params, settings) {
  $('#' + params.field, context).markItUp(settings);

  // Adjust CSS for editor buttons.
  $.each(settings.markupSet, function (button) {
if (this.dropMenu) {
$('.' + settings.nameSpace + ' .' + this.className + ' a')
  .css({ backgroundImage: 'url(' + settings.root + 'sets/default/images/' + button + '.png' + ')' })
$.each(this.dropMenu, function (menuitem_imgname) {
$('.' + settings.nameSpace + ' .' + this.className + ' a')
  .css({ backgroundImage: 'url(' + settings.root + 'sets/default/images/' + menuitem_imgname + '.png' + ')' })
});
} else {
$('.' + settings.nameSpace + ' .' + this.className + ' a')
  .css({ backgroundImage: 'url(' + settings.root + 'sets/default/images/' + button + '.png' + ')' })
  //.parents('li').css({ backgroundImage: 'none' });
}
  });
};

/**
* Detach a single or all editors.
*/
Drupal.wysiwyg.editor.detach.markitup = function(context, params) {
  if (typeof params != 'undefined') {
    $('#' + params.field, context).markItUpRemove();
  }
  else {
    $('.markItUpEditor', context).markItUpRemove();
  }
};

})(jQuery);

Ich bin / war mir nicht sicher ob diese Veränderungen nun hier korrekt aufgehoben sind. Aber sofern sie helfen und anderswo funktionstüchtig sind, freue ich mich! Auch um etwas als "Dankeschön" für die freundliche Hilfe vom Nutzer "sense" hier mal in die Gemeinschaft zurückzugeben.

EDIT: Eine Anmerkung meinerseits hierzu noch: Natürlich muss man bei der Veränderung berücksichtigen, dass die Namen der Grafiken hier entsprechend den Array-Einträgen vergeben sind.

‹ Website-Links automatisiert anpassen Howto: Drupal mit und ohne ssl bei all-inkl ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Komplexe Layouts per Drag & Drop mit Layout Paragraphs
  • Reload der vollständigen Seite
  • [doch nicht gelöst] View zeigt unter Felder falsche Werte
  • Die Splash Awards Deutschland und Österreich sind zurück!
  • [gelöst] Views in Seite einbetten
  • Fehler nach Drupal Core Update auf 7.91
  • (Gelöst) Taxonomie Beziehungen ausblendbar im Backend?
  • Suche Upgradeempfehlungen einer existenten Drupal7 Site auf 9/10?
  • Develop Custom Field in Views
  • Wie View mit einem Array von ids filtern?
  • Wie befülle ich den Cache automatisch? [gelöst]
  • [gelöst] "EntityMetadataWrapperException: Invalid data value given." für Datum-Feld in Webform
Weiter

Neue Kommentare

  • Sehr interessanter und
    vor 2 Stunden 21 Minuten
  • Works as designed – Erwartetes Verhalten
    vor 2 Tagen 1 Stunde
  • Welcher Fehler wird im Drupal
    vor 2 Tagen 16 Stunden
  • Zu früh gefreut. Jetzt
    vor 2 Tagen 18 Stunden
  • Filterkriterien » Hinzufügen » Kategorie » webformulareingabe
    vor 2 Tagen 18 Stunden
  • Müsste da noch ein Filter auf
    vor 2 Tagen 23 Stunden
  • Hast Du mal die Ausgabe des
    vor 2 Tagen 23 Stunden
  • Hab jetzt noch mal neu ein
    vor 2 Tagen 23 Stunden
  • Kann es sein, dass noch ein
    vor 4 Tagen 4 Stunden
  • Lösung
    vor 4 Tagen 15 Stunden

Statistik

Beiträge im Forum: 247950
Registrierte User: 19628

Neue User:

  • vagneralex3
  • zahid hasan
  • Davidenabs

» Alle User anzeigen

User nach Punkten sortiert:
wla9218
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 2 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association