使用javascript获取ckeditor textarea的textarea值

尽管我已经花了好几个小时阅读了很多帮助过的教程，但我仍然遇到了问题我如何找出用户输入到ckeditor textarea中的内容。使用javascript获取ckeditor textarea的textarea值

我想要做的就是让有人输入textarea时，无论他们输入什么，都会出现在页面不同部分的div中。

我有一个简单的文本输入做得很好，但因为文本区域是一个ckEditor类似的代码不起作用。

我知道答案在这里：ckEditor API textarea value但我不知道我的意思是做什么。我不认为有人幻想帮助我？

我有工作的代码是：

$('#CampaignTitle').bind("propertychange input", function() { 
    $('#titleBar').text(this.value); 
});

和

<label for="CampaignTitle">Title</label> 
<input name="data[Campaign][title]" type="text" id="CampaignTitle" />

和

<div id="titleBar" style="max-width:960px; max-height:76px;"></div>

来源

2011-10-26 Didju Juzphart

我仍然有问题搞清楚我是如何找出用户输入到ckeditor textarea中的。

好的，这很简单。假设你的编辑器被命名为“editor1”，这会给你一个警报，您的内容：

alert(CKEDITOR.instances.editor1.getData());

较难的部分被检测到时，用户类型。从我可以告诉的是，实际上并没有支持这样做（并且我对btw文档印象不深）。看到这篇文章： http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

相反，我建议设置是要与textarea的价值不断更新你的第二个div定时器：

timer = setInterval(updateDiv,100); 
function updateDiv(){ 
    var editorText = CKEDITOR.instances.editor1.getData(); 
    $('#trackingDiv').html(editorText); 
}

这似乎工作得很好。下面是为清楚起见，整个事情：

<textarea id="editor1" name="editor1">This is sample text</textarea> 

<div id="trackingDiv" ></div> 

<script type="text/javascript"> 
    CKEDITOR.replace('editor1'); 

    timer = setInterval(updateDiv,100); 
    function updateDiv(){ 
     var editorText = CKEDITOR.instances.editor1.getData(); 
     $('#trackingDiv').html(editorText); 
    } 
</script>

来源

2011-10-26 18:45:09 Jere

非常感谢。完美的作品。大象果汁:) –

但有一件事。在我的ckeditor上，我有用于粗体下划线和大小的工具栏。如果您应用这些样式，则不会应用到相应的trackingDiv中 - 除了下划线之外，这很奇怪。但大小，粗体，下划线和斜体不起作用。有任何想法吗？ –

Ckeditor正在使用强大的粗体，以斜体表示。我的猜测是，您使用的浏览器或框架不会将粗体和斜体样式应用于这些标签。你必须自己做。 http://stackoverflow.com/questions/271743/whats-the-difference-between-b-and-strong-i-and-em – Jere

嘛。你问过从textarea获得价值，但在你的例子中你使用了一个输入。不管怎么说，在这里我们去：

$("#CampaignTitle").bind("keyup", function() 
{ 
    $("#titleBar").text($(this).val()); 
});

如果你真的想要一个文本输入的文本类型更改为这个

<textarea id="CampaignTitle"></textarea>

希望它能帮助。

来源

2011-10-26 17:02:14

你可以jQuery的

jQuery.fn.CKEditorValFor = function(element_id){ 
    return CKEDITOR.instances[element_id].getData(); 
}

整合功能和作为参数传递的CKEditor的元素的id

var campaign_title_value = $().CKEditorValFor('CampaignTitle');

来源

2013-01-12 16:17:43 p1nox

简单的执行

CKEDITOR.instances[elementId].getData();

with元素分配编辑器的元素id = id。

来源

2014-02-25 06:41:52 itzmukeshy7

这是最好的解决方案。 – Ahsan

我接受的答案在我的情况下不起作用。它看起来很酷，因为它使用主域ID作为实例ID。好样的！它也可以像CKEDITOR.instances.elementId.getData（）一样使用。 – naf4me

@ naf4me是的，我们也可以这样做，但我们不能使用动态是。 – itzmukeshy7

-1

您可以添加以下代码： ckeditor字段数据将通过每次单击存储在$（'＃ELEMENT_ID'）。val（）中。我使用了这个方法，效果很好。 ckeditor现场数据将被实时保存并准备发送。

$().click(function(){ 
    $('#ELEMENT_ID').val(CKEDITOR.instances['ELEMENT_ID'].getData()); 
});

来源

2014-04-20 12:28:25

为什么在文档上点击事件？ –

请解释为什么这是问题的答案，或者希望删除这个答案。 –

@Marcel Gwerder：文档可以被删除，但不作任何改变。 –

至少为CKEDITOR 4.4.5，你可以设立一个监听器的每一个变化给编辑的内容，而不是运行定时器：

CKEDITOR.on("instanceCreated", function(event) { 
    event.editor.on("change", function() { 
     $("#trackingDiv").html(event.editor.getData()); 
    }); 
});

我知道这可能为时已晚对于OP来说，并没有显示出正确的答案或者没有任何投票（但是），但我想我会为未来的读者更新帖子。

来源

2014-11-12 16:50:08 Lindsay

复制并粘贴上述代码并马上工作 – Chad

-1

var campaignTitle= CKEDITOR.instances['CampaignTitle'].getData();

来源

2016-10-17 06:37:43 Isuru

此代码可能会回答问题，但是您能否解释一下这个问题？ – Jimbou

不需要回答。这在5年前得到了公认的答案。另外，你还没有解释你的任何代码。 – Novocaine

使用javascript获取ckeditor textarea的textarea值

回答

相关问题