关键词:
【中文标题】ckeditor 更新文本区域【英文标题】:Ckeditor update textarea 【发布时间】:2011-03-10 00:38:45 【问题描述】:我正在尝试让 ckeditor 正常工作。显然它没有使用 textarea 所以提交表单时不会在编辑器中提交文本。因为我使用了多态关联等。我无法使用 onsubmit 函数来获取 textarea 的值(提交表单时)。
于是我发现了这个问题:Using jQuery to grab the content from CKEditor's iframe
有一些非常好的答案。那里发布的答案使 textarea 保持最新。这非常好,正是我需要的!不幸的是,我无法让它工作。 有人知道为什么(例如)这不起作用吗?
我有一个 textarea(rails 但它只是转换为普通的 textarea):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>
还有以下js:
if(CKEDITOR.instances.ckeditor )
CKEDITOR.remove(CKEDITOR.instances.ckeditor);
CKEDITOR.replace( 'ckeditor',
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]);
CKEDITOR.instances["ckeditor"].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.ckeditor.updateElement();
我的萤火虫中出现以下“错误”。
missing ) after argument list
[Break on this error] function CK_jQ()\n
【问题讨论】:
好的,上面的代码当然有错误。有一个)丢失:P(但仍然无法正常工作 请将标题更改为 Ckeditor 4 update textarea 【参考方案1】:提交前做:
for(var instanceName in CKEDITOR.instances)
CKEDITOR.instances[instanceName].updateElement();
【讨论】:
但是 OP 已经一直在调用 updateElement 并且它仍然对 OP 不起作用,这可能就是为什么这不是这里的答案。 @Nenotlep:接受的答案基本相同,但我的答案是一种解决方法,因为 CKEDITOR 已经提供了 updateElement @sldev:我同意你的解决方案更好,我试图指出他已经在他的解决方案中调用了 updateElement(),尽管在提交之前不像你的位置那么合乎逻辑:) 效果很好。令我震惊的是为什么 CKEditor 的默认保存操作不能以这种方式工作。 别忘了if (CKEDITOR.instances.hasOwnProperty(instanceName))
【参考方案2】:
你明白了吗?
我正在使用 CKEditor 3.6.1 版和 jQuery 表单提交处理程序。提交时 textarea 是空的,这对我来说是不正确的。但是,您可以使用一个简单的解决方法,假设您的所有 CKEditor 文本区域都具有 css 类 ckeditor。
$('textarea.ckeditor').each(function ()
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
);
在进行提交处理之前执行上述操作,即。表单验证。
【讨论】:
原型解决方案相同:$$('textarea._cke').each( function(T) T.update( CKEDITOR.instances[T.id].getData() ); );
@TJ- 我是 Jquery 的新手,我不知道它是如何工作的?你能写一行代码来提醒 ckeditor 的值吗?我正在尝试:-alert($textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData()));
。请...
@J.J.在提醒之前,将 textarea 的 jquery 对象分配给 $textarea。 var $textarea = $('textarea.mytextarea');
然后使用alert(CKEDITOR.instances[$textarea.attr('name')].getData())
。在应用 ckeditor 后执行此操作。
谢谢,节省了我很多时间
我认为你必须使用 $textarea.html() 而不是 .val()【参考方案3】:
感谢@JohnDel 提供的信息,我使用 onchange 让它更新每个更改。
CKEDITOR.on('instanceReady', function()
$.each( CKEDITOR.instances, function(instance)
CKEDITOR.instances[instance].on("change", function(e)
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
);
);
);
【讨论】:
我希望 CKEDITOR 默认这样做,我真的看不出有什么理由不这样做?instanceReady
为您拥有的每个编辑器实例触发。所以如果你有多个实例这将绑定onChange
事件多次做很多不必要的工作。您应该使用提供给instanceReady
回调的the event parameter 而不是$.each(...)
,并获取其editor
属性,该属性是刚刚调用其instanceReady
事件的编辑器实例。
这个也适用于多个文本区域,由 ajax 加载并使用 CKEDITOR.replace('item', language)。【参考方案4】:
将以上所有答案合二为一。
创建一个新的 custom.js 文件并添加:
CKEDITOR.on('instanceReady', function()
$.each( CKEDITOR.instances, function(instance)
CKEDITOR.instances[instance].on("instanceReady", function()
this.document.on("keyup", CK_jQ);
this.document.on("paste", CK_jQ);
this.document.on("keypress", CK_jQ);
this.document.on("blur", CK_jQ);
this.document.on("change", CK_jQ);
);
);
);
function CK_jQ()
for ( var instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement();
你不用担心textarea的名字,只要在textarea中添加一个类ckeditor
,以上就大功告成了。
【讨论】:
【参考方案5】:为更新添加函数 JavaScript
function CKupdate()
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
这是工作。酷
【讨论】:
【参考方案6】:只需添加
CKEDITOR.instances.textAreaClientId.on('blur', function()CKEDITOR.instances. textAreaClientId.updateElement(););
textAreaClientId
是您的实例名称
问候
【讨论】:
【参考方案7】:CKEDITOR.instances["ckeditor"].on("instanceReady", function()
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
)
【讨论】:
【参考方案8】:我只是增加了 T.J. 的回应。并为我工作:
$("form").on("submit", function(e)
$('textarea.ckeditor').each(function ()
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
);
);
【讨论】:
【参考方案9】:加载中:
$(function ()
setTimeout(function ()
function CK_jQ(instance)
return function ()
CKEDITOR.instances[instance].updateElement();
;
$.each(CKEDITOR.instances, function (instance)
CKEDITOR.instances[instance].on("keyup", CK_jQ(instance));
CKEDITOR.instances[instance].on("paste", CK_jQ(instance));
CKEDITOR.instances[instance].on("keypress", CK_jQ(instance));
CKEDITOR.instances[instance].on("blur", CK_jQ(instance));
CKEDITOR.instances[instance].on("change", CK_jQ(instance));
);
, 0 /* 0 => To run after all */);
);
【讨论】:
【参考方案10】:以上所有答案都集中在如何解决这个错误,但我想回答导致我这个错误的原因
我有一个
<textarea class="ckeditor" rows="6" name="Cms[description]"></textarea>
改为
<textarea class="ckedit" rows="6" name="Cms[description]"></textarea>
我将类属性值更改为 ckeditor 以外的任何值,并且繁荣错误消失了。
希望有所帮助
【讨论】:
文本区域消失 - Ckeditor
】文本区域消失-Ckeditor【英文标题】:Thetextareadisappears-Ckeditor【发布时间】:2012-11-2102:07:25【问题描述】:我尝试使用ckeditor但如果我放了例如colorbutton插件,textarea消失。以下是我的尝试:CKEDITOR.replace(\'editor1\',extraPlugins:\'colorbu... 查看详情
CKEditor 5 的多个文本区域
】CKEditor5的多个文本区域【英文标题】:MultipletextareaswithCKEditor5【发布时间】:2018-06-1620:32:01【问题描述】:我尝试将CKEditor5设置为多个<textarea>,但只有第一个有效。代码如下:<scriptsrc="https://cdn.ckeditor.com/ckeditor5/1... 查看详情
如何为具有相同名称的多个文本区域添加ckeditor
】如何为具有相同名称的多个文本区域添加ckeditor【英文标题】:Howtoaddckeditorformultipletextareawithsamename【发布时间】:2021-12-1021:11:09【问题描述】:<div><textareaclass="input-areaadditional"name="research_projects[]"placeholder="ProjectDetails"sp 查看详情
如何将 CKEditor 添加到 Sonata Admin 后端的文本区域
】如何将CKEditor添加到SonataAdmin后端的文本区域【英文标题】:HowtoaddCKEditortoSonataAdminbackend\'stextareas【发布时间】:2013-12-1416:44:15【问题描述】:我想将CKEditor添加到SonataAdmin后端。现在我只运行CreateBundle,它允许我内联编辑内容... 查看详情
更新文本区域
】更新文本区域【英文标题】:Updatingatextarea【发布时间】:2012-10-2804:32:42【问题描述】:我在更新或“重新绘制”文本区域时遇到问题。我希望在for循环的每个循环中。我尝试了一些方法,例如调用paint();和repaint();函数以及使... 查看详情
VueJs:文本区域输入绑定
...rget.value)">但是在textarea上这不起作用。我正在使用的是CKEditor 查看详情
无法获取更新的文本区域值
】无法获取更新的文本区域值【英文标题】:UnabletogetUpdatedtextareaValue【发布时间】:2011-12-2514:31:59【问题描述】:我有一个问题:我的页面上有一个如下所示的文本区域:<textareaid=\'redactor_content\'name=\'redactor_content\'style=\'width:... 查看详情
更新时如何让文本区域保持滚动到底部
】更新时如何让文本区域保持滚动到底部【英文标题】:Howtohaveatextareatokeepscrolledtothebottomwhenupdated【发布时间】:2011-11-1410:38:41【问题描述】:我的问题在这里有点离题,所以我会尽力解释这一点。我有一个文本区域,其css为#ob... 查看详情
是否可以使用来自 AJAX 调用的数据更新文本区域元素? [关闭]
】是否可以使用来自AJAX调用的数据更新文本区域元素?[关闭]【英文标题】:Isitpossibletoupdateatextarea-elementwithdatafromanAJAXcall?[closed]【发布时间】:2014-10-0511:47:35【问题描述】:这是我希望附加到文本区域的.ready(function)。希望你能... 查看详情
Angular - 用户输入后无法更新文本区域
】Angular-用户输入后无法更新文本区域【英文标题】:Angular-Cantupdatetextareaafteruserinput【发布时间】:2017-03-2006:44:12【问题描述】:我对Anuglar有疑问。ng-bind一旦用户输入改变了textarea的值,就不会更新它。注意:我使用ng-bind而不... 查看详情
ReactJS 组件文本区域未在状态更改时更新
】ReactJS组件文本区域未在状态更改时更新【英文标题】:ReactJScomponenttextareanotupdatingonstatechange【发布时间】:2017-06-0602:42:08【问题描述】:我正在尝试编写一个笔记/组织应用程序,但遇到了一个令人沮丧的错误。这是我的组件... 查看详情
如何更新文本区域的值(ASP.NET Core MVC)
】如何更新文本区域的值(ASP.NETCoreMVC)【英文标题】:Howtoupdatethevalueofatextarea(ASP.NETCoreMVC)【发布时间】:2022-01-0208:32:36【问题描述】:为了简单起见:这是我的服务类:publicclassServiceClasspublicstringRequestget;set;//otherlogicprivatevoidEx... 查看详情
CKEditorType 在 symfony sonata admin 中显示文本区域
】CKEditorType在symfonysonataadmin中显示文本区域【英文标题】:CKEditorTypeshowstextareainsymfonysonataadmin【发布时间】:2021-10-1516:59:27【问题描述】:我在我的symfony项目中使用friendsofsymfony/ckeditor-bundle我按照symfony文档https://symfony.com/doc/curre... 查看详情
使用文本区域中的数据更新 Netsuite 记录中的字段
】使用文本区域中的数据更新Netsuite记录中的字段【英文标题】:UpdatingafieldinaNetsuiterecordwithdatafromatextarea【发布时间】:2019-07-1105:16:28【问题描述】:我已经与SCA合作了一段时间,但在将数据从前端移动到Netsuite后端时,我需要... 查看详情
如何使用 MySQL 在 PHP 中创建不断更新的文本区域?
】如何使用MySQL在PHP中创建不断更新的文本区域?【英文标题】:HowdoIcreateaconstantlyupdatedtextareainPHPusingMySQL?【发布时间】:2014-07-0904:54:32【问题描述】:我的计划是有一个不需要提交按钮来更新它的大文本区域,每次你输入一个... 查看详情
CKEditor 5 的设定值
】CKEditor5的设定值【英文标题】:SettingvalueofCKEditor5【发布时间】:2018-11-2510:00:56【问题描述】:我正在我的网站上开发一个功能,用户应该能够使用ckeditor5和textarea编辑他或她自己的主题。textarea放置在模态框内。但是,当我尝... 查看详情
带有换行符的文本区域中的数据到数据库
...按钮后,我使用角度控制器保存该数据。然后,一旦单击更新按钮,我就会更新该数据库中的一行,其中一个行字段是来自该textarea的数据。到目前为止一切顺利,更新完成,当我在文本区域中换行时问题就开始了,例如,我输... 查看详情
jquery文本区域长度计数?
...符:100|0of500//0of500必须是红色一旦用户输入,字符也需要更新计数。一旦用户达到计数说最小字符100,我需要显示最少字符:100|1 查看详情