gpt4 book ai didi

javascript - 在 CKEditor5 中插入自定义元素

转载 作者:行者123 更新时间:2023-12-04 11:46:00 24 4
gpt4 key购买 nike

在 CKEditor5 中,我正在创建一个插件来插入 span元素以显示工具提示。这个想法是显示一个带有(脚)注的工具提示,而元素本身将显示一个递增的数字。在 CKEditor4 我做了这样的事情:

CKEDITOR.dialog.add( 'footnoteDialog', function( editor ) {
return {
title: 'Footnote Properties',
minWidth: 400,
minHeight: 100,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'text',
id: 'content',
label: 'Content of footnote',
validate: CKEDITOR.dialog.validate.notEmpty( "Footnote field cannot be empty." )
}
]
}
],
onOk: function() {
var dialog = this;

var footnote = editor.document.createElement( 'span' );
footnote.setAttribute('class', 'footnote');
footnote.setAttribute('data-toggle', 'tooltip');
footnote.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'content' ) );
footnote.setText('[FN]');

editor.insertElement( footnote );
}
};
});
[FN]将转换为增量数字。

现在我尝试在 CKEditor5 中制作这个插件,但没有成功。我遇到了两个问题。拳头,我无法在文本中插入元素。二、当我要使用属性 data-toggle这不起作用,因为 -句法。这是我当前的代码:
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import pilcrowIcon from '@ckeditor/ckeditor5-core/theme/icons/pilcrow.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

export default class Footnote extends Plugin {
init() {
const editor = this.editor;

editor.ui.componentFactory.add( 'footnote', locale => {
const view = new ButtonView( locale );

view.set( {
label: 'Insert footnote',
icon: pilcrowIcon,
tooltip: true
} );

view.on( 'execute', () => {
const source = prompt( 'Footnote' );

editor.model.schema.register( 'span', { allowAttributes: ['class', 'data-toggle', 'title'] } );

editor.model.change( writer => {

const footnoteElement = writer.createElement( 'span', {
class: 'footnote',
// data-toggle: 'tooltip',
title: source
});

editor.model.insertContent( footnoteElement, editor.model.document.selection );
} );
} );

return view;
} );
}
}

我怎样才能确定我的 span元素被插入并且还包含 data-toggle="tooltip" ?

最佳答案

对于遇到这种情况的任何人,这里有一个很好的描述,说明如何在模型和 View 中设置内联元素,然后在它们之间进行映射 - How to add "target" attribute to `a` tag in ckeditor5?
根据我的经验,您还需要为按下按钮时运行的命令设置 Javascript 代码。该命令会将新信息插入模型中,然后此映射代码会将其转换为 View (HTML) 以进行显示。

关于javascript - 在 CKEditor5 中插入自定义元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57028155/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com