Плагины в IBM / HCL Connections 5 CR6 с редактором TinyMCE - PullRequest
1 голос
/ 21 октября 2019

Я установил TinyMCE editor на ванильную установку Connections 5 CR6 и теперь хочу добавить плагины. HCL сказал нам, что у нас есть профессиональная версия TinyMCE, лицензируемая вместе с Connections. Одним из примеров про-плагинов является контрольный список , который я хочу установить.

Поэтому я добавляю плагины-файлы контрольного списка, а также списки (обязательные в качестве зависимости) в массиве externalPlugins файла config.js:

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

и добавляюchecklist на панель инструментов:

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"
]

Где pluginBaseDir установлено на /connections/resources/web/tiny.editors.connections/tinymce/plugins/. Запрошенные JS-файлы доступны, я подтвердил это, используя curl.

Но кнопка не отображается. Я пробовал

Добавление checklist на первом уровне

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

Добавление tmce префикса

Прочтите об этом в примере config.js file:

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

Процедура тестирования

После каждого изменения в config.js я перезапускаю приложение Common, останавливая и запуская их с помощью скрипта jython wsadmin. Это работает, что можно легко проверить с помощью метода postCreateTextboxio, который можно включить в объект конфигурации:

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

Так что я получил вывод на консоль после перезапуска приложения Common.

Ответы [ 2 ]

1 голос
/ 14 ноября 2019

Плагин контрольного списка уже включен в интеграцию Tiny Editors for Connections, поэтому вы можете отключить запись externalPlugins, но она не включена в панель инструментов по умолчанию, поскольку для нее требуется дополнительный CSS.

В настоящее время контрольный списокПлагин не регистрирует пункт меню, поэтому его нельзя добавить в меню вставки, однако вы можете добавить его на панель инструментов со следующей конфигурацией:

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"
]

Причина, по которой вы не можете добавить контрольный список наПервый уровень состоит в том, что все элементы первого уровня являются группами элементов панели инструментов. Вы можете создать анонимную группу в квадратных скобках. Обратите внимание, что этот синтаксис был выбран, потому что он был обратно совместим с Textbox.io, и изменение его на специфичное для TinyMCE нарушило бы конфигурацию для наших уже существующих клиентов.

Как только у вас появится кнопка плагина контрольного списка, показывающая, чтодобавьте CSS, который он использует для соединений, чтобы он отображал.

.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, необходимый для плагина контрольного списка

Как добавить CSS в соединения

В настоящее время мы работаем над оболочкой для плагина контрольного списка, чтобы он мог работать в Connections, не требуя глобального изменения CSS, и лучше работать в потоке операций, где стилей и классы удалены. Я ожидаю, что это будет в версии 4.2.0.

1 голос
/ 22 октября 2019

Плагин был загружен, и его можно проверить в консоли браузера:

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

Ephox вызвал проблему: хотя добавление плагина напрямую работает с оригинальным TinyMCE, у нас есть Ephox в HCL Connections. Он действует как промежуточное ПО для совместного использования файла конфигурации между несколькими редакторами, поддерживаемыми Connections (TinyMCE, Textbox.io и CKEditor).

В Ephox нам нужно добавлять префиксы к именам плагинов с tmce- при ссылке впанель инструментов:

{
  label: "Test",
  items: ["table", "tmce-toc"]
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...