IMHO, when Aloha is used in a field on the backend (like a node form), the toolbar should show at all times rather than only on mouseover or when focused. At the very least, this should be an option somewhere.

CommentFileSizeAuthor
#9 insertBefore.patch511 bytesXen
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Wim Leers’s picture

Assigned: Unassigned » Wim Leers
Status: Active » Postponed

I agree! :) But Aloha Editor is not designed to be used in this way.

I'm working with the AE guys to figure out a way to do this: https://github.com/alohaeditor/Aloha-Editor/issues/717. That being said, it is most definitely a solvable problem, and IMO it is not (yet) top priority.

obrienmd’s picture

Fantastic, thanks for the information and I look forward to seeing updates on this!

Wim Leers’s picture

Version: 7.x-2.x-dev » 8.x-2.x-dev
Priority: Normal » Critical
Wim Leers’s picture

Component: User interface » Aloha Editor (upstream)
obrienmd’s picture

Wim, does #3 mean it will be developed for 8.x first, then backported to Spark to D7?

Wim Leers’s picture

#5: in theory, yes, in practice it's super duper easy to keep the D7 & D8 versions in sync; the code bases are near identical.

Wim Leers’s picture

Issue tags: +post-feature freeze

By now, it seems very unlikely/impossible that this will get done before feature freeze (we're waiting for upstream work to be done on this). Marking as such.

Wim Leers’s picture

Title: Allow static toolbar on backend field » Ensure Aloha Editor UI can be *always* present, not only when actively editing ("static toolbar", prevents flashing)
Xen’s picture

FileSize
511 bytes

I've found a hack that seems to work, for those that's interested. Needs a small patch (attached) to avoid the toolbar jumping around on submit.

The plugin aloha/persistbar/lib/persistbar-plugin.js:

define([
  'aloha',
  'jquery',
  'aloha/plugin',
  'ui/scopes',
  'ui/ui-plugin'
], function (
  Aloha,
  jQuery,
  Plugin,
  Scopes,
  UiPlugin
) {
  'use strict';

  /**
   * register the plugin with unique name
   */
  return Plugin.create('persistbar', {
    /**
     * Add an event handler to ensure toolbar persistence.
     */
    init: function () {
      Aloha.bind('aloha-editable-created', function(event, editable) {
        editable.activate();
        var toolbar = jQuery('.aloha-toolbar');
        jQuery('#alohaContainer').append(toolbar);
        Scopes.setScope('Aloha.continuoustext');
        console.dir(UiPlugin);
        UiPlugin.showToolbar();
        Aloha.bind('aloha-editable-deactivated', function () {
          UiPlugin.showToolbar();
        });
      });
    },
  });
});

It needs a module like so (with risk of search and replace errors):


/**
 * Implements hook_library().
 */
function aloha_persistbar_library() {
  $libraries['aloha-persistbar/persistbar'] = array(
    'title' => 'Aloha Editor plug-in: Persistent toolbar.',
    'version' => '1.0',
    'js' => array(
      array(
        'type' => 'setting',
        'data' => array(
          'aloha' => array(
            'settings' => array(
              'plugins' => array('load' => array('aloha-persistbar/persistbar')),
              'bundles' => array('aloha-persistbar' => file_create_url(drupal_get_path('module', 'aloha_persistbar') . '/aloha/')),
            ),
          ),
        ),
      ),
    ),
    'dependencies' => array(
      // Ensure the "aloha" bundle is registered.
      array('aloha', 'aloha.drupal'),
    ),
  );

  return $libraries;
}

/**
 * Implements hook_library_alter().
 */
function aloha_persistbar_library_alter(&$libraries, $module) {
  if ($module == 'aloha' && isset($libraries['aloha'])) {
    $libraries['aloha']['dependencies'][] = array('aloha_persistbar', 'aloha-persistbar/persistbar');
  }
}