如何使用jquery获取ckeditor textarea值?

时间:2016-05-21 10:19:35

标签: javascript jquery html

我在textarea上使用ckeditor但我无法从中获取数据。

代码:

<textarea name="DSC" class="materialize-textarea"></textarea>
<script>
  CKEDITOR.replace('DSC');
  </script>

Jquery:

var title = $('input[name=TITLE]').val();
    var desc = $('textarea[name=DSC]').text();
    var formdata = 'TITLE='+title+'&DSC='+desc;

8 个答案:

答案 0 :(得分:23)

不需要jQuery CKEditor有自己的方法从转换后的textarea中获取数据:

var desc = CKEDITOR.instances['DSC'].getData();

OR:

var desc = CKEDITOR.instances.DSC.getData();

答案 1 :(得分:1)

使用jQuery_Adapter你可以写:

$(function () {
  $('textarea[name="DSC"]').ckeditor();
  $('#btn').on('click', function(e) {
    console.log('ckeditor content: ' + $('textarea[name="DSC"]').val());
  })
});

包含文件:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.9/adapters/jquery.js"></script>

HTML: 

<textarea name="DSC" class="materialize-textarea"></textarea>
<button id="btn">Get text</button>

答案 2 :(得分:1)

警报(CKEDITOR.instances.DSC.getData());

答案 3 :(得分:0)

<form>
        <textarea name="editor1" id="editor1" rows="10" cols="80">
            This is my textarea to be replaced with CKEditor.
        </textarea>
    <button type="button" id="getDataBtn">Get Data</button>

    </form>
     <script>
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
         CKEDITOR.replace( 'editor1' );

           $(document).ready(function(){

                $("#getDataBtn").click(function(){
                    var editorData= CKEDITOR.instances['editor1'].getData();
                    alert(" your data is :"+editorData);
                })

           });
        </script>

答案 4 :(得分:0)

在textarea中使用id attibute,然后在CKeditor中使用该id,而不是textarea的名称检查下面的

<textarea name="textareaname" id="textarea-id"></textarea>
CKEDITOR.replace( 'textarea-id');//use id not name//
var ckValue = CKEDITOR.instances["textarea-id"].getData(); or
var ckValue = CKEDITOR.instances.textarea-id.getData();

答案 5 :(得分:0)

//getting data form ckeditor in textarea.

var NodeDataSessionTextarea = {};
jQuery('.class-textarea').each(function(index, el) {
    var editor_id = jQuery(this).attr('id');
    var elevalue = jQuery(this).val();

    // Getting ckeditor instance.
    var editor = CKEDITOR.instances[editor_id];
    if (editor) {
        editor.on('key', function(e) {
        var self = this;
            setTimeout(function() {
                //store data in object with id
                NodeDataSessionTextarea[editor_id] = self.getData();
            }, 10);
        });

        editor.on('afterCommandExec', function(e) {
            var self = this;
            setTimeout(function() {
                //store data in object with id
                NodeDataSessionTextarea[editor_id] = self.getData();
          }, 10);
        });

        editor.on( 'blur', function() {
            //store data in session
            var nodedataencodetextarea = JSON.stringify(NodeDataSessionTextarea);
            sessionStorage.setItem("NodeDataSessionTextarea", nodedataencodetextarea);
        });
    }
});



//put data in ckeditor.
var editor = CKEDITOR.instances[id];
if (editor) {
    editor.setData(getTemplateData);
}

答案 6 :(得分:0)

下面的过去文本区域ID。

 CKEDITOR.instances['Text_Area_Id_Here'].getData();

例如,我有文本区域

     <textarea class="form-control" id="Description" name="description" width="100%" height="150" ckeditor="true" maxlength="20000" ismandatory="false">
                                                
                    </textarea>

我得到了这样的文本区域的价值

 var description = CKEDITOR.instances['Description'].getData();

答案 7 :(得分:-1)

您应该使用getData()方法从CKEDITOR获取数据。

<textarea name="DSC" class="materialize-textarea" id="DSC"></textarea>
<script>
  CKEDITOR.replace('DSC');
  </script>

//reference the id DSC
var desc = CKEDITOR.instances['DSC'].getData();