小部件如何在特定位置插入文本

Question

我希望我的小部件将text/html放置在特定位置。有人能帮我理解小部件如何放置文本吗

• 在最底部
• 在顶部
• 介于第1段和第2段之间等等

使用jsfiddle小部件示例，我在那里学习了CKEditor 4小部件教程

CKEDITOR.plugins.add( 'simplebox', {
requires: 'widget',
icons: 'simplebox',
init: function( editor ) {
editor.widgets.add( 'simplebox', {
button: 'Create a simple box',
template:
'<div class="simplebox">' +
'<h2 class="simplebox-title">Title</h2>' +
'<div class="simplebox-content"><p>Content...</p></div>' +
'</div>',
editables: {
title: {
selector: '.simplebox-title',
allowedContent: 'br strong em'
},
content: {
selector: '.simplebox-content',
allowedContent: 'p br ul ol li strong em'
}
},
allowedContent:
'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',
requiredContent: 'div(simplebox)',
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'simplebox' );
}
} );
}
} );

Answer 1

为了在顶部放置text/html，您可以创建一个带有空模板的小部件。而且，要在内容的开头定位text/html，需要在小部件的init函数中添加以下代码。

editor.on('afterCommandExec', function (event) {
var template = '<div class="simplebox1">' +
'<h2 class="simplebox1-title">Title</h2>' +
'<div class="simplebox1-content"><p>Content...</p></div>' +
'</div>' 
editor.setData(template + editor.getData())
})

对于"；在最底部"；，逻辑是一样的。

要在第1段和第2段之间放置text/html，您需要根据标准将ckeditor的内容分为两部分。

editor.setData(content_part1 + template + content_part2)

两个小部件的完整代码(在顶部和最底部(：

CKEDITOR.plugins.add('simplebox', {
requires: 'widget',
icons: 'simplebox',
init: function (editor) {
editor.widgets.add('simplebox', {
button: 'Create a simple box at top',
template:
'',
editables: {
title: {
selector: '.simplebox-title',
allowedContent: 'br strong em'
},
content: {
selector: '.simplebox-content',
allowedContent: 'p br ul ol li strong em'
}
},
allowedContent:
'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',
requiredContent: 'div(simplebox)',
upcast: function (element) {
return element.name == 'div' && element.hasClass('simplebox');
}
});
editor.on('afterCommandExec', function (event) {
var template = '<div class="simplebox1">' +
'<h2 class="simplebox1-title">Title</h2>' +
'<div class="simplebox1-content"><p>Content...</p></div>' +
'</div>' 
editor.setData(template + editor.getData())
})
}
});
CKEDITOR.plugins.add('simplebox1', {
requires: 'widget',
icons: 'simplebox1',
init: function (editor) {
editor.widgets.add('simplebox1', {
button: 'Create a simple box at very bottom',
template:
'',
editables: {
title: {
selector: '.simplebox1-title',
allowedContent: 'br strong em'
},
content: {
selector: '.simplebox1-content',
allowedContent: 'p br ul ol li strong em'
}
},
allowedContent:
'div(!simplebox1); div(!simplebox1-content); h2(!simplebox1-title)',
requiredContent: 'div(simplebox1)',
upcast: function (element) {
return element.name == 'div' && element.hasClass('simplebox1');
}
});
editor.on('afterCommandExec', function (event) {
var template = '<div class="simplebox1">' +
'<h2 class="simplebox1-title">Title</h2>' +
'<div class="simplebox1-content"><p>Content...</p></div>' +
'</div>' 
editor.setData(editor.getData() + template)
})
}
});