Question

我正在使用primefaces 6.1，我正在尝试使用primefaces文本编辑器组件。我在primefaces showcase上使用文本编辑器的示例代码。

以下是 index.xhtml

的代码

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:p="http://primefaces.org/ui"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
    <title>Text Editor</title>
</h:head>
<h:body>
    <h:form>    
        <h3 style="margin-top:0">Basic</h3>
        <p:textEditor widgetVar="editor1" value="#{editorView.text}" height="300" style="margin-bottom:10px"/>

        <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-disk" />
        <p:commandButton value="Clear" type="button" onclick="PF('editor1').clear();" icon="ui-icon-close" />

        <h3 class="first">Custom Toolbar</h3>
        <p:textEditor widgetVar="editor2" value="#{editorView.text2}" height="300" style="margin-bottom:10px" placeholder="Enter your content">
            <f:facet name="toolbar">
                <span class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-font"></select>
                    <select class="ql-size"></select>
                </span>
            </f:facet>
        </p:textEditor>

        <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-disk" />
        <p:commandButton value="Clear" type="button" onclick="PF('editor2').clear();" icon="ui-icon-close" />

        <p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade">
            <p:outputPanel id="display">
                <h3 style="margin-top:0">Basic</h3>
                <h:outputText value="#{editorView.text}" escape="false" />

                <h3>Custom</h3>
                <h:outputText value="#{editorView.text2}" escape="false" />
            </p:outputPanel>
        </p:dialog>     
    </h:form>
</h:body>

控制器的代码是showcase的代码，但是在默认包中。

这是运行代码后界面的屏幕截图。

如何解决此问题？

Answer 1

您的代码工作正常。但是，只是为了显示它显示正常，我以这样的方式简化它，你可以避免使用ManagedBean。在现实世界中，你确实需要它：

 <h:form>    
        <h3 style="margin-top:0">Basic</h3>
        <p:textEditor widgetVar="editor1" value="TEXT1" height="300" style="margin-bottom:10px"/>

        <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-disk" />
        <p:commandButton value="Clear" type="button" onclick="PF('editor1').clear();" icon="ui-icon-close" />

        <h3 class="first">Custom Toolbar</h3>
        <p:textEditor widgetVar="editor2" value="TEXT2" height="300" style="margin-bottom:10px" placeholder="Enter your content">
            <f:facet name="toolbar">
                <span class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-font"></select>
                    <select class="ql-size"></select>
                </span>
            </f:facet>
        </p:textEditor>

        <p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-disk" />
        <p:commandButton value="Clear" type="button" onclick="PF('editor2').clear();" icon="ui-icon-close" />

        <p:dialog header="Content" widgetVar="dlg" showEffect="fade" hideEffect="fade">
            <p:outputPanel id="display">
                <h3 style="margin-top:0">Basic</h3>
                <h:outputText value="TEXT3" escape="false" />

                <h3>Custom</h3>
                <h:outputText value="TEXT4" escape="false" />
            </p:outputPanel>
        </p:dialog>     
    </h:form>

我建议你：

检查 Primefaces 是否真正升级到6.1版本＆amp;你没有同时使用两个版本的 Primefaces
清除您的Web浏览器缓存（或更改您的WebBrowser）
清除您的项目＆amp;重建它（如果您使用 Maven ，则使用依赖关系）

p：textEditor显示不佳

1 个答案: