将富文本字段添加到 Touch UI 对话框 - AEM 6.2

Question

我正在设置一个包含以下字段的对话框 - 1.接受图像作为输入的字段 2.接受标题的字段 3. 接受富文本的字段。

请注意，我不想启用就地编辑。我只想在我的对话框中添加一个富文本字段（启用所有功能）并在我的组件中使用在此字段中输入的数据。

我能够实现 1. 和 2. 但不知道如何实现 3.

这是我的代码 -

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Section Container"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <Styling
                jcr:primaryType="nt:unstructured"
                jcr:title="Styling"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <question_single
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldDescription="Please enter the Question"
                                fieldLabel="Question for Single"
                                name="./question_single"/>
                            <question_couple
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldDescription="Please enter the Question"
                                fieldLabel="Question for Couple Applicants"
                                name="./question_couple"/>
                            <page_header
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldDescription="Please enter page header"
                                fieldLabel="Page Header"
                                name="./page_header"/>
                        </items>
                    </column>
                </items>
            </Styling>
            <image
                jcr:primaryType="nt:unstructured"
                jcr:title="Image Properties"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                    margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <file
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/fileupload"
                                autoStart="{Boolean}false"
                                class="cq-droptarget"
                                fieldLabel="Image asset"
                                fileNameParameter="./image/fileName"
                                fileReferenceParameter="./image/fileReference"
                                mimeTypes="[image]"
                                multiple="{Boolean}false"
                                name="./image/file"
                                title="Upload Image Asset"
                                uploadUrl="${suffix.path}"
                                useHTML5="{Boolean}true"/>
                            <title
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldLabel="Title"
                                name="./image/jcr:title"/>

                        </items>
                    </column>
                </items>
            </image>
        </items>
    </content>
</jcr:root>

请忽略第一个选项卡中的字段。富文本字段需要添加到第二个选项卡。

请帮忙！提前致谢！

Answer 1

Adobe 建议使用 InPlaceEditing/Full 屏幕编辑来使用富文本字段，而不是在对话框中添加字段，因为 In-place/Full-screen 编辑涵盖了完整的功能。

Click Here for the reference from Adobe Docs.

However, if you really wish to use the RTE field inside your dialog, you can make use of the sling:resourceType="cq/gui/components/authoring/dialog/richtext" property to do the same.

见下面的示例代码（该代码引用了touchUI对话框中的一个richtext字段，只需将这段代码放在你的touchUI对话框xml的相关位置使对话框工作的地方）。

<description
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    name="./rteTextPropertyName"
    useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <subsuperscript
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <format
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <justify
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <spellcheck
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <misctools
            jcr:primaryType="nt:unstructured"
            features="[specialchars]">
            <specialCharsConfig jcr:primaryType="nt:unstructured">
                <chars jcr:primaryType="nt:unstructured">
                    <copyright
                        jcr:primaryType="nt:unstructured"
                        entity="&amp;#169;"/>
                    <trademark
                        jcr:primaryType="nt:unstructured"
                        entity="&amp;#8482;"/>
                    <registered
                        jcr:primaryType="nt:unstructured"
                        entity="&amp;#174;"/>
                    <emDash
                        jcr:primaryType="nt:unstructured"
                        entity="&amp;#8212;"/>
                    <pound
                        jcr:primaryType="nt:unstructured"
                        entity="&amp;#163;"/>
                    <nbsp
                        jcr:primaryType="nt:unstructured"
                        entity="&amp;#160;"/>
                </chars>
            </specialCharsConfig>
        </misctools>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,#paraformat,image#imageProps,#justify,#lists,links#modifylink,links#unlink,findreplace#find,findreplace#replace,subsuperscript#subscript,subsuperscript#superscript,spellcheck#checktext,misctools#specialchars]">
                <popovers jcr:primaryType="nt:unstructured">
                    <justify
                        jcr:primaryType="nt:unstructured"
                        items="[justify#justifyleft]"
                        ref="justify"/>
                    <lists
                        jcr:primaryType="nt:unstructured"
                        items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                        ref="lists"/>
                    <paraformat
                        jcr:primaryType="nt:unstructured"
                        items="paraformat:getFormats:paraformat-pulldown"
                        ref="paraformat"/>
                </popovers>
            </inline>
        </cui>
    </uiSettings>
</description>

P.S.: 我只添加了几个 RTE 插件，记住示例代码的长度。您可以根据需要添加其他插件。

Make sure to provide the correct context if reading the property in sightly (in here html), see below:

${properties.rteTextPropertyName @context = 'html'}

将富文本字段添加到 Touch UI 对话框 - AEM 6.2

Add richtext field to a Touch UI Dialog - AEM 6.2

aem

${properties.rteTextPropertyName @context = 'html'}