Questions about text (v2), including pictures, custom color fonts, etc. Please help!

[yan_yan]

1. How to select Insert image from dam, I have configured Image but clicking the icon only shows alt and align?
2. How do I disable popup mode? _cq_dialog has been inherited into its own project file, but the changes have no effect. I removed some tags from the paraformat.
3. How do I add font color options and select custom fonts and font sizes?

_cq_editConfig

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root 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"
    cq:inherit="{Boolean}false"
    jcr:primaryType="cq:EditConfig">
    <cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        configPath="inplaceEditingConfig"
        editorType="text">
        <inplaceEditingConfig jcr:primaryType="nt:unstructured">
            <rtePlugins jcr:primaryType="nt:unstructured">
                <links
                    jcr:primaryType="nt:unstructured"
                    features="modifylink,unlink,anchor"/>
                <formats
                    jcr:primaryType="nt:unstructured"
                    features="bold,italic,underline,strikethrough,superscript,subscript"/>
                <paraformat
                    jcr:primaryType="nt:unstructured"
                    features="*">
                    <formats jcr:primaryType="nt:unstructured">
                        <default_p
                            jcr:primaryType="nt:unstructured"
                            description="Paragraph"
                            tag="p"/>
                        <default_h3
                            jcr:primaryType="nt:unstructured"
                            description="Heading 3"
                            tag="h3"/>
                        <default_h6
                            jcr:primaryType="nt:unstructured"
                            description="Heading 6"
                            tag="h6"/>
                    </formats>
                </paraformat>
                <image
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <findreplace
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <subsuperscript
                    jcr:primaryType="nt:unstructured"
                    features="*"/>
                <misctools
                    jcr:primaryType="nt:unstructured"
                    features="sourceedit"/>
                <styles
                    jcr:primaryType="nt:unstructured"
                    externalStyleSheets="[css1]"
                    features="*">
                    <styles jcr:primaryType="cq:WidgetCollection">
                        <subtitle
                            jcr:primaryType="cq:WidgetCollection"
                            cssName="subtitle"
                            text="Subtitle"/>
                        <title
                            jcr:primaryType="cq:WidgetCollection"
                            cssName="title"
                            text="Title"/>
                        <textContent
                            jcr:primaryType="cq:WidgetCollection"
                            cssName="textContent"
                            text="Text Content"/>
                    </styles>
                </styles>
            </rtePlugins>
            <uiSettings jcr:primaryType="nt:unstructured">
                <cui jcr:primaryType="nt:unstructured">
                    <inline
                        jcr:primaryType="nt:unstructured"
                        toolbar="[image#imageProps,format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,fullscreen#start,control#close,control#save]">
                        <popovers jcr:primaryType="nt:unstructured">
                            <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>
        </inplaceEditingConfig>
    </cq:inplaceEditing>
</jcr:root>

 _cq_dialog/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="richTxt"
    sling:resourceType="cq/gui/components/authoring/dialog"
    helpPath="https://www.adobe.com/go/aem_cmp_text_v2"
    trackingFeature="core-components:text:v2">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        granite:class="cq-RichText-FixedColumn-column"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <text
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                name="./text"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <format
                                                        jcr:primaryType="nt:unstructured"
                                                        features="bold,italic"/>
                                                    <justify
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-"/>
                                                    <links
                                                        jcr:primaryType="nt:unstructured"
                                                        features="modifylink,unlink"/>
                                                    <lists
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <misctools jcr:primaryType="nt:unstructured">
                                                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                            <chars jcr:primaryType="nt:unstructured">
                                                                <default_copyright
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;copy;"
                                                                    name="copyright"/>
                                                                <default_euro
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;euro;"
                                                                    name="euro"/>
                                                                <default_registered
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;reg;"
                                                                    name="registered"/>
                                                                <default_trademark
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;trade;"
                                                                    name="trademark"/>
                                                            </chars>
                                                        </specialCharsConfig>
                                                    </misctools>
                                                    <paraformat
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*">
                                                        <formats jcr:primaryType="nt:unstructured">
                                                            <default_p
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Paragraph"
                                                                tag="p"/>
                                                            <default_h3
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 3"
                                                                tag="h3"/>
                                                            <default_h6
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 6"
                                                                tag="h6"/>
                                                        </formats>
                                                    </paraformat>
                                                    <table
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-">
                                                        <hiddenHeaderConfig
                                                            jcr:primaryType="nt:unstructured"
                                                            hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden"
                                                            hiddenHeaderEditingCSS="cq-RichText-hiddenHeader--editing"/>
                                                    </table>
                                                    <tracklinks
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                </rtePlugins>
                                                <uiSettings jcr:primaryType="nt:unstructured">
                                                    <cui jcr:primaryType="nt:unstructured">
                                                        <inline
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
                                                                    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>
                                                        <tableEditOptions
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
                                                    </cui>
                                                </uiSettings>
                                            </text>
                                            <id
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="HTML ID attribute to apply to the component."
                                                fieldLabel="ID"
                                                name="./id"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                    <styletab
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"/>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

[daniel-strmecki]

Hey,

not sure what the problem is in your case, but here is an example that works fine on my project:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format
            jcr:primaryType="nt:unstructured"
            features="bold,italic" />
        <lists
            jcr:primaryType="nt:unstructured"
            features="ordered,unordered,indent,outdent" />
        <links
            jcr:primaryType="nt:unstructured"
            features="modifylink,unlink" />
        <paraformat
            jcr:primaryType="nt:unstructured"
            features="*">
            <formats jcr:primaryType="nt:unstructured">
                <default_p
                    jcr:primaryType="nt:unstructured"
                    description="Paragraph"
                    tag="p" />
                <default_h3
                    jcr:primaryType="nt:unstructured"
                    description="Heading 3"
                    tag="h3" />
                <default_h4
                    jcr:primaryType="nt:unstructured"
                    description="Heading 4"
                    tag="h4" />
                <default_h5
                    jcr:primaryType="nt:unstructured"
                    description="Heading 5"
                    tag="h5" />
                <default_h6
                    jcr:primaryType="nt:unstructured"
                    description="Heading 6"
                    tag="h6" />
                <blockquote
                    jcr:primaryType="nt:unstructured"
                    description="Block Quotation"
                    tag="blockquote" />
                <preamble
                    jcr:primaryType="nt:unstructured"
                    description="Preamble"
                    tag="preamble" />
            </formats>
        </paraformat>
        <image
            jcr:primaryType="nt:unstructured"
            features="*" />
        <table
            jcr:primaryType="nt:unstructured"
            features="*" />
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,lists#ordered,lists#unordered,lists#indent,lists#outdent,image#imageProps,table#createoredit,links#modifylink,links#unlink,#paraformat]">
                <popovers jcr:primaryType="nt:unstructured">
                    <paraformat
                        jcr:primaryType="nt:unstructured"
                        items="paraformat:getFormats:paraformat-pulldown"
                        ref="paraformat" />
                    <lists
                        jcr:primaryType="nt:unstructured"
                        items="[lists#ordered,lists#unordered,lists#indent,lists#outdent]"
                        ref="lists" />
                </popovers>
            </inline>
            <dialogFullScreen
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,lists#ordered,lists#unordered,lists#indent,lists#outdent,image#imageProps,table#createoredit,links#modifylink,links#unlink,#paraformat,misctools#sourceedit]">
                <popovers jcr:primaryType="nt:unstructured">
                    <paraformat
                        jcr:primaryType="nt:unstructured"
                        items="paraformat:getFormats:paraformat-pulldown"
                        ref="paraformat" />
                </popovers>
            </dialogFullScreen>
            <tableEditOptions
                jcr:primaryType="nt:unstructured"
                toolbar="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify,-,table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing]" />
        </cui>
    </uiSettings>
</jcr:root>

Hope it helps,

Daniel

[yan_yan]

Thank you for your answer. Is this _cq_dialog/.content.xml?
Copied these but did not affect dialog.

By the way, how to insert a picture?

[daniel-strmecki]

No, this is just the RTE plugin configuration which you can reference in your dialog.xml. For example:

<text
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    name="./column1/text"
    useFixedInlineToolbar="{Boolean}true">
    <rtePlugins
        jcr:primaryType="nt:unstructured"
        sling:resourceSuperType="/apps/my-project/common/dialog-parts/rte-with-image-table/rtePlugins"/>
</text>

[arunpatidar · Accepted solution]

Hi @yan_yan 
You need to drag image from side panel to RTE

[yan_yan]

Thanks for your reply, it was very useful. In addition, how are the last two of your rich texts implemented?

[kautuk_sahni]

@yan_yan Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[yan_yan]

I have some other questions like how to customize the font color, font scheme etc. Can you help me?

[arunpatidar]

Hi @yan_yan 
You need a custom RTE plugin(Color Picker) to update font color.

https://experience-aem.blogspot.com/2019/04/aem-65-touch-ui-rte-rich-text-editor-dialog-color-picker...

To apply a class then you need something complex solution

https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html