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

  • Migration über feeds von D6 auf D8
  • Wie in hook_views_query_alter() einen join auf Tabelle url_alias durchführen?
  • Theme Classy sei installiert, ist aber nicht bei Themes
  • fbsmp\plugins Hilfe
  • Composer 1 zu Composer 2
  • Bitte um Einschätzung: Upgrade von Drupal 7 auf 9
  • Scroll zu View-Ergebnissen nachdem Filter angewendet ist
  • SQL-Injection? User hat sich Zugriff aufs Admin-Konto geholt und Änderungen vorgenommen.
  • [gelöst] Persönliches Kontaktformular, oder interne User Nachrichten
  • Webform Progress Symbol (Loading icon)?
  • Mehrere freie Mitarbeiter:innen gesucht für Kooperation
  • Webform Submission Eingaben über Views ausgeben?
Weiter

Neue Kommentare

  • Gleiches Problem: bootstrap 4
    vor 1 Tag 4 Stunden
  • Da wirst Du den Bug wohl
    vor 1 Tag 7 Stunden
  • Immer noch composer 1 zu 2
    vor 1 Tag 21 Stunden
  • Beziehung Branche Adresse!
    vor 7 Stunden 35 Minuten
  • Sorry, dann gab es das bei
    vor 1 Tag 23 Stunden
  • Beziehung Branche Adresse!
    vor 1 Tag 23 Stunden
  • Auf Englisch heißt das
    vor 2 Tagen 2 Stunden
  • Composer Upgrade bei bestehendem Projekt
    vor 2 Tagen 6 Stunden
  • Du meinst Argument?
    vor 2 Tagen 6 Stunden
  • Um die einzelnen Felder der
    vor 2 Tagen 8 Stunden

Statistik

Beiträge im Forum: 248392
Registrierte User: 19752

Neue User:

  • Aman_Musani
  • Dustinjex
  • Rickywap

» Alle User anzeigen

User nach Punkten sortiert:
wla9288
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 1 Benutzer und 5 Gäste online.

Benutzer online

  • narc

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