1

I installed the TinyMCE editor on a vanilla Connections 5 CR6 installation and now want to add plugins. HCL told us that we have the pro version of TinyMCE licenced together with Connections. One example of the pro-plugins is the checklist, which I want to install.

So I add the plugin-files of the checklist as well as the lists (required as dependency) in the externalPlugins array of the config.js file: 

externalPlugins: [
  {
    name: "checklist",
    url: pluginBaseDir + "checklist/plugin.min.js",
    off: []
  },{
    name: "lists",
    url: pluginBaseDir + "lists/plugin.min.js",
    off: []
  }
]

and added checklist to the toolbar:

toolbar: [
    "undo",
    {
      label: "group.insert",
      items: [
        {
          id: "insert",
          label: "menu.insert",
          items: [
            [
              "checklist",
              "link",
              "conn-insert",
              "bookmark",
              "media",
              "pageembed",
              "table",
              "codesample"
            ],
            [
              "specialchar",
              "hr"
            ]
          ]
        }
      ]
    },
    "style",
    "emphasis",
    "align",
    "listindent",
    "format",
    [
      "conn-other",
      "conn-emoticons",
      "conn-macros"
    ],
    "language",
    "tools"
]

Where pluginBaseDir is set to /connections/resources/web/tiny.editors.connections/tinymce/plugins/. The requested JS files are accessable, I verified this using curl.

But the button isn't shown. I tried

Adding the checklist in the first level

toolbar: [
    "checklist",
    "undo"
    // ...

Adding tmce prefix

Read about this in the example config.js file:

toolbar: [
    "tmce-checklist",
    "undo"
    // ...

Testing procedure

After each change on config.js, I restart the Common application by stopping and starting them using jython wsadmin script. This works, which could be easily verified using the postCreateTextboxio method, which can be included in the config object: 

postCreateTextboxio: function(editor) {
    console.log("custom.js revision #2");
}

So I got the console output after re-starting the Common application.

Lion
  • 16,606
  • 23
  • 86
  • 148

2 Answers2

1

The plugin was loaded, with could be verified in the browser console: 

> tinyMCE.editors[0].settings.plugins.indexOf('toc')
  319

Ephox caused the problem: While adding the plugin directly works with the original TinyMCE, we have Ephox in HCL Connections. It acts as a middleware to have a shared configuration file between multiple editors supported by Connections (TinyMCE, Textbox.io and CKEditor).

With Ephox, we need to prefix plugin names with tmce- when referencing in the toolbar:

{
  label: "Test",
  items: ["table", "tmce-toc"]
}
Lion
  • 16,606
  • 23
  • 86
  • 148
1

The checklist plugin is already included with the Tiny Editors for Connections integration so you can leave off the externalPlugins entry but it is not included in the default toolbar because it requires additional CSS.

Currently the checklist plugin does not register a menu item so it can not be added to the insert menu, however you can add it to the toolbar with the following config:

toolbar: [
    "undo",
    {
      label: "group.insert",
      items: [
        {
          id: "insert",
          label: "menu.insert",
          items: [
            [
              "link",
              "conn-insert",
              "bookmark",
              "media",
              "pageembed",
              "table",
              "codesample"
            ],
            [
              "specialchar",
              "hr"
            ]
          ]
        }
      ]
    },
    "style",
    "emphasis",
    "align",
    [
      "checklist"
    ],
    "listindent",
    "format",
    [
      "conn-other",
      "conn-emoticons",
      "conn-macros"
    ],
    "language",
    "tools"
]

The reason why you could not add checklist at the first level is that all first level items are groups of toolbar items. You can create an anonymous group with the square brackets. Note that this syntax was chosen because it was backwards compatible with Textbox.io and changing it to be TinyMCE specific would break the configuration for our pre-existing customers.

Once you have the checklist plugin button showing you need to add the CSS it uses to connections so that it will render.

.tox-checklist > li:not(.tox-checklist--hidden) {
  list-style: none;
  margin: .25em 0;
  position: relative;
}
.tox-checklist > li:not(.tox-checklist--hidden)::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
  background-size: 100%;
  content: '';
  cursor: pointer;
  height: 1em;
  left: -1.5em;
  position: absolute;
  top: .125em;
  width: 1em;
}
.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
}

CSS required for checklist plugin

How to add CSS to Connections

We are currently working on a shim for the checklist plugin to allow it to work in Connections without requiring the global CSS change and to work better in the activity stream where styles and classes are stripped. I expect this will be in the 4.2.0 release.

James Johnson
  • 311
  • 1
  • 4