使用 CKEditor 代替 PrimeFaces Editor
我正在尝试在我的 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 public class 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。
I am trying to use CKEditor in my JSF application. How to get the content of CKEditor into 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
public class EditorBean {
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
System.out.println("Content: "+value);
}
}
When I tried to print the value, It is not printing. Help me on this issue. PrimeFaces Editor is not supporting "Insert Table" function. So, I want to use CKE.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
因为 el 无法评估非 JSF 组件。
将其添加到您的页面：
编辑器
textarea的onblur使用以下命令将值分配给隐藏元素As el wont be able to evaluate non-JSF component.
Add this to your page :
and
onblurof editortextareaassign the value to the hidden element using由于这个问题以某种方式出现......
还有另一种选择：
您可以使用PrimeFaces Extensions< /a> ，这里是链接 PrimeFaces扩展 CKEditor
这是展示中的示例
Since this question bumped up somehow....
There is another option:
You can use the PrimeFaces Extensions , here is the link PrimeFaces Extensions CKEditor
Here an example from the showcase
试试这个：
try this:
niksvp 的答案很有帮助，并为我指明了正确的方向，但是
我发现的问题是模糊处理程序永远不会触发。我不得不复制
onclick 处理程序中从 textarea 到 inputHidden 的值
commandButton:
...
或者
我尝试使用 onbegin & onbeforedomupdate 但他们没有工作。
The answer from niksvp was helpful and set me in the right direction, but
the problem I found was that the blur handler never fires. I had to copy
the value from the textarea to the inputHidden on the onclick handler of
the commandButton:
...
or
I tried using onbegin & onbeforedomupdate but they didn't work.
另一种选择是使用 JSF 版本的 form 和 textarea。 （也可以使用直通元素执行此操作，但我没有尝试过。）
这假设您没有
prependId=false。奇怪的
\\:是一个转义问题。没有它就行不通。您会在控制台中收到“是无效选择器”错误。您可以使用其他名称来 ID
form和editor1，但您还需要更改选择器。您不想将其保留为默认值，因为这些默认值很脆弱，并且经常在您更新页面时发生变化。现在，只有当您更改editor1相对于form的结构时，它才会发生变化。例如，如果您在editor1周围添加一个fieldset，这将使 ID 类似于form\\:fieldset\\:editor1，其中fieldset是 JSF 中指定的fieldset的 ID。 JSF 将为您创建长版本。这还需要将 CKEditor 脚本添加到头部，例如：
此特定示例适用于
ClassicEditor版本。如果您想要不同的版本，则需要更改脚本和显示ClassicEditor的部分。问题中调用的脚本与此版本之间的差异可能是这是当前版本（正如我写的），而问题较旧。
或者，您可能更喜欢使用
h:outputScript。但是，您可能需要将脚本托管在资源文件夹中，而不是使用 CDN 中的版本。另请参阅：
Another option is to use the JSF versions of form and textarea. (It is likely possible to do this with passthrough elements as well, but I didn't try that.)
This assumes that you do not have
prependId=false.The weird
\\:is an escaping issue. It won't work without that. You'd get the "is an invalid selector" error in the console.You can ID
formandeditor1with other names, but you'll need to change the selector as well. You don't want to leave it to the defaults, as those are fragile, often changing as you update the page. Now it will only change if you change the structure of whereeditor1is relative toform. E.g. if you add afieldsetaroundeditor1, that would make the ID something likeform\\:fieldset\\:editor1, wherefieldsetis the ID of thefieldsetas specified in JSF. JSF will create the long version for you.This also requires the CKEditor script to be added to the head, e.g.:
This particular example is for the
ClassicEditorversion. If you want a different version, you'd need to change the script and the part that saysClassicEditor.Differences between the script as called in the question and this version may be that this is the current version (as I write this) while the question is older.
Alternately, you might prefer to use
h:outputScript. But then you might need to host the script in your resources folder rather than using the version from the CDN.See also: