使用TinyMCE编辑器的IBM/HCL Connections 5 CR6中的插件 [英] Plugins in IBM/HCL Connections 5 CR6 with TinyMCE editor
问题描述
我安装了 TinyMCE编辑器在Vanilla Connections 5 CR6上安装，现在要添加插件. HCL告诉我们，我们拥有与Connections一起获得许可的TinyMCE专业版.亲插件的一个示例是清单，我想安装它.
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.
因此，我将清单的插件文件以及清单(作为依赖项)添加到config.js文件的externalPlugins数组中:
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: []
}
]
并将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对此进行了验证.
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
toolbar: [
"checklist",
"undo"
// ...
添加tmce前缀
在示例config.js文件中了解有关此内容的信息:
Adding tmce prefix
Read about this in the example config.js file:
toolbar: [
"tmce-checklist",
"undo"
// ...
测试步骤
在config.js上进行每次更改后，我通过使用jython wsadmin脚本停止并启动它们来重新启动Common应用程序.这项工作可行，可以使用postCreateTextboxio方法轻松验证，该方法可以包含在config对象中:
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");
}
因此，在重新启动Common应用程序之后，我得到了控制台输出.
So I got the console output after re-starting the Common application.
推荐答案
Tiny Editors for Connections集成中已包含清单插件，因此您可以省略externalPlugins条目，但由于默认工具栏中未包含该条目，因为它需要其他CSS.
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"
]
之所以不能在第一级添加清单是因为所有第一级项目都是工具栏项目组.您可以使用方括号创建一个匿名组.请注意，选择此语法是因为它与Textbox.io向后兼容，将其更改为TinyMCE特定的格式会破坏我们现有客户的配置.
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.
显示清单插件按钮后，您需要将其使用的CSS添加到连接中，以便呈现.
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");
}
我们目前正在使用清单插件的填充程序，以使其可以在Connections中工作而无需更改全局CSS，并且可以在剥离样式和类的活动流中更好地工作.我希望它将在4.2.0版本中.
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.
这篇关于使用TinyMCE编辑器的IBM/HCL Connections 5 CR6中的插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
