【发布时间】：2022-01-19 22:27:39
【问题描述】：
我有一个打开对话框的自定义 CKEditor 按钮。在对话框中，我有一个 textarea 类型，我希望它有“斜体”和“粗体”按钮，让用户在脚注文本中设置粗体和斜体文本。如何将斜体和粗体添加到文本区域？
我希望它具有以下示例（我找到此示例 here）：
plugin.js 文件
KEDITOR.plugins.add("footnotes", {
requires: ["fakeobjects", "dialog"],
icons: "footnotes",
onLoad() {
const iconPath = `${window.location.origin + this.path}icons/fn_icon2.png`;
CKEDITOR.addCss(
`${".cke_footnote{background-image: url("}${CKEDITOR.getUrl(
iconPath
)});` +
`background - position: center center;` +
`background - repeat: no - repeat;` +
`width: 16px;` +
`height: 16px;` +
`}`
);
},
init(editor) {
editor.addCommand(
"createfootnotes",
new CKEDITOR.dialogCommand("createfootnotes", {
allowedContent: "fn[value]"
})
);
editor.addCommand(
"editfootnotes",
new CKEDITOR.dialogCommand("editfootnotes", {
allowedContent: "fn[value]"
})
);
// Drupal Wysiwyg requirement: The first argument to editor.ui.addButton()
// must be equal to the key used in $plugins[<pluginName>]['buttons'][<key>]
// in hook_wysiwyg_plugin().
if (editor.ui.addButton) {
editor.ui.addButton("footnotes", {
label: Drupal.t("Add a footnote"),
command: "createfootnotes",
icon: "footnotes"
});
}
if (editor.addMenuItems) {
editor.addMenuGroup("footnotes", 100);
editor.addMenuItems({
footnotes: {
label: Drupal.t("Edit footnote"),
command: "editfootnotes",
icon: "footnotes",
group: "footnotes"
}
});
}
if (editor.contextMenu) {
editor.contextMenu.addListener(element => {
if (!element || element.data("cke-real-element-type") !== "fn") {
return null;
}
return { footnotes: CKEDITOR.TRISTATE_ON };
});
}
editor.on("doubleclick", evt => {
if (CKEDITOR.plugins.footnotes.getSelectedFootnote(editor)) {
evt.data.dialog = "editfootnotes";
}
});
CKEDITOR.dialog.add("createfootnotes", `${this.path}dialogs/footnotes.js`);
CKEDITOR.dialog.add("editfootnotes", `${this.path}dialogs/footnotes.js`);
},
afterInit(editor) {
const { dataProcessor } = editor;
const { dataFilter } = dataProcessor;
if (dataFilter) {
dataFilter.addRules({
elements: {
fn(element) {
return editor.createFakeParserElement(
element,
"cke_footnote",
"hiddenfield",
false
);
}
}
});
}
}
});
CKEDITOR.plugins.footnotes = {
createFootnote(editor, origElement,type, text, value) {
let realElement;
if (!origElement) {
realElement = CKEDITOR.dom.element.createFromHtml("<fn></fn>");
} else {
realElement = origElement;
}
if (text && text.length > 0) {
realElement.setHtml(text);
}
if (value && value.length > 0) {
realElement.setAttribute("value", value);
}
console.log(type);
if (type && type.length > 0) {
realElement.setAttribute("type", type);
}
const fakeElement = editor.createFakeElement(
realElement,
"cke_footnote",
"hiddenfield",
false
);
editor.insertElement(fakeElement);
},
getSelectedFootnote(editor) {
const selection = editor.getSelection();
const element = selection.getSelectedElement();
const seltype = selection.getType();
if (
seltype === CKEDITOR.SELECTION_ELEMENT &&
element.data("cke-real-element-type") === "hiddenfield"
) {
return element;
}
}
};
还有fotenote.js 文件
/**
* @file
*/
function footnotesDialog(editor, isEdit) {
return {
title: Drupal.t("Footnotes Dialog"),
minWidth: 500,
minHeight: 50,
contents: [
{
id: "info",
label: Drupal.t("Add a footnote"),
title: Drupal.t("Add a footnote"),
elements: [
{
id: "type",
type: "select",
items: [ [ 'Footnote' ], [ 'Reference' ], [ 'TableNote' ] ],
label: Drupal.t("Type"),
setup(element) {
if (isEdit) {
console.log(element.getAttribute("type"));
this.setValue(element.getAttribute("type"));
}
}
},
{
id: "footnote",
type: "textarea",
label: Drupal.t("Footnote text :"),
setup(element) {
if (isEdit) {
this.setValue(element.getHtml());
}
}
},
{
id: "value",
type: "text",
label: Drupal.t("Value :"),
setup(element) {
if (isEdit) {
this.setValue(element.getAttribute("value"));
}
}
}
]
}
],
onShow() {
if (isEdit) {
this.fakeObj = CKEDITOR.plugins.footnotes.getSelectedFootnote(editor);
this.realObj = editor.restoreRealElement(this.fakeObj);
}
this.setupContent(this.realObj);
},
onOk() {
CKEDITOR.plugins.footnotes.createFootnote(
editor,
this.realObj,
this.getValueOf("info", "type"),
this.getValueOf("info", "footnote"),
this.getValueOf("info", "value")
);
delete this.fakeObj;
delete this.realObj;
}
};
}
CKEDITOR.dialog.add("createfootnotes", editor => footnotesDialog(editor));
CKEDITOR.dialog.add("editfootnotes", editor => footnotesDialog(editor, 1));
【问题讨论】：
-
你试过在
setup(element) {的textarea上初始化一个CKEditor吗？ -
@1j01 没有。这就是我所拥有的。怎么办？
-
element在那个setup回调中是什么？如果它已经是 CKEditor 实例，那么可能有一些方法可以调用来启用工具栏，但如果它是纯文本区域元素，即HTMLTextareaElement，则需要为它初始化一个 CKEditor，使用CKEDITOR.replace(element)跨度> -
看起来它可能是一个
CKEDITOR.dom.element，因为有一个getHtml()方法，尽管API 中有几个不同的类使用getHtml()方法。但是假设它是这样的，你应该可以调用element.getEditor()来查看是否有为它初始化的 CKEditor（可能没有） -
@1j01 感谢您的关注。我将 console.log 它以查看它包含的内容。顺便说一句，添加带有斜体和粗体选项的工具栏的选项是什么？
标签： javascript ckeditor