javascript 如何在CKEditor的保存按钮上捕获点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18330796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to capture click event on Save button of CKEditor
提问by Thomas
i try to capture the the click event occur on save button of CKEditor this way
我尝试以这种方式捕获 CKEditor 的保存按钮上发生的点击事件
var element = CKEDITOR.document.getById('CKEditor1');
element.on('click', function (ev) {
//ev.removeListener();
alert('hello');
return false;
});
but it is not working.when i click on save button of CKEditor then a postback occur. if possible help me with right code sample to capture click event occur on Save button of CKEditor. thanks
但它不起作用。当我单击 CKEditor 的保存按钮时，会发生回发。如果可能，请帮助我使用正确的代码示例来捕获 CKEditor 的“保存”按钮上发生的点击事件。谢谢
I got the solution
我得到了解决方案
CKEDITOR.plugins.registered['save'] = {
init: function (editor) {
var command = editor.addCommand('save',
{
modes: { wysiwyg: 1, source: 1 },
exec: function (editor) { // Add here custom function for the save button
alert('You clicked the save button in CKEditor toolbar!');
}
});
editor.ui.addButton('Save', { label: 'Save', command: 'save' });
}
}
the above code i was looking for. the above code help me to capture the click event of save button in toolbar. thanks
上面的代码我正在寻找。上面的代码帮助我捕获工具栏中保存按钮的点击事件。谢谢
回答by Matthew
Here's a (in my opinion) better/cleaner way to accomplish what you already figured out. This does nothing but replace the javascript that the save button runs, meaning it will not move the save button out of its original toolbar group:
这是（在我看来）一种更好/更清洁的方法来完成您已经想到的事情。这只会替换保存按钮运行的 javascript，这意味着它不会将保存按钮移出其原始工具栏组：
html:
html：
<textarea id="CKEditor1"></textarea>
javascript:
javascript:
<script>
// Need to wait for the ckeditor instance to finish initialization
// because CKEDITOR.instances.editor.commands is an empty object
// if you try to use it immediately after CKEDITOR.replace('editor');
CKEDITOR.on('instanceReady', function (ev) {
// Create a new command with the desired exec function
var overridecmd = new CKEDITOR.command(editor, {
exec: function(editor){
// Replace this with your desired save button code
alert(editor.document.getBody().getHtml());
}
});
// Replace the old save's exec function with the new one
ev.editor.commands.save.exec = overridecmd.exec;
});
CKEDITOR.replace('CKEditor1');
</script>
回答by user3032450
Go to the ckeditorcontrol properties and find the prerender event so you can save your text in database with prerender event.
转到 ckeditorcontrol 属性并找到预渲染事件，以便您可以使用预渲染事件将文本保存在数据库中。
protected void CKEditorControl2_PreRender(object sender, EventArgs e)
{
if (!string.IsNullOrWhiteSpace(CKEditorControl2.Text))
{
// write here what you want to save in your database.
}
}
回答by Alessandro Minoccheri
with preventDefault()If this method is called, the default action of the event will not be triggered.
Try this code please:
withpreventDefault()如果调用此方法，则不会触发事件的默认动作。
请尝试此代码：
$(document).on('click', '#CKEditor1', function(ev){
ev.preventDefault();
alert('hello');
return false;
});
Thismight help you.
这可能对你有帮助。
回答by Tushar Gupta - curioustushar
event.preventDefault()documentation
Description: If this method is called, the default action of the event will not be triggered.
add this ...
添加这个...
ev.preventDefault();
in you code
在你的代码中
$('#CKEditor1').on('click', function (ev) {
ev.preventDefault();
alert('hello');
return false;
});
回答by Fly_pig
Use mousedownrather than clickon submit button, and add ev.preventDefaultto stop submit.
在提交按钮上使用mousedown而不是click，并添加ev.preventDefault以停止提交。
var element = CKEDITOR.document.getById('CKEditor1');
element.on('mousedown', function (ev) {
ev.preventDefault();
alert('hello');
return false;
});
