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.

Anmelden oder Registrieren um Kommentare zu schreiben

wla	8862
stBorchert	6003
quiptime	4972
Tobias Bähr	4019
bv	3880
ronald	3810
md	3717
Thoor	3678
Alexander Langer	3416
Exterior	2903

Rund um das Modul WYSIWYG

Benutzeranmeldung

Aktive Forenthemen

Neue Kommentare

Statistik

Hauptmenü

Quicklinks I

Quicklinks II

Quicklinks III

RSS & Twitter