1. 首頁
  2. 問答
  3. 如何使用JQuery獲取CKEditor的內容？

如何使用JQuery獲取CKEditor的內容？

2010-09-26 70 views

回答

-22

首先，你應該在你的頁面的CKEditor和jQuery連接器腳本，

然後創建一個文本

<textarea name="content" class="editor" id="ms_editor"></textarea>

連接的CKEditor到文本區，在項目中，我使用的是這樣的：

$('textarea.editor').ckeditor(function() { 
     }, { toolbar : [ 
      ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], 
      ['Undo','Redo'], 
      ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], 
      ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], 
      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], 
      ['Link','Unlink','Anchor', 'Image', 'Smiley'], 
      ['Table','HorizontalRule','SpecialChar'], 
      ['Styles','BGColor'] 
     ], toolbarCanCollapse:false, height: '300px', scayt_sLang: 'pt_PT', uiColor : '#EBEBEB' });

上提交獲得使用內容：

var content = $('textarea.editor').val();

就是這樣！ :)

來源

2010-09-26 19:17:43 Mike

+0

感謝的答案，但我不回發頁面，這就是爲什麼我不能得到ckeditor的內容。我的問題是我如何獲得ckeditor的內容而無需使用jquery回發。 – pegasus 2010-09-26 22:20:28

+3

下面的答案好多了。 – 2012-06-20 22:06:45

+39

這是我第一次看到這樣一個負面的投票答案作爲接受的答案。難以置信。 – 2013-04-18 13:54:10

174

使用實例上的CKEditor.editor.getData()調用。這就是說：

HTML

<textarea id="my-editor"> 
<input id="send" type="button" value="Send">

JS的CKEditor的4.0.x的

$('#send').click(function() { 
    var value = CKEDITOR.instances['DOM-ID-HERE'].getData() 
    // send your ajax request with value 
    // profit! 
});

JS的CKEditor的3.6.x的

var editor = CKEDITOR.editor.replace('my-editor'); 

$('#send').click(function() { 
    var value = editor.getData(); 
    // send your ajax request with value 
    // profit! 
});

來源

2010-12-17 20:45:25 Aeon

+0

這工作令人難以置信。我無法弄清楚怎麼樣，終於找到了這個！謝謝！ – Reaction21 2011-11-22 14:31:00

+6

這應該是被接受的答案，而不是上面的那個 – ianace 2011-11-23 00:15:22

+3

這似乎不適用於最新版本的CKEditor（4.0.2 - 2013年3月6日）。但是，下面的答案是：'CKEDITOR.instances ['DOM-ID-HERE']。getData（）;' – Laoujin 2013-03-18 08:44:04

62

如果你不」你可以參考編輯，如Aeon的回答，你也可以本身的形式：

var value = CKEDITOR.instances['my-editor'].getData();

來源

2011-12-19 18:51:34 jverdi

+4

+1的更新給您，先生。花費時間尋找如何從CKEDITOR的1個實例（其中有通過類「編輯器」初始化的X實例）獲取數據。結束於：var strData = CKEDITOR.instances ['editor_'+ intCounter] .getData（）;' - 如果它對其他人有用。 – 2013-02-14 11:27:05

0


i加在工具箱添加DLL添加CKEDITOR。
的html代碼：

<CKEditor:CKEditorControl ID="editor1" runat="server" 
      BasePath="ckeditor" ContentsCss="ckeditor/contents.css" 
      Height="250px" 
      TemplatesFiles="ckeditor/themes/default/theme.js" FilebrowserBrowseUrl="ckeditor/plugins/FileManager/index.html" 
      FilebrowserFlashBrowseUrl="ckeditor/plugins/FileManager/index.html" FilebrowserFlashUploadUrl="ckeditor/plugins/FileManager/index.html" 
      FilebrowserImageBrowseLinkUrl="ckeditor/plugins/FileManager/index.html" FilebrowserImageBrowseUrl="ckeditor/plugins/FileManager/index.html" 
      FilebrowserImageUploadUrl="ckeditor/plugins/FileManager/index.html" 
      FilebrowserUploadUrl="ckeditor/plugins/FileManager/index.html" BackColor="#FF0066" 
        DialogButtonsOrder="Rtl" 
        FontNames="B Yekan;B Yekan,tahoma;Arial/Arial, Helvetica, sans-serif; Comic Sans MS/Comic Sans MS, cursive; Courier New/Courier New, Courier, monospace; Georgia/Georgia, serif; Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif; Tahoma/Tahoma, Geneva, sans-serif; Times New Roman/Times New Roman, Times, serif; Trebuchet MS/Trebuchet MS, Helvetica, sans-serif; Verdana/Verdana, Geneva, sans-serif" 
        ResizeDir="Vertical" ResizeMinHeight="350" UIColor="#CACACA">dhd fdh</CKEditor:CKEditorControl>

爲得到它的數據。
的jQuery：

var editor = $('textarea iframe html body').html(); 
    alert(editor);

來源

2012-12-05 10:38:21

+0

嗨，對於我返回'undefined'.i由dll文件添加。 – 2012-12-13 22:50:54

6

我跟尤其是對於現場AJAX處理時getData()沒有工作，每次的問題。

之所以能夠通過運行繞過它：

for(var instanceName in CKEDITOR.instances){ 
    CKEDITOR.instances[instanceName].updateElement(); 
}

然後使用jQuery得到textarea的價值。

來源

2014-01-14 11:03:30

2

感謝John Magnolia。這是我在Symfony項目中使用的postForm函數，現在可以使用CK編輯器了。

function postForm($form, callback) 
{ 
    // Get all form values 
    var values = {}; 
    var fields = {}; 

    for(var instanceName in CKEDITOR.instances){ 
     CKEDITOR.instances[instanceName].updateElement(); 
    } 

    $.each($form.serializeArray(), function(i, field) { 
     values[field.name] = field.value; 
    }); 

    // Throw the form values to the server! 
    $.ajax({ 
     type  : $form.attr('method'), 
     url   : $form.attr('action'), 
     data  : values, 
     success  : function(data) { 
      callback(data); 
     } 
    });

來源

2014-11-04 05:28:20

6 
var value = CKEDITOR.instances['YourInstanceName'].getData() 
alert(value);

替換YourInstanceName與實例的名稱，你會得到想要的結果。

來源

2015-01-03 15:41:43 Mukaram

0

我認爲這將是更好的，只是通過序列化jQuery和歡呼聲表單...

<form id="ajxForm"> 
    <!-- input elments here --> 
    <textarea id="ck-editor" name="ck-editor" required></textarea> 
    <input name="text" id="text" type="text" required> 
<form>

，並在JavaScript部分 

CKEDITOR.replace('ck-editor', { 
    extraPlugins: 'sourcedialog', 
    removePlugins: 'sourcearea' 
}); 

$("form#ajxForm").submit(function(e) { 
    e.preventDefault(); 
    var data = $(this).serialize(); 
    if (data != '') { 
    $.ajax({ 
     url: 'post.php', 
     cache: false, 
     type: 'POST', 
     data: data, 
     success: function(e) { 
     setTimeout(function() { 
      alert(e); 
     }, 6500); 
     } 
    }); 
    } 
    return; 
});

來源

2015-06-03 08:08:02

1

現在jQuery adapter存在，這個答案需要更新：

假設您發起編輯$('.ckeditor').ckeditor(opt)那麼你$('.ckeditor').val()

來源

2015-08-20 06:26:05 Benj

+0

在提問時，我不認爲jQuery適配器存在。儘管謝謝你的回答，但這些日子絕對是一種有效的方式。 – Aeon 2015-10-09 04:00:38

+0

當然，我相應地更新了我的回答的介紹 – Benj 2015-10-09 05:51:21

+1

這對我沒有幫助。空字符串結果。 – Martijn 2017-02-09 08:56:49

0

版本中獲得的價值4.6

CKEDITOR.instances.editor.getData()

來源

2017-02-09 05:09:14

+2

雖然答案可能準確，但很難理解爲什麼這是答案。請爲社區的利益添加簡要說明 – ochi 2017-02-09 07:11:13

+1

歡迎使用堆棧溢出:-) 請看[答]。您應該提供一些信息，說明爲什麼您的代碼可以解決問題。 僅有代碼的答案對社區沒有用處。 – JimHawkins 2017-02-09 09:20:58

相關問題

 相關問題