使用 CKEditor 代替 PrimeFaces Editor

发布于 2024-11-07 03:46:04 字数 1079 浏览 0 评论 0原文

我正在尝试在我的 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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤城病女 2024-11-14 03:46:04

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

将其添加到您的页面：

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

编辑器 textarea 的 onblur 使用以下命令将值分配给隐藏元素

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

As el wont be able to evaluate non-JSF component.

Add this to your page :

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

and onblur of editor textarea assign the value to the hidden element using

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

回复收藏 0 原文

┾廆蒐ゝ 2024-11-14 03:46:04

由于这个问题以某种方式出现......

还有另一种选择：

您可以使用PrimeFaces Extensions< /a> ，这里是链接 PrimeFaces扩展 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;"/>

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

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

回复收藏 0 原文

还给你自由 2024-11-14 03:46:04

试试这个：

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

try this:

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

回复收藏 0 原文

ㄖ落Θ余辉 2024-11-14 03:46:04

niksvp 的答案很有帮助，并为我指明了正确的方向，但是
我发现的问题是模糊处理程序永远不会触发。我不得不复制
onclick 处理程序中从 textarea 到 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 & 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:

<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())"

I tried using onbegin & onbeforedomupdate but they didn't work.

回复收藏 0 原文

谁对谁错谁最难过 2024-11-14 03:46:04

另一种选择是使用 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。

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

您可以使用其他名称来 ID 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 中的版本。

另请参阅：

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.)

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

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 form and editor1 with 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 where editor1 is relative to form. E.g. if you add a fieldset around editor1, that would make the ID something like form\\:fieldset\\:editor1, where fieldset is the ID of the fieldset as 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.:

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

This particular example is for the ClassicEditor version. If you want a different version, you'd need to change the script and the part that says ClassicEditor.

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.