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 - 20: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

  • Content Ex-/Import
  • Wer ist online Block
  • Doppelte Anzeige von Node im View
  • URL-Alias von bestehendem Link wird gelöscht und auf -0 gesetzt 404 Fehler entsteht
  • Ausblenden von Taxonomy wenn diese keinen Inhalt haben
  • Image als Anhang
  • [gelöst] Benutzer erstellen ohne Berechtigung zum ändern von E-Mail oder Passwort
  • HTTP ERROR 500, wenn der Node eines bestimmten Typs gespeichert wird oder ein neuer Inhalt dieses Typs erzeugt werden soll
  • Module modifizieren zb Statuses
  • Exposed Filter einer View in seperatem Block darstellen, wie kann ich die exposed Filter der zug. View deaktivieren
  • Website ohne öffentlichen Zugriff
  • »Geschwister« Nodes anzeigen
Weiter

Neue Kommentare

  • Ohne Fehlermeldungen zu
    vor 5 Stunden 11 Minuten
  • dinmikkith schrieb Ja du hast
    vor 2 Tagen 19 Stunden
  • SaarlandToday schrieb Es gibt
    vor 3 Tagen 3 Stunden
  • ich hab das Problem gefunden!
    vor 3 Tagen 4 Stunden
  • Sorry, das mit dem Theme war
    vor 3 Tagen 4 Stunden
  • Zitat: Es gibt in den
    vor 3 Tagen 5 Stunden
  • Es gibt in dem Template das
    vor 3 Tagen 15 Stunden
  • Zitat: da es dort eine
    vor 3 Tagen 16 Stunden
  • Sorry, dachte das ich das
    vor 3 Tagen 19 Stunden
  • Ich habe den Fehler gemacht
    vor 3 Tagen 20 Stunden

Statistik

Beiträge im Forum: 245940
Registrierte User: 18824

Neue User:

  • Damian1802
  • MrWebMV
  • kiba

» Alle User anzeigen

User nach Punkten sortiert:
wla9007
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3916
ronald3829
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 5 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