wysiwyg.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. (function($) {
  2. /**
  3. * Initialize editor libraries.
  4. *
  5. * Some editors need to be initialized before the DOM is fully loaded. The
  6. * init hook gives them a chance to do so.
  7. */
  8. Drupal.wysiwygInit = function() {
  9. // This breaks in Konqueror. Prevent it from running.
  10. if (/KDE/.test(navigator.vendor)) {
  11. return;
  12. }
  13. jQuery.each(Drupal.wysiwyg.editor.init, function(editor) {
  14. // Clone, so original settings are not overwritten.
  15. this(jQuery.extend(true, {}, Drupal.settings.wysiwyg.configs[editor]));
  16. });
  17. };
  18. /**
  19. * Attach editors to input formats and target elements (f.e. textareas).
  20. *
  21. * This behavior searches for input format selectors and formatting guidelines
  22. * that have been preprocessed by Wysiwyg API. All CSS classes of those elements
  23. * with the prefix 'wysiwyg-' are parsed into input format parameters, defining
  24. * the input format, configured editor, target element id, and variable other
  25. * properties, which are passed to the attach/detach hooks of the corresponding
  26. * editor.
  27. *
  28. * Furthermore, an "enable/disable rich-text" toggle link is added after the
  29. * target element to allow users to alter its contents in plain text.
  30. *
  31. * This is executed once, while editor attach/detach hooks can be invoked
  32. * multiple times.
  33. *
  34. * @param context
  35. * A DOM element, supplied by Drupal.attachBehaviors().
  36. */
  37. Drupal.behaviors.attachWysiwyg = {
  38. attach: function (context, settings) {
  39. // This breaks in Konqueror. Prevent it from running.
  40. if (/KDE/.test(navigator.vendor)) {
  41. return;
  42. }
  43. $('.wysiwyg', context).once('wysiwyg', function () {
  44. if (!this.id || typeof Drupal.settings.wysiwyg.triggers[this.id] === 'undefined') {
  45. return;
  46. }
  47. var $this = $(this);
  48. var params = Drupal.settings.wysiwyg.triggers[this.id];
  49. for (var format in params) {
  50. params[format].format = format;
  51. params[format].trigger = this.id;
  52. params[format].field = params.field;
  53. }
  54. var format = 'format' + this.value;
  55. // Directly attach this editor, if the input format is enabled or there is
  56. // only one input format at all.
  57. if ($this.is(':input')) {
  58. Drupal.wysiwygAttach(context, params[format]);
  59. }
  60. // Attach onChange handlers to input format selector elements.
  61. if ($this.is('select')) {
  62. $this.change(function() {
  63. // If not disabled, detach the current and attach a new editor.
  64. Drupal.wysiwygDetach(context, params[format]);
  65. format = 'format' + this.value;
  66. Drupal.wysiwygAttach(context, params[format]);
  67. });
  68. }
  69. // Detach any editor when the containing form is submitted.
  70. $('#' + params.field).parents('form').submit(function (event) {
  71. // Do not detach if the event was cancelled.
  72. if (event.isDefaultPrevented()) {
  73. return;
  74. }
  75. Drupal.wysiwygDetach(context, params[format], 'serialize');
  76. });
  77. });
  78. },
  79. detach: function (context, settings, trigger) {
  80. var wysiwygs;
  81. // The 'serialize' trigger indicates that we should simply update the
  82. // underlying element with the new text, without destroying the editor.
  83. if (trigger == 'serialize') {
  84. // Removing the wysiwyg-processed class guarantees that the editor will
  85. // be reattached. Only do this if we're planning to destroy the editor.
  86. wysiwygs = $('.wysiwyg-processed', context);
  87. }
  88. else {
  89. wysiwygs = $('.wysiwyg', context).removeOnce('wysiwyg');
  90. }
  91. wysiwygs.each(function () {
  92. var params = Drupal.settings.wysiwyg.triggers[this.id];
  93. Drupal.wysiwygDetach(context, params, trigger);
  94. });
  95. }
  96. };
  97. /**
  98. * Attach an editor to a target element.
  99. *
  100. * This tests whether the passed in editor implements the attach hook and
  101. * invokes it if available. Editor profile settings are cloned first, so they
  102. * cannot be overridden. After attaching the editor, the toggle link is shown
  103. * again, except in case we are attaching no editor.
  104. *
  105. * @param context
  106. * A DOM element, supplied by Drupal.attachBehaviors().
  107. * @param params
  108. * An object containing input format parameters.
  109. */
  110. Drupal.wysiwygAttach = function(context, params) {
  111. if (typeof Drupal.wysiwyg.editor.attach[params.editor] == 'function') {
  112. // (Re-)initialize field instance.
  113. Drupal.wysiwyg.instances[params.field] = {};
  114. // Provide all input format parameters to editor instance.
  115. jQuery.extend(Drupal.wysiwyg.instances[params.field], params);
  116. // Provide editor callbacks for plugins, if available.
  117. if (typeof Drupal.wysiwyg.editor.instance[params.editor] == 'object') {
  118. jQuery.extend(Drupal.wysiwyg.instances[params.field], Drupal.wysiwyg.editor.instance[params.editor]);
  119. }
  120. // Store this field id, so (external) plugins can use it.
  121. // @todo Wrong point in time. Probably can only supported by editors which
  122. // support an onFocus() or similar event.
  123. Drupal.wysiwyg.activeId = params.field;
  124. // Attach or update toggle link, if enabled.
  125. if (params.toggle) {
  126. Drupal.wysiwygAttachToggleLink(context, params);
  127. }
  128. // Otherwise, ensure that toggle link is hidden.
  129. else {
  130. $('#wysiwyg-toggle-' + params.field).hide();
  131. }
  132. // Attach editor, if enabled by default or last state was enabled.
  133. if (params.status) {
  134. Drupal.wysiwyg.editor.attach[params.editor](context, params, (Drupal.settings.wysiwyg.configs[params.editor] ? jQuery.extend(true, {}, Drupal.settings.wysiwyg.configs[params.editor][params.format]) : {}));
  135. }
  136. // Otherwise, attach default behaviors.
  137. else {
  138. Drupal.wysiwyg.editor.attach.none(context, params);
  139. Drupal.wysiwyg.instances[params.field].editor = 'none';
  140. }
  141. }
  142. };
  143. /**
  144. * Detach all editors from a target element.
  145. *
  146. * @param context
  147. * A DOM element, supplied by Drupal.attachBehaviors().
  148. * @param params
  149. * An object containing input format parameters.
  150. * @param trigger
  151. * A string describing what is causing the editor to be detached.
  152. *
  153. * @see Drupal.detachBehaviors
  154. */
  155. Drupal.wysiwygDetach = function (context, params, trigger) {
  156. // Do not attempt to detach an unknown editor instance (Ajax).
  157. if (typeof Drupal.wysiwyg.instances[params.field] == 'undefined') {
  158. return;
  159. }
  160. trigger = trigger || 'unload';
  161. var editor = Drupal.wysiwyg.instances[params.field].editor;
  162. if (jQuery.isFunction(Drupal.wysiwyg.editor.detach[editor])) {
  163. Drupal.wysiwyg.editor.detach[editor](context, params, trigger);
  164. }
  165. };
  166. /**
  167. * Append or update an editor toggle link to a target element.
  168. *
  169. * @param context
  170. * A DOM element, supplied by Drupal.attachBehaviors().
  171. * @param params
  172. * An object containing input format parameters.
  173. */
  174. Drupal.wysiwygAttachToggleLink = function(context, params) {
  175. if (!$('#wysiwyg-toggle-' + params.field).length) {
  176. var text = document.createTextNode(params.status ? Drupal.settings.wysiwyg.disable : Drupal.settings.wysiwyg.enable);
  177. var a = document.createElement('a');
  178. $(a).attr({ id: 'wysiwyg-toggle-' + params.field, href: 'javascript:void(0);' }).append(text);
  179. var div = document.createElement('div');
  180. $(div).addClass('wysiwyg-toggle-wrapper').append(a);
  181. $('#' + params.field).after(div);
  182. }
  183. $('#wysiwyg-toggle-' + params.field)
  184. .html(params.status ? Drupal.settings.wysiwyg.disable : Drupal.settings.wysiwyg.enable).show()
  185. .unbind('click.wysiwyg', Drupal.wysiwyg.toggleWysiwyg)
  186. .bind('click.wysiwyg', { params: params, context: context }, Drupal.wysiwyg.toggleWysiwyg);
  187. // Hide toggle link in case no editor is attached.
  188. if (params.editor == 'none') {
  189. $('#wysiwyg-toggle-' + params.field).hide();
  190. }
  191. };
  192. /**
  193. * Callback for the Enable/Disable rich editor link.
  194. */
  195. Drupal.wysiwyg.toggleWysiwyg = function (event) {
  196. var context = event.data.context;
  197. var params = event.data.params;
  198. if (params.status) {
  199. // Detach current editor.
  200. params.status = false;
  201. Drupal.wysiwygDetach(context, params);
  202. // After disabling the editor, re-attach default behaviors.
  203. // @todo We HAVE TO invoke Drupal.wysiwygAttach() here.
  204. Drupal.wysiwyg.editor.attach.none(context, params);
  205. Drupal.wysiwyg.instances[params.field] = Drupal.wysiwyg.editor.instance.none;
  206. Drupal.wysiwyg.instances[params.field].editor = 'none';
  207. Drupal.wysiwyg.instances[params.field].field = params.field;
  208. $(this).html(Drupal.settings.wysiwyg.enable).blur();
  209. }
  210. else {
  211. // Before enabling the editor, detach default behaviors.
  212. Drupal.wysiwyg.editor.detach.none(context, params);
  213. // Attach new editor using parameters of the currently selected input format.
  214. params = Drupal.settings.wysiwyg.triggers[params.trigger]['format' + $('#' + params.trigger).val()];
  215. params.status = true;
  216. Drupal.wysiwygAttach(context, params);
  217. $(this).html(Drupal.settings.wysiwyg.disable).blur();
  218. }
  219. }
  220. /**
  221. * Parse the CSS classes of an input format DOM element into parameters.
  222. *
  223. * Syntax for CSS classes is "wysiwyg-name-value".
  224. *
  225. * @param element
  226. * An input format DOM element containing CSS classes to parse.
  227. * @param params
  228. * (optional) An object containing input format parameters to update.
  229. */
  230. Drupal.wysiwyg.getParams = function(element, params) {
  231. var classes = element.className.split(' ');
  232. var params = params || {};
  233. for (var i = 0; i < classes.length; i++) {
  234. if (classes[i].substr(0, 8) == 'wysiwyg-') {
  235. var parts = classes[i].split('-');
  236. var value = parts.slice(2).join('-');
  237. params[parts[1]] = value;
  238. }
  239. }
  240. // Convert format id into string.
  241. params.format = 'format' + params.format;
  242. // Convert numeric values.
  243. params.status = parseInt(params.status, 10);
  244. params.toggle = parseInt(params.toggle, 10);
  245. params.resizable = parseInt(params.resizable, 10);
  246. return params;
  247. };
  248. /**
  249. * Allow certain editor libraries to initialize before the DOM is loaded.
  250. */
  251. Drupal.wysiwygInit();
  252. // Respond to CTools detach behaviors event.
  253. $(document).bind('CToolsDetachBehaviors', function(event, context) {
  254. Drupal.behaviors.attachWysiwyg.detach(context, {}, 'unload');
  255. });
  256. })(jQuery);