如何在工具栏按钮中重用CKEditor图标？-Java 学习之路

我正在使用PrimeFaces Extensions 6.0.0附带的CKEditor 4 . 我将它与自定义配置JavaScript结合使用：

<pe:ckEditor ... customConfig="#{request.contextPath}/mypath/myconfig.js" />

我想在工具栏中添加一个按钮，并重用CKEditor正在使用的一个图像 . 在我的情况下图像图标 . 我已经看到他们使用精灵PNG并且类 cke_button__image_icon 负责定位 .

我说它被称为 myimage . 此名称导致按钮 span 中的一个类名为 cke_button__myimage_icon . 我找不到将 cke_button__image_icon 添加到 span 的方法 . 我尝试使用jQuery在我的插件的 afterInit 函数中获取 $(".cke_button__myimage_icon") ，但此时 span 尚未可用 .

我想出了以下JavaScript，它运行在我的插件的 init 函数中：

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".cke_button__myimage_icon { background: url(" +
        CKEDITOR.skin.getPath("editor").replace(/editor_?\w*\.css/, "icons.png") +
        ") no-repeat 0 -936px!important }";
document.body.appendChild(css);

这有效，但很难看 .

所以，我的问题是：如何在工具栏按钮中重用CKEditor图标？

对于它的 Value ，我的插件：

CKEDITOR.plugins.add("myimage", {
    init: function (editor) {
        editor.addCommand("insertmyimage", {
            exec: function (editor) {
                window.currentCKEditor = editor;
                PF("imageDialog").show(); // Show PrimeFaces dialog
            }
        });
        editor.ui.addButton("myimage", {
            label: "Image",
            command: "insertmyimage",
            toolbar: "insert,0"
        });
        // CSS hack mentioned above
    }
});

如何在工具栏按钮中重用CKEditor图标？

相关问题