java AEM 6.1：在 Touch UI 上启用富文本编辑器 (RTE) 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34309445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-11-02 22:43:50 来源:igfitidea点击:
AEM 6.1: Enable Rich text editor (RTE) plugins on Touch UI
提问by Tien Nguyen
for classic UI we can easily add the plugins inside rteplugins tag, Adobe built a great example on their Geometrix-Outdoor project:
对于经典 UI，我们可以轻松地在 rteplugins 标签中添加插件，Adobe 在他们的 Geometrix-Outdoor 项目中构建了一个很好的示例：
<summary
jcr:primaryType="cq:Widget"
fieldLabel="Summary"
name="./summary"
xtype="richtext">
<rtePlugins jcr:primaryType="nt:unstructured">
<table
jcr:primaryType="nt:unstructured"
features="*"/>
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<edit
jcr:primaryType="nt:unstructured"
features="[paste-wordhtml]"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*"/>
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<misctools
jcr:primaryType="nt:unstructured"
features="*"/>
<links
jcr:primaryType="nt:unstructured"
features="*"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"
invalidStyle="background-color: #ffdddd;"/>
<undo
jcr:primaryType="nt:unstructured"
features="*"/>
<image
jcr:primaryType="nt:unstructured"
features="*"/>
</rtePlugins>
</summary>
However we can't apply the same thing on Touch UI environment, they also did an example on Geometrix-Outdoor, but the plugins do not display fully functional:
但是我们不能在 Touch UI 环境中应用同样的东西，他们也在 Geometrix-Outdoor 上做了一个例子，但是插件没有显示完整的功能：
<summary
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="Summary"
name="./summary"
renderReadOnly="{Boolean}true"/>
Is there anyway to make the plugins on TouchUi display as Classic UI ?
有没有办法让 TouchUi 上的插件显示为经典 UI？
回答by Mark Horman
This is a sample dialog.xml (you need both dialog and _cq_dialog for RTE in AEM6.1)
这是一个示例 dialog.xml（AEM6.1 中的 RTE 需要 dialog 和 _cq_dialog）
<?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"
jcr:primaryType="cq:Dialog"
helpPath="en/cq/current/wcm/default_components.html#Text"
title="Text"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1
jcr:primaryType="cq:Widget"
anchor="100%"
title="Text"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<text
jcr:primaryType="cq:Widget"
hideLabel="{Boolean}true"
name="./text"
useFixedInlineToolbar="{Boolean}true"
xtype="richtext">
<rtePlugins jcr:primaryType="nt:unstructured">
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*">
<formats jcr:primaryType="cq:WidgetCollection">
<p
jcr:primaryType="nt:unstructured"
description="Paragraph"
tag="p"/>
<h2
jcr:primaryType="nt:unstructured"
description="Header 2"
tag="h2"/>
<h3
jcr:primaryType="nt:unstructured"
description="Header 3"
tag="h3"/>
<h4
jcr:primaryType="nt:unstructured"
description="Header 4"
tag="h4"/>
</formats>
</paraformat>
<misctools
jcr:primaryType="nt:unstructured"
features="specialchars">
<specialCharsConfig jcr:primaryType="nt:unstructured">
<chars jcr:primaryType="nt:unstructured">
<copyright
jcr:primaryType="nt:unstructured"
entity="?"/>
<trademark
jcr:primaryType="nt:unstructured"
entity="?"/>
<registered
jcr:primaryType="nt:unstructured"
entity="?"/>
<emDash
jcr:primaryType="nt:unstructured"
entity="—"/>
<pound
jcr:primaryType="nt:unstructured"
entity="￡"/>
<nbsp
jcr:primaryType="nt:unstructured"
entity=" "/>
</chars>
</specialCharsConfig>
</misctools>
<links jcr:primaryType="nt:unstructured">
<linkDialogConfig
jcr:primaryType="nt:unstructured"
height="{Long}316">
<linkAttributes jcr:primaryType="cq:WidgetCollection">
<linkAdvanced
jcr:primaryType="cq:Widget"
collapsed="{Boolean}true"
collapsible="{Boolean}true"
inputValue="advanced"
name="./linkdialog/cq:adhocLinkTrackingTab"
title="Link tracking"
xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<enable
jcr:primaryType="nt:unstructured"
attribute="enabletracking"
fieldDescription="override analytics framework settings"
fieldLabel="Custom link tracking"
name="./linkdialog/cq:adhocLinkTrackingEnableTracking"
xtype="checkbox">
<listeners
jcr:primaryType="nt:unstructured"
check="function(component){var dlg=component.findParentByType('rtelinkdialog');dlg.enableSCFields(component.checked);}"/>
</enable>
<events
jcr:primaryType="nt:unstructured"
attribute="adhocevents"
fieldDescription="e.g.: event2, event7"
fieldLabel="Include SiteCatalyst events"
name="./linkdialog/cq:adhocLinkTrackingEvents"
xtype="textfield"/>
<evars
jcr:primaryType="nt:unstructured"
attribute="adhocevars"
fieldDescription="e.g.: eVar1: pagedata.url, prop4: 'const'"
fieldLabel="Include SiteCatalyst variables"
name="./linkdialog/cq:adhocLinkTrackingEvars"
xtype="textfield"/>
</items>
</linkAdvanced>
</linkAttributes>
</linkDialogConfig>
</links>
<edit
jcr:primaryType="nt:unstructured"
defaultPasteMode="plaintext"
features="[cut,copy,paste-plaintext]"
stripHtmlTags="{Boolean}true"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<undo
jcr:primaryType="nt:unstructured"
features="*"/>
<format
jcr:primaryType="nt:unstructured"
features="[bold,italic]"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<styles
jcr:primaryType="nt:unstructured"
features="*">
<styles jcr:primaryType="cq:WidgetCollection">
<disclaimer
jcr:primaryType="nt:unstructured"
cssName="wysiwyg--disclaimer"
text="Disclaimer"/>
<quote
jcr:primaryType="nt:unstructured"
cssName="pull-quote component"
text="Quote"/>
</styles>
</styles>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[links#modifylink,links#unlink,format#bold,format#italic,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,fullscreen#start,control#close,control#save]"/>
<fullscreen
jcr:primaryType="nt:unstructured"
toolbar="[links#modifylink,links#unlink,links#anchor,format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,edit#cut,edit#copy,edit#paste-plaintext,findreplace#find,findreplace#replace,undo#undo,undo#redo,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,spellcheck#checktext,misctools#specialchars,#styles,#paraformat,fullscreen#start,control#close,control#save]">
<popovers jcr:primaryType="nt:unstructured">
<styles
jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
</popovers>
</fullscreen>
</cui>
</uiSettings>
</text>
<isRichTextFlag
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./textIsRich"
value="true"
xtype="hidden"/>
</items>
</tab1>
</items>
This is an example of _cq_dialog
这是 _cq_dialog 的一个例子
<?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="Configure rich text component"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="en/cq/current/wcm/default_components.html#Text">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textarea"
cols="{Long}2"
disabled="{Boolean}true"
fieldLabel="Body text"
name="./text"
rows="{Long}10"/>
</items>
</column>
</items>
</content>
example text.html
示例文本.html
<div data-sly-test="${(wcmmode.edit || wcmInit.isTouchAuthoring) && (!properties.text)}">
<div>Please edit this component.</div>
<sub>This text will only appear in Authoring Mode</sub>
</div>
<div data-sly-test="${properties.text}" data-sly-unwrap>
<p data-sly-use.text="text.js" data-sly-unwrap="${text.context == text.CONST.CONTEXT_HTML}" class="${text.cssClass}" data-emptytext="Rich Text">${text.text @ context=text.context}</p>
</div>
and test.js
和 test.js
"use strict";
/**
* Text foundation component JS backing script
*/
use(["/apps/global/components/utils/AuthoringUtils.js"], function (AuthoringUtils) {
var CONST = {
PROP_TEXT: "text",
PROP_RICH_FORMAT: "textIsRich",
CONTEXT_TEXT: "text",
CONTEXT_HTML: "html"
};
var text = {};
// The actual text content
text.text = granite.resource.properties[CONST.PROP_TEXT]
|| "";
// Wether the text contains HTML or not
text.context = granite.resource.properties[CONST.PROP_RICH_FORMAT]
? CONST.CONTEXT_HTML : CONST.CONTEXT_TEXT
// Set up placeholder if empty
if (!text.text) {
text.cssClass = AuthoringUtils.isTouch
? "cq-placeholder"
: "cq-text-placeholder-ipe";
text.context = CONST.CONTEXT_TEXT;
// only dysplay placeholder in edit mode
if (typeof wcmmode != "undefined" && wcmmode.isEdit()) {
text.text = AuthoringUtils.isTouch
? ""
: "Edit text";
} else {
text.text = "";
}
}
// Adding the constants to the exposed API
text.CONST = CONST;
return text;
});
});
and lastly your editConfig
最后是你的 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"
jcr:primaryType="cq:EditConfig">
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
configPath="../../dialog/items/tab1/items/text"
editorType="text"/>
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"/>
回答by Mark Horman
refer here for documentation https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/rich-text-editor.html
请参阅此处获取文档https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/rich-text-editor.html
there's also a working example here CQ rich text field editor enable bold, italic and underline styles, plus bullet and numbered lists only
这里还有一个工作示例CQ 富文本字段编辑器启用粗体、斜体和下划线样式，仅加上项目符号和编号列表
