.../edit_aloha/css/drupal.aloha.edit-rtl.css | 9 ++++ core/modules/edit_aloha/css/drupal.aloha.edit.css | 25 +++++++++ core/modules/edit_aloha/edit_aloha.info | 7 +++ core/modules/edit_aloha/edit_aloha.module | 56 ++++++++++++++++++++ core/modules/edit_aloha/js/drupal.aloha.edit.js | 36 +++++++++++++ 5 files changed, 133 insertions(+) diff --git a/core/modules/edit_aloha/css/drupal.aloha.edit-rtl.css b/core/modules/edit_aloha/css/drupal.aloha.edit-rtl.css new file mode 100644 index 0000000..e4a8ca1 --- /dev/null +++ b/core/modules/edit_aloha/css/drupal.aloha.edit-rtl.css @@ -0,0 +1,9 @@ +/** + * @file + * RTL styles for Aloha Editor UI when used by the Edit module. + */ + +.edit-toolbar .aloha-toolbar-panels button { + border-left: inherit; + border-right: 0; +} diff --git a/core/modules/edit_aloha/css/drupal.aloha.edit.css b/core/modules/edit_aloha/css/drupal.aloha.edit.css new file mode 100644 index 0000000..c8f291c --- /dev/null +++ b/core/modules/edit_aloha/css/drupal.aloha.edit.css @@ -0,0 +1,25 @@ +/** + * @file + * Styles for Aloha Editor UI when used by the Edit module. + */ + +/** + * Ensures multi-row toolbars work well. + * + * This indeed implies that it is broken on the back-end ('aloha-for-textareas') + * so it warrants a todo. However, it's not a trivial problem to solve: on the + * back-end the common case is to have a very wide, single-row AE toolbar. + * Because there is no box-shadow around it, we need a border. But a bottom- + * border for buttons and a bottom-border for the .aloha-toolbar-panels + * container implies *double* borders, which is ugly. For now I've chosen to + * have a pretty common case on the back-end, at the cost of a broken multi-row + * experience (lack of bottom border). + * + * @todo See above. CSS wizardry needed. + */ + +.edit-toolbar .aloha-toolbar-panels button { + border: 1px solid #aaa; + border-top: 0; + border-left: 0; /* LTR */ +} diff --git a/core/modules/edit_aloha/edit_aloha.info b/core/modules/edit_aloha/edit_aloha.info new file mode 100644 index 0000000..30dfece --- /dev/null +++ b/core/modules/edit_aloha/edit_aloha.info @@ -0,0 +1,7 @@ +name = Aloha Editor integration for Edit +description = Make Aloha Editor work with in-place editing. +package = User interface +core = 8.x + +dependencies[] = edit +dependencies[] = aloha diff --git a/core/modules/edit_aloha/edit_aloha.module b/core/modules/edit_aloha/edit_aloha.module new file mode 100644 index 0000000..075e3c5 --- /dev/null +++ b/core/modules/edit_aloha/edit_aloha.module @@ -0,0 +1,56 @@ + array('edit_aloha', 'aloha.edit'), + 'format compatibility callback' => 'aloha_check_format_compatibility', + 'javascript settings callback' => 'aloha_add_format_settings', + ); + return $info; +} + +/** + * Implements hook_library_info(). + */ +function edit_aloha_library_info() { + $module_path = drupal_get_path('module', 'edit_aloha'); + $libraries['aloha.edit'] = array( + 'title' => 'Integrate Aloha Editor with the Edit module.', + 'version' => ALOHA_VERSION, + 'js' => array( + $module_path . '/js/drupal.aloha.edit.js' => array(), + // Configure Edit's JS to use aloha as the WYSIWYG. + array( + 'data' => array( + 'edit' => array('wysiwyg' => 'aloha'), + 'aloha' => array('settings' => array( + // Ensure the Edit module can embed the rendered toolbar within + // its own DOM infrastructure. + 'DrupalUI' => array( + 'renderOwnToolbarContainer' => FALSE, + ) + )) + ), + 'type' => 'setting', + ), + ), + 'css' => array( + $module_path . '/css/drupal.aloha.edit.css', + ), + 'dependencies' => array( + array('aloha', 'aloha'), + ) + ); + return $libraries; +} + diff --git a/core/modules/edit_aloha/js/drupal.aloha.edit.js b/core/modules/edit_aloha/js/drupal.aloha.edit.js new file mode 100644 index 0000000..880aa1a --- /dev/null +++ b/core/modules/edit_aloha/js/drupal.aloha.edit.js @@ -0,0 +1,36 @@ +/** + * @file + * Integrate Aloha Editor with the Edit module. + */ + +(function ($, Drupal, Aloha, window, document, undefined) { + +"use strict"; + +Drupal = Drupal || {}; +Drupal.edit = Drupal.edit || {}; +Drupal.edit.wysiwyg = Drupal.edit.wysiwyg || {}; +Drupal.edit.wysiwyg.aloha = { + init: function () { + Drupal.aloha.init(function () { + $(document).trigger('edit-wysiwyg-ready'); + }); + }, + + attach: function ($editable, format) { + Drupal.aloha.attach($editable, format); + $editable.bind('aloha-content-changed', function() { + $editable.trigger('edit-wysiwyg-content-changed'); + }); + }, + + activate: function ($editable) { + Drupal.aloha.activate($editable); + }, + + detach: function ($editable) { + Drupal.aloha.detach($editable); + } +}; + +})(jQuery, Drupal, Aloha, this, this.document);