【问题标题】:Plugins in IBM/HCL Connections 5 CR6 with TinyMCE editor带有 TinyMCE 编辑器的 IBM/HCL Connections 5 CR6 中的插件
【发布时间】:2019-10-21 16:18:22
【问题描述】:

我在 vanilla Connections 5 CR6 安装上安装了 TinyMCE editor,现在想要添加插件。 HCL 告诉我们,我们拥有与 Connections 一起获得授权的 TinyMCE 专业版。专业插件的一个例子是the checklist,我想安装它。

所以我在config.js 文件的externalPlugins 数组中添加了清单的插件文件以及列表(需要作为依赖项):

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 文件中了解这一点:

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

测试程序

config.js 上的每次更改后,我通过使用 jython wsadmin 脚本停止和启动公共应用程序来重新启动它们。这是可行的,可以使用postCreateTextboxio 方法轻松验证,该方法可以包含在配置对象中:

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

所以我在重新启动 Common 应用程序后得到了控制台输出。

【问题讨论】:

    标签: javascript tinymce websphere ibm-connections


    【解决方案1】:

    插件已加载,可以在浏览器控制台中验证:

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

    Ephox 导致问题:虽然添加插件直接与原始 TinyMCE 一起工作,但我们在 HCL Connections 中有 Ephox。它充当中间件,在 Connections 支持的多个编辑器(TinyMCE、Textbox.io 和 CKEditor)之间共享配置文件。

    使用 Ephox,我们需要在工具栏中引用时在插件名称前加上 tmce-

    {
      label: "Test",
      items: ["table", "tmce-toc"]
    }
    

    【讨论】:

      【解决方案2】:

      清单插件已包含在 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 required for checklist plugin

      How to add CSS to Connections

      我们目前正在为清单插件开发 shim,以使其能够在 Connections 中工作而无需更改全局 CSS,并在样式和类被剥离的活动流中更好地工作。我预计这将出现在 4.2.0 版本中。

      【讨论】:

        猜你喜欢
        • 2011-12-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-10-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-01-22
        相关资源
        最近更新 更多