【问题标题】：Using CKEditor instead of PrimeFaces Editor使用 CKEditor 代替 PrimeFaces 编辑器
【发布时间】：2011-08-24 17:24:05
【问题描述】：

我正在尝试在我的 JSF 应用程序中使用 CKEditor。如何将CKEditor的内容放入backing 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。

【问题讨论】：

我认为这是一个很好的问题，我自己也遇到过这个问题，回复帮助我找到了解决方案 +1

标签： jsf jsf-2 ckeditor primefaces

【解决方案1】：

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

将此添加到您的页面：

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

和 onblur 的编辑器 textarea 将值分配给隐藏元素使用

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

【讨论】：

您好，感谢您的回复。我会试试这个解决方案。

【解决方案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;"/>

【讨论】：

CKFinder可以附加到Primefaces Extension提供的CKEditor吗？
根据cksource.com/ckfinder/demo#ckeditor 的说法，这听起来可能，例如“删除查找器的来源并将其包含在您的页面中”......但我自己没有尝试过......跨度>

【解决方案3】：

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

<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 和 onbeforedomupdate 但它们不起作用。

【讨论】：

【解决方案4】：

试试这个：

<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" />

【讨论】：

【解决方案5】：

另一个选择是使用 JSF 版本的 form 和 textarea。（很可能也可以使用直通元素执行此操作，但我没有尝试过。）

<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 的结构时才会改变。例如。如果您在editor1 周围添加fieldset，这将使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 中的版本。

另见：

【讨论】：