的index.xhtml

Question

我正在尝试在我的JSF应用程序中使用CKEditor。如何将CKEditor的内容转换为支持bean ..？

的index.xhtml

<form action=""  method="post">
            <p>
            My Editor:<br />
                <textarea cols="90" rows="20"  id="editor1" name="editor1" value="#{EditorBean.value}"></textarea>
                <script type="text/javascript">
                        CKEDITOR.replace( 'editor1',
                        {
                            uiColor: '#85B5D9'
                        });
                </script>
                <input type="button" value="Clear" name="clear" onclick="clear1()"/>
            </p>
        </form>

BackingBean

@ManagedBean 公共类EditorBean {

private String value;

public String getValue() {
    return value;
}

public void setValue(String value) {
    this.value = value;
    System.out.println("Content: "+value);
}

}

当我尝试打印该值时，它不打印。在这个问题上帮助我。 PrimeFaces Editor不支持“插入表”功能。所以，我想使用CKE。

Answer 1

因为el无法评估非JSF组件。

将此添加到您的页面：

<h:inputHidden value="#{EditorBean.value}" id="editorValue"/>

编辑器onblur的

和textarea使用

将值分配给隐藏元素

document.getElementById(editorValue).value = this.value;

Answer 2

因为这个问题在某种程度上提升了......

还有另一种选择：

您可以使用PrimeFaces Extensions，这是链接PrimeFaces Extensions CKEditor

这是展示

的一个例子

<p:growl id="growl" showDetail="true" />  
<pe:ckEditor id="editor" value="#{editorController.content}" interfaceColor="#33fc14">  
    <p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/>  
</pe:ckEditor>  

<p:commandButton actionListener="#{editorController.changeColor}" update="editor"  
      value="Change color with AJAX" style="margin-top:10px;"/>

Answer 3

试试这个：

<textarea class="ckeditor" cols="80" id="editor1" rows="10"/>
<h:inputHidden value="#{tskCtrl.selected.dsc}" id="editorValue"/> 
<p:commandButton onclick="document.getElementById('editorValue').value = CKEDITOR.instances.editor1.getData();" action="#{tskCtrl.create()}" value="Post" />

Answer 4

niksvp的答案很有帮助，让我朝着正确的方向前进，但是我发现的问题是模糊处理程序永远不会触发。我不得不复制 textarea中的值到onclick处理程序的inputHidden commandButton：

<textarea id="textareaValue" .../>
<a4j:commandButton execute="editorValue" onclick="document.getElementById('editorValue').value = document.getElementById('textareaValue').value;"

...

或

<a4j:commandButton execute="editorValue" onclick="jQuery('#editorValue').val(jQuery('#textareaValue').val())"

我尝试过使用onbegin＆amp; onbeforedomupdate但他们没有工作。

Answer 5

另一个选择是使用表单和文本区域的JSF版本。（很有可能也可以使用passthrough元素执行此操作，但我没有尝试过。）

<h:form id="form">
  <p>
    My Editor:<br />
    <h:inputTextarea cols="90" rows="20"  id="editor1" value="#{EditorBean.value}" />
    <script type="text/javascript">
      ClassicEditor.create(document.querySelector('form\\:editor1'))
        .then( editor => {
               console.log( editor );
           } )
        .catch( error => {
                console.error( error );
            } );
    </script>
  </p>
</form>

这假设您没有prependId=false。

奇怪的\\:是一个逃避的问题。没有它就行不通。您将在控制台中收到“是无效的选择器”错误。

您可以使用其他名称来标识form和editor1，但是还需要更改选择器。您不希望将其保留为默认值，因为它们很脆弱，经常在更新页面时更改。现在，仅当您更改editor1相对于form的结构时，它才会更改。例如。如果在fieldset周围添加editor1，则ID类似于form\\:fieldset\\:editor1，其中fieldset是JSF中指定的fieldset的ID。 JSF将为您创建长版本。

这还需要将CKEditor脚本添加到头部，例如：

  <script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>

此特定示例适用于ClassicEditor版本。如果要使用其他版本，则需要更改脚本和显示ClassicEditor的部分。

问题中调用的脚本与此版本之间的差异可能是问题较旧时这是当前版本（如我所写）。

或者，您可能更喜欢使用h:outputScript。但是，然后您可能需要将脚本托管在资源文件夹中，而不是使用CDN中的版本。

另请参阅：

使用CKEditor而不是PrimeFaces Editor

的index.xhtml

BackingBean

5 个答案: