当前位置：文江博客话题详情

jQuery AJAX CKEditor

如何使用JQuery获取CKEditor的内容？

发布于 2024-09-24 16:30:33 字数 105 浏览 8 评论 0原文

我正在使用 CKEditor。我使用页面方法通过 ajax 保存表单值。

但CKEditor值的内容不能保存到表中。

我不回发页面。

我能为此做些什么呢？

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（15）

往事随风而去 2024-10-01 16:30:34

如果您没有对编辑器的引用，如 Aeon 的答案所示，您还可以使用以下形式：

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

如果您不使用已使用 JavaScriptencodeURIComponent 方法对其进行编码的库保存数据，而是手动执行此操作，您必须记住使用encodeURIComponent 对正在发送的数据进行正确编码。

因此，您应该执行以下操作：

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

有关更多信息： https://ckeditor.com/文档/ckeditor4/latest/guide/dev_savedata.html

If you don't hold a reference to the editor, as in Aeon's answer, you can also use the form:

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

If you do not save your data with a library that already encodes it by using the JavaScript encodeURIComponent method, but do it manually instead, you will have to remember to use encodeURIComponent to properly encode the data that is being sent.

So you should do below:

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

For more info: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_savedata.html

回复收藏 0 原文

负佳期 2024-10-01 16:30:34

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

将 YourInstanceName 替换为您的实例名称，您将获得所需的结果。

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

Replace YourInstanceName with the name of your instance and you will get the desired results.

回复收藏 0 原文

十年不长 2024-10-01 16:30:34

我遇到了 getData() 每次都无法工作的问题，尤其是在处理实时 ajax 时。

可以通过运行来解决这个问题：

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

然后使用 jquery 从文本区域获取值。

I was having issues with the getData() not working every time especially when dealing with live ajax.

Was able to get around it by running:

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

Then use jquery to get the value from the textarea.

回复收藏 0 原文

盛夏已如深秋| 2024-10-01 16:30:34

现在 jQuery 适配器存在，这个答案需要更新：

假设您发起了使用 $('.ckeditor').ckeditor(opt) 编辑器，然后使用 $('.ckeditor').val() 获取值

回复收藏 0 原文

孤凫 2024-10-01 16:30:34

要获取ckeditor的数据，您需要获取ckeditor实例

HTML代码：

<textarea class="form-control" id="reply_mail_msg" name="message" rows="3" data-form-field="Message" placeholder="" autofocus="" style="display: none;"></textarea>

Javascript：

var ck_ed = CKEDITOR.instances.reply_mail_msg.getData();

To get data of ckeditor, you need to get ckeditor instance

HTML code:

<textarea class="form-control" id="reply_mail_msg" name="message" rows="3" data-form-field="Message" placeholder="" autofocus="" style="display: none;"></textarea>

Javascript:

var ck_ed = CKEDITOR.instances.reply_mail_msg.getData();

回复收藏 0 原文

罪#恶を代价 2024-10-01 16:30:34

感谢约翰·木兰。这是我在 Symfony 项目中使用的 postForm 函数，现在可以使用 CK Editor 了。

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 );
      }
  });

Thanks to John Magnolia. This is my postForm function that I am using in my Symfony projects and it is fine now to work with CK Editor.

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 );
      }
  });

回复收藏 0 原文

烟织青萝梦 2024-10-01 16:30:34

您可以像这样检索数据：

<script>
var data = CKEDITOR.instances.editor1.getData();
// Your code to save "data", usually through Ajax.
</script>

参考：
http://docs.ckeditor.com/#!/guide/dev_savedata

you can retreive data like this :

<script>
var data = CKEDITOR.instances.editor1.getData();
// Your code to save "data", usually through Ajax.
</script>

reference :
http://docs.ckeditor.com/#!/guide/dev_savedata

回复收藏 0 原文

许一世地老天荒 2024-10-01 16:30:34

版本4.8.0

$('textarea').data('ckeditorInstance').getData();

version 4.8.0

$('textarea').data('ckeditorInstance').getData();

回复收藏 0 原文

我不在是我 2024-10-01 16:30:34

使用 Pure Vanilla Javascript / Jquery 或任何 javascript 库：

如果您在下面的文本区域中加载了 Ckeditor：

 <textarea name="editor1" id="editor1"></textarea>

那么您可以在文本区域中获取内容，如下所示：

var txtNotes = document.getElementsByClassName('ck-content')[0].innerHTML;

Using Pure Vanilla Javascript / Jquery or in any javascript library :

If you have Ckeditor loaded in below text-area:

 <textarea name="editor1" id="editor1"></textarea>

Then you can get content inside textarea as below:

var txtNotes = document.getElementsByClassName('ck-content')[0].innerHTML;

回复收藏 0 原文

开始看清了 2024-10-01 16:30:34

我通过在工具箱中添加 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);

i add ckEditor by adding DLL in toolBox.

html code:

<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>

for get data of it.

jquery:

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

回复收藏 0 原文

壹場煙雨 2024-10-01 16:30:34

我认为这会更好，只需通过 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;
});

I think it will be better, just serialize your form by jquery and cheers...

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

and In javascript section

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;
});

回复收藏 0 原文

南风几经秋 2024-10-01 16:30:34

版本4.6

CKEDITOR.instances.editor.getData()

version 4.6

CKEDITOR.instances.editor.getData()

回复收藏 0 原文

被你宠の有点坏 2024-10-01 16:30:34

获取编辑器内文本或其长度的简单方法:)

 var editorText = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData();
 alert(editorText);

 var editorTextLength = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData().length;
 alert(editorTextLength);

Easy way to get the text inside of the editor or the length of it :)

 var editorText = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData();
 alert(editorText);

 var editorTextLength = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData().length;
 alert(editorTextLength);

回复收藏 0 原文

当爱已成负担 2024-10-01 16:30:34

首先，您应该在页面中包含 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();

就是这样！ :)

First of all you should include ckeditor and jquery connector script in your page,

then create a textarea

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

attach ckeditor to the text area, in my project I use something like this:

$('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' } );

on submit get the content using:

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

That's it! :)

回复收藏 0 原文

徒留西风 2024-10-01 16:30:33

在实例上使用 CKEditor.editor.getData() 调用。也就是说：

HTML

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

JS for CKEditor 4.0.x

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

JS for 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!
});

use the CKEditor.editor.getData() call on the instance. That is to say:

HTML

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

JS for CKEditor 4.0.x

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

JS for 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!
});

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

504 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

知足的幸福

文章 0 评论 0

我一向站在原地

文章 0 评论 0

慕烟庭风

文章 0 评论 0

秉忠贞之诚守退让之实

文章 0 评论 0

小兔几

文章 0 评论 0

mb_3y7WUgWY

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文