TransWikia.com

How to group buttons on Google Closure editor?

Stack Overflow Asked by Frenchcooc on December 7, 2021

I’m using the Google Closure WYSIWYG editor and struggling to group text-justify buttons in a select.

Here’s my code:

// Create an editable field.
var editor = new goog.editor.SeamlessField('editorEditableContainer')

// Create and register all of the editing plugins you want to use.
editor.registerPlugin(new goog.editor.plugins.BasicTextFormatter())
editor.registerPlugin(new goog.editor.plugins.RemoveFormatting())
editor.registerPlugin(new goog.editor.plugins.ListTabHandler())
editor.registerPlugin(new goog.editor.plugins.SpacesTabHandler())
editor.registerPlugin(new goog.editor.plugins.EnterHandler())
editor.registerPlugin(new goog.editor.plugins.HeaderFormatter())
editor.registerPlugin(new goog.editor.plugins.LinkDialogPlugin())
editor.registerPlugin(new goog.editor.plugins.LinkBubble())

// Specify the buttons to add to the toolbar
var buttons = [
    goog.editor.Command.BOLD,
    goog.editor.Command.ITALIC,
    goog.editor.Command.UNDERLINE,
    goog.editor.Command.REMOVE_FORMAT,
    goog.editor.Command.FONT_COLOR,
    goog.editor.Command.LINK,
    goog.editor.Command.JUSTIFY_LEFT,
    goog.editor.Command.JUSTIFY_CENTER,
    goog.editor.Command.JUSTIFY_RIGHT,
    goog.editor.Command.UNORDERED_LIST,
    goog.editor.Command.ORDERED_LIST,
    goog.editor.Command.OUTDENT,
    goog.editor.Command.INDENT
]

var myToolbar = goog.ui.editor.DefaultToolbar.makeToolbar(buttons, goog.dom.getElement('editorToolbar'))
var myToolbarController = new goog.ui.editor.ToolbarController(editor, myToolbar)
editor.makeEditable()

which renders into:
enter image description here

I’d like to group the text-justify buttons to have something like this:

enter image description here

But it’s very hard to find how to do it (js-only).

google closure

One Answer

I might have a solution, you could remove the items and add them to a dropdown with javascript by modifying the DOM.

The demo below is really a proof of concept of how it could work. You need to replace the Select with some sort of dropdown where buttons can be active so you can just copy and paste the existing buttons in there without losing functionality, like this.

HTML

<ul id="myList">
  <li>File</li>
  <li>Left align</li>
  <li>Middle align</li>
  <li>Right align</li>
  <li>Ordered List</li>
</ul>


<button onclick="myFunction()">Try it</button>

Javascript:

function myFunction() {
  var list = document.getElementById("myList");
  var selectList = document.createElement("SELECT");
  var array = [list.childNodes[3], list.childNodes[4], list.childNodes[5]];

  selectList.id = "justifySelect";
  list.removeChild(list.childNodes[3]);  
  list.removeChild(list.childNodes[4]);
  list.removeChild(list.childNodes[5]);
  list.insertBefore(selectList, list.childNodes[2]);

  //Create and append the options.
  for (var i = 0; i < array.length; i++) {
      var option = document.createElement("option");
      option.value = array[i];
      option.text = array[i];
      selectList.appendChild(option);
  }
}

Demo

Don't know how Google Closure builds up it's toolbar, but it looks like li elements. So replacing the (in this demo case's) 3rd, 4th and 5th element with a dropdown with those 3 elements in them is how I would solve it if it isn't possible natively.

I hope I have at least given you a new perspective at this problem and hope you will solve it soon.

Answered by Wim Stienstra on December 7, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP