У меня есть пользовательская CMS, которая использует CKEditor * (FCKEditor v3) для редактирования контента, Я также использую плагин jQuery Validation, чтобы проверить все поля для ошибки до отправки на AJAX. Я использую serialize() для передачи данных на сервер PHP.
Проблема заключается в том, что сериализация позволяет правильно захватить все поля, за исключением фактического содержимого, введенного в CKEditor. Как и любой другой редактор WYSIWYG, он тоже накладывает iframe поверх существующего текстового поля. И serialize игнорирует iframe и смотрит только в текстовое поле для контента, которое, конечно же, не находит, возвращая тем самым пустой контент.
Мой подход к этому заключается в создании привязки к событию onchange CKEditor и одновременному обновлению текстового поля (CKEDITOR.instances.[textboxname].getData()) содержимое или другое скрытое поле с любыми изменениями, внесенными в редактор,
Однако, поскольку CKEditor все еще находится в стадии бета-тестирования и сильно не хватает документации, я не могу найти подходящий вызов API, который позволит мне это сделать.
Есть ли у кого-нибудь идеи о том, как это сделать?
Другими универсальными решениями для этого будут следующие: всякий раз, когда вы пытаетесь отправить форму
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
Это заставит все экземпляры CKEDITOR в форме обновить свои соответствующие поля
Я только что выпустил плагин CKEditor для jQuery, который позаботится обо всем этом в фоновом режиме без дополнительного кода: http://www.fyneworks.com/jquery/CKEditor/
Я также пытался решить эту проблему сегодня. Я понял, что причина, по которой этот код не работает для меня, заключается в том, что экземпляр CKEditor еще не готов, когда ссылается на свойство документа. Таким образом, вам нужно вызвать событие instanceReady и в нем можно использовать события документа, потому что до этого он просто не существует.
Этот пример может работать для вас:
CKEDITOR.instances["editor1"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
});
function CK_jQ()
{
CKEDITOR.tools.setTimeout( function()
{
$("#editor1").val(CKEDITOR.instances.editor1.getData());
}, 0);
}
Это должно сделать это...
CKEDITOR.instances["editor1"].document.on('keydown', function(event)
{
CKEDITOR.tools.setTimeout( function()
{
$("#editor1").val(CKEDITOR.instances.editor1.getData());
}, 0);
});
CKEDITOR.instances["editor1"].document.on('paste', function(event)
{
CKEDITOR.tools.setTimeout( function()
{
$("#editor1").val(CKEDITOR.instances.editor1.getData());
}, 0);
});
edit: добавлен раздел для обновления текстового поля после пасты тоже...
У меня был успех с этим:
console.log(CKEDITOR.instances.editor1.getData());
Я принял несколько иной подход, я решил, что было бы лучше использовать функцию обновления ckeditor, и поскольку использовалась клавиатура, таймаут не нужен
CKEDITOR.instances["editor1"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
}
function CK_jQ()
{
CKEDITOR.instances.editor1.updateElement();
}
Не лучше ли было бы сделать именно это:
CKEDITOR.instances.editor1.on('contentDom', function() {
CKEDITOR.instances.editor1.document.on('keyup', function(event) {/*your instructions*/});
});
Событие contentDom сработало для меня, а не для экземпляра Ready... Мне бы очень хотелось узнать, что происходит в событиях ae, но я предполагаю, что они являются собственностью...
var editor = CKEDITOR.replace('editor');
CKEDITOR.instances.editor.on("instanceReady", function(){
this.on('contentDom', function() {
this.document.on('keydown', function(event) {
CKEDITOR.tools.setTimeout( function(){
$(".seldiv").html(CKEDITOR.instances.editor.getData());
}, 1);
});
});
this.on('contentDom', function() {
this.document.on('paste', function(event) {
CKEDITOR.tools.setTimeout( function(){
$(".seldiv").html(CKEDITOR.instances.editor.getData());
}, 1);
});
});
edits_clix();
var td = setTimeout("ebuttons()", 1);
})
CKEDITOR.instances.wc_content1.getData() вернет данные ckeditor CKEDITOR.instances.wc_content1.setData() установит данные ckeditor
Я пробовал всю ночь, чтобы это работало, но оно пока не работает. Не могли бы вы объяснить, где вы разместили этот script?
Я создаю свою страницу из xquery, поэтому я не могу поместить этот script на страницу, потому что она содержит "{", которая прерывает обработку xquery. Помещение script в cdata разбивает script. Поэтому я помещаю on instanceReady прослушиватель в тот же самый script, который создает редактор, и вызывает внешний script, чтобы добавить остальные. например:
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1' );
editor.on("instanceReady", updateInstance() )
</script>
то updateInstance содержит:
function updateInstance()
{
CKEDITOR.instances["editor1"].document.on('keydown', function(event)
{
CKEDITOR.tools.setTimeout( function()
{
$("#editor1").val(CKEDITOR.instances.editor1.getData());
}, 0);
});
CKEDITOR.instances["editor1"].document.on('paste', function(event)
{
CKEDITOR.tools.setTimeout( function()
{
$("#editor1").val(CKEDITOR.instances.editor1.getData());
}, 0);
});
}
Я думаю, что пользователь спрашивал о сериализации, я боролся за сериализацию формы для отправки, и это давало мне много проблем.
Это то, что сработало для меня:
$(document).ready(function() {
$('#form').submit(function(){
if ( CKEDITOR.instances.editor1.getData() == '' ){
alert( 'There is no data available' );//an alert just to check if its working
}else{
var editor_data = CKEDITOR.instances.editor1.getData();
$("#editor1").val(editor_data); //at this point i give the value to the textarea
$.ajax({
//do your ajax here
});
}
return false;
});
});
Я решил эту проблему с текущей версией: http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js
После строки 55 this.submit(function (event) {- я добавил этот код:
if (typeof CKEDITOR !== "undefined") {
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
}