我试图在我的JSF应用程序中使用CKEditor。如何将CKEditor的内容转换为支持bean ..？
<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>
@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。
因为el无法评估非JSF组件。
将其添加到您的页面：
<h:inputHidden value="#{EditorBean.value}" id="editorValue"/>
编辑器onblur的textarea将值赋值给隐藏元素
document.getElementById(editorValue).value = this.value;
因为这个问题不知何故......
还有另一种选择：
你可以使用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;"/>
试试这个：
<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" />
来自niksvp的回答是有帮助的并且让我朝着正确的方向前进，但我发现的问题是模糊处理程序永远不会触发。我必须将textarea中的值复制到commandButton的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但它们没有用。
另一种选择是使用form和textarea的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中的版本。
也可以看看：