Solved

How add image option in Rich Text Editor

Forum|Forum|2 years ago
July 17, 2023
3 replies
2085 views

I want to add image upload option on text component. I am adding two propeties for show image upload option in rtePlugin but it's not worked

<image
       jcr:primaryType="nt:unstructured"
       features="*"/>

Here down is my full codel of context.xml which is located under cq:dilog of text component

<?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"
	xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
	xmlns:cq="http://www.day.com/jcr/cq/1.0"
	xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Text"
    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="*"/>
													<justify
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
													<links
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
													<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_h1
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 1"
                                                                tag="h1"/>
															<default_h2
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 2"
                                                                tag="h2"/>
															<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"/>
															<default_blockquote
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Quote"
                                                                tag="blockquote"/>
															<default_pre
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Preformatted"
                                                                tag="pre"/>
														</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="*"/>
													<image
                                                        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>
														<dialogFullScreen
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat,#image,subsuperscript#subscript,subsuperscript#superscript,findreplace#find,findreplace#replace,misctools#sourceedit]">
															<popovers jcr:primaryType="nt:unstructured">
																<paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
																<justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                    ref="justify"/>
																<lists
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                    ref="lists"/>
															</popovers>
														</dialogFullScreen>
														<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"
                                                validation="html-unique-id-validator"/>
										</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>

Best answer by Sady_Rifat

Hello @faeemazaz92 ,

2 things I will suggest to resolve it, instead of #image use image#imageProps.

Make sure you have the component policy on page template,

You can also default-check this value from component design dialog

<?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">
    <content
        jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <plugins
                        jcr:primaryType="nt:unstructured">
                        <items jcr:primaryType="nt:unstructured">
                            <Features
                                jcr:primaryType="nt:unstructured">
                                <items jcr:primaryType="nt:unstructured">
                                    <fixedcol
                                        jcr:primaryType="nt:unstructured">
                                        <items jcr:primaryType="nt:unstructured">
                                            <col1
                                                jcr:primaryType="nt:unstructured">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <image
                                                        jcr:primaryType="nt:unstructured">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <image
                                                                jcr:primaryType="nt:unstructured"
                                                                defaultEnabled="{Boolean}true"/>
                                                        </items>
                                                    </image>
                                                </items>
                                            </col1>
                                        </items>
                                    </fixedcol>
                                </items>
                            </Features>
                        </items>
                    </plugins>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

ayush-anand

Level 4

@faeemazaz92 You can't add an image using the image plugin, you have to drag the image from the asset selector. The plugin can be used to only add alt text and image alignment. Also, in the dialogFullScreen node, use image#imageProps instead of #image.

Hope this helps.

Regards,

Ayush

Sady_Rifat

Accepted solution

Community Advisor

Hello @faeemazaz92 ,

2 things I will suggest to resolve it, instead of #image use image#imageProps.

Make sure you have the component policy on page template,

You can also default-check this value from component design dialog

<?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">
    <content
        jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <plugins
                        jcr:primaryType="nt:unstructured">
                        <items jcr:primaryType="nt:unstructured">
                            <Features
                                jcr:primaryType="nt:unstructured">
                                <items jcr:primaryType="nt:unstructured">
                                    <fixedcol
                                        jcr:primaryType="nt:unstructured">
                                        <items jcr:primaryType="nt:unstructured">
                                            <col1
                                                jcr:primaryType="nt:unstructured">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <image
                                                        jcr:primaryType="nt:unstructured">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <image
                                                                jcr:primaryType="nt:unstructured"
                                                                defaultEnabled="{Boolean}true"/>
                                                        </items>
                                                    </image>
                                                </items>
                                            </col1>
                                        </items>
                                    </fixedcol>
                                </items>
                            </Features>
                        </items>
                    </plugins>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>