带有jQuery表单向导的Ckeditor [英] Ckeditor with jQuery form wizard

问题描述

我正在创建一个基于jQuery向导的表单（表单分成5步）向导表单，最后两个我的问题是这两个ckeditor没有响应，即他们不接受任何输入。我无法弄清楚为什么会发生这种情况。相同的ckeditor工作正常，没有形式向导。我认为表单之间存在冲突向导插件和ckeditor插件，但不知道到底发生了什么。

github上的示例项目

这是我的自定义设置：

 < div class =form-content> 
< div class =wizard-ignore> 
< script type =text / javascript> 
< ckeditor：config var =toolbar_Mytoolbar> 
 [
 ['Bold'，'Italic'，'Underline'，'Scayt'] 
] 
< / ckeditor：config> 
 
删除CKEDITOR.instances ['$ {name}']; 
 CKEDITOR.config.scayt_autoStartup = true; 
 CKEDITOR.config.fillEmptyBlocks = false; 
函数CKupdate（）{
 for（CKEDITOR.instances中的实例）{
 CKEDITOR.instances [instance] .updateElement（）; 
} 
} 
   $ {summary} 
< / g：if> 
< / ckeditor：editor> 
 
< / script> 
< / div> 
< / div> 
  

当我把一些 alert（）;声明在上面的脚本ckeditor在firefox.unable中找到根本原因。任何建议/想法都会对我有所帮助。

Edit2：
github上的示例项目 Grails项目的链接。

解决方案

Jan Sundman 答案绝对正确，只需添加class wizard-ignore 到编辑器中。

---

您正在使用 grails CKEditor插件，您可以将课程设置为

 < script type =text / javascript> 
 $（$ {
 $（＃$ {name}）。addClass（'wizard-ignore'）; 
 
  [
 ['Bold'，'Italic'，'Underline'，'Scayt'] 
] 
< / ckeditor：config> 
 
 delete CKEDITOR.instances ['$ {name}']; 
 CKEDITOR.config.scayt_autoStartup = true; 
 CKEDITOR.config.fillEmptyBlocks = false; 
 
函数CKupdate（）{
 for（CKEDITOR.instances中的实例）{
 CKEDITOR.instances [instance] .updateElement（）; 
} 
} 
}）; 
< / script> 
   $ {summary} 
< / g：if> 
< / ckeditor：editor> 
  

---

如果您直接使用ckeditor 链接然后只需添加类为

 < g：textArea name =fooclass =wysiwyg wizard-ignore> 
  

I am creating a jQuery wizard based form(form is splitted in 5 steps) wizard form, in last two steps I put two ckeditor respectively.My problem is that these two ckeditors are not responding i.e they dont accept any input.I am unable to figure out why this happens.the same ckeditor works fine without form wizard.I think there is conflict between form wizard plugin and ckeditor plugin but dont know what exactly happens there.

Sample project on github Link of grails project.

Edit1:

This is my custom setting:

<div class="form-content">
    <div class="wizard-ignore">
<script type="text/javascript">
<ckeditor:config var="toolbar_Mytoolbar">
[
    [ 'Bold', 'Italic', 'Underline', 'Scayt' ]
]
</ckeditor:config>

delete CKEDITOR.instances['${name}'];
CKEDITOR.config.scayt_autoStartup = true;
CKEDITOR.config.fillEmptyBlocks = false;
function CKupdate() {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
}
<ckeditor:editor name="${name}" height="100px" width="98%" toolbar="Mytoolbar">
<g:if test="${summary}">
    ${summary}
</g:if>
</ckeditor:editor>

</script>
</div>
</div>

When I put some alert(); statement in above script ckeditor works in firefox.unable to find root cause.Any suggestion/idea will be helpful to me.

Edit2: Sample project on github Link of grails project.

解决方案

Jan Sundman answer is absolutily correct just add class wizard-ignore to the editor.

---

You are using grails CKEditor plugin, you can set class as

<script type="text/javascript">
$(function () {
    $("#${name}").addClass('wizard-ignore');

    <ckeditor:config var="toolbar_Mytoolbar">
    [
        [ 'Bold', 'Italic', 'Underline', 'Scayt' ]
    ]
    </ckeditor:config>

    delete CKEDITOR.instances['${name}'];
    CKEDITOR.config.scayt_autoStartup = true;
    CKEDITOR.config.fillEmptyBlocks = false;

    function CKupdate() {
        for (instance in CKEDITOR.instances) {
            CKEDITOR.instances[instance].updateElement();
        }
    }
});
</script>
<ckeditor:editor name="${name}" height="100px" width="98%" toolbar="Mytoolbar">
  <g:if test="${summary}">
    ${summary}
  </g:if>
</ckeditor:editor>

---

and if you use ckeditor directly as described in the link then just add class as

<g:textArea name="foo" class="wysiwyg wizard-ignore">

这篇关于带有jQuery表单向导的Ckeditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！