单击Ckeditor中对话框中的“确定”按钮后如何打开另一个对话框

时间:2018-09-18 15:55:06

标签: javascript ckeditor ckeditor4.x

我正在尝试创建一个Ckeditor插件。我在工具栏中添加了一个按钮,该按钮将打开对话框,并在其中输入我们选择的单词,同义词将显示为警报,并在单击确定时显示数据将被插入ckeditor文本区域。

我要显示的是另一个对话框或弹出窗口,它将显示同义词而不是警报。

文件夹结构: ckeditor->插件-> lookup_synonyms 在lookup_synonyms内部,我有两个文件夹“对话框-> lookup_synonyms.js和图标-> lookup_synonyms.png和一个文件plugin.js”

plugin.js

CKEDITOR.plugins.add( 'lookup_synonyms', {
icons: 'lookup_synonyms',
init: function( editor ) {
editor.addCommand( 'lookup_synonyms', new CKEDITOR.dialogCommand( 'lookup_synonymsDialog' ) );
editor.ui.addButton( 'Lookup_synonyms', {
label: 'Lookup Synonyms',
command: 'lookup_synonyms',
toolbar: 'insert,0'
});

CKEDITOR.dialog.add( 'lookup_synonymsDialog', this.path + 'dialogs/lookup_synonyms.js' );
}
});

lookup_synonyms.js

CKEDITOR.dialog.add( 'lookup_synonymsDialog', function( editor ) {
return {
title: 'Find synonyms',
minWidth: 400,
minHeight: 100,
contents: [
{
id: 'tab-basic',
label: 'Input a word to find synonym',
elements: [
{
type: 'text',
id: 'abbr',
label: 'Input word',
validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." )
}
]
}
],
onOk: function() {

var dialog = this;

var abbr = editor.document.createElement( 'abbr' );
//abbr.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
//const newobj = abbr.setText( dialog.getValueOf( 'tab-basic', 'abbr' ) );

var x = dialog.getValueOf( 'tab-basic', 'abbr' );
fetch("https://api.datamuse.com/words?ml=" + x)
.then((resp) => resp.json())
.then (data =>
{
const obj = JSON.stringify(data);   
const wordArr = data.map(obj => obj.word);
//console.log(wordArr); 
//document.getElementById("id").innerHTML = wordArr;
abbr.setText( wordArr );
alert(wordArr);
})

var id = dialog.getValueOf( 'tab-basic', 'abbr' );
if ( id )
abbr.setAttribute( 'id', abbr );

editor.insertElement( abbr );
}
};
});

0 个答案:

没有答案