1. дома
  2. Вопрос и ответ
  3. AEM 6.1: Включить Rich текстовый редактор (RTE) плагинов на сенсорный пользовательский интерфейс

AEM 6.1: Включить Rich текстовый редактор (RTE) плагинов на сенсорный пользовательский интерфейс

2015-12-16 2 views
4

для классического интерфейса можно легко добавить плагины внутри rteplugins тега, Adobe построил большой пример их Geometrix-Открытый проект:AEM 6.1: Включить Rich текстовый редактор (RTE) плагинов на сенсорный пользовательский интерфейс

 <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>

Однако мы не можем применить то же самое на окружающей среде сенсорного пользовательского интерфейса, они также сделали пример на Geometrix-Outdoor, но плагины не отображаются полностью функциональны:

      <summary 
           jcr:primaryType="nt:unstructured" 
           sling:resourceType="cq/gui/components/authoring/dialog/richtext" 
           fieldLabel="Summary" 
           name="./summary" 
           renderReadOnly="{Boolean}true"/>

есть в любом случае, чтобы сделать плагин на дисплее TouchUi, как Классический интерфейс?

источник

2015-12-16 Tien Nguyen

ответ

8

Это образец dialog.xml (вам нужно как диалог и _cq_dialog для RTE в AEM6.1)

<?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>

Это является примером _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>

Пример text.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>

и 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;

});

и, наконец, ваш 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"/>

источник

2016-03-17 23:43:57

0

см здесь документации https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/rich-text-editor.html

есть также рабочий пример здесь CQ rich text field editor enable bold, italic and underline styles, plus bullet and numbered lists only

источник

2016-02-16 04:19:06

+0

Вы должны содержать более подробную информацию на ваш ответ, поскольку эти адреса могут быть истек позже – FlySoFast

+0

@FlySoFast, это ссылки на официальную документацию самана и к уже ответил вопросом на stackoverflow ... вряд ли они истекут –

+0

@MarkHorman Пример для использования в классическом интерфейсе на AEM 5.6, я задаю вопрос о сенсорном интерфейсе на AEM 6.1 –

 Смежные вопросы

  • Нет связанных вопросов^_^