Forum Stats

  • 3,872,849 Users
  • 2,266,483 Discussions
  • 7,911,346 Comments

Discussions

How to customize the Rich Text Editor task flow in the doc lib?

1000069
1000069 Member Posts: 4
edited Oct 20, 2013 2:10PM in WebCenter Portal

Dear Experts in WCP forum,

You know that webcenter portal has a feature is called customizing task flow.. so we have client request to customize the Rich Text Editor task flow of the Document library. Such as disable the Format, Font, Size drop down menu of the richtext editor UI.   But after I open the editHTML.jsff of the oracle.webcenter.doclib. the code is like this:

                    <f:facet name="richtext">

                           <af:panelGroupLayout layout="scroll" id="rtepng2">

                              <rte:editor id="rte" value="#{pageFlowScope.rte.HTMLTextArea}" converter="#{pageFlowScope.rte.HTMLConverter}"/>

                              <!-- keep region wrapped in the facet to be stretched-->

                              <af:region value="#{bindings.linksResourcePicker.regionModel}" id="lpr"/>

                           </af:panelGroupLayout>

                        </f:facet>

So likes that editor in fact is from <rte:editor tag.. my question is how to dig into this <rte:editor  to find its jsff code?  And change the menu inside to do the cusomization for them?

Is that possible?

A million thanks here in advance!

wayne

Tagged:

Answers

  • amr.gawish
    amr.gawish Member Posts: 122
    edited Oct 19, 2013 1:21PM

    Based on the Tag TLD reference the editor tag has the following attributes:

    <tag>
        <description>An ADF Wrapper to use the CKeditor&gt;</description>
        <name>editor</name>
        <tag-class>oracle.webcenter.doclib.rte.internal.taglib.RteEditorTag</tag-class>
        <body-content>JSP</body-content>
        <attribute>
          <description>&lt;html&gt;the identifier for the component.  The identifier
    must follow a subset of the syntax allowed in HTML:
    &lt;ul&gt;
    &lt;li&gt;Must not be a zero-length String.&lt;/li&gt;
    &lt;li&gt;First character must be an ASCII letter (A-Za-z) or an underscore ('_').&lt;/li&gt;
    &lt;li&gt;Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').&lt;/li&gt;
    &lt;/ul&gt;&lt;/html&gt;</description>
          <name>id</name>
          <rtexprvalue>false</rtexprvalue>
        </attribute>
        <attribute>
          <description>The initial value of this component.</description>
          <name>value</name>
          <required>false</required>
          <rtexprvalue>false</rtexprvalue>
          <deferred-value>
            <type>java.lang.String</type>
          </deferred-value>
        </attribute>
        <attribute>
          <description>a converter object</description>
          <name>converter</name>
          <deferred-value>
            <type>javax.faces.convert.Converter</type>
          </deferred-value>
        </attribute>
        <attribute>
          <description>
            this is a pass through to get/set the CKEditor ToolbarSet property
          </description>
          <name>toolbarSet</name>
          <required>false</required>
          <rtexprvalue>false</rtexprvalue>
          <deferred-value>
            <type>java.lang.String</type>
          </deferred-value>
        </attribute>
        <attribute>
          <description>
            this is a pass through to get/set the CKEditor height property
          </description>
          <name>height</name>
          <required>false</required>
          <rtexprvalue>false</rtexprvalue>
          <deferred-value>
            <type>java.lang.String</type>
          </deferred-value>
        </attribute>
        <attribute>
          <description>
            this is a pass through to get/set the CKEditor width property
          </description>
          <name>width</name>
          <required>false</required>
          <rtexprvalue>false</rtexprvalue>
          <deferred-value>
            <type>java.lang.String</type>
          </deferred-value>
        </attribute>
      </tag>
    
    
    
    

    Which means that if you want to change the toolbar you have to check what is the type of toolbars the CKEditor uses, I can tell you that there are two defaults: Basic and Full and I believe the tag uses a custom toolbar called WC by default.

    So if you want to change the toolbar to only show basic, change the toolbarSet property to Basic to make the final result looks like <rte:editor id="rte" value="#{pageFlowScope.rte.HTMLTextArea}" converter="#{pageFlowScope.rte.HTMLConverter}" toolbarSet="Basic" />

    This is not tested, this is only a few insights I got reading about CKEditor

    amr.gawish
  • 1000069
    1000069 Member Posts: 4
    edited Oct 20, 2013 2:00PM

    Hi Amr,

    Thank you so much for your suggest, at lease give some hints to look for..  from the code level, rte tag in fact wrap the CK editor , then ADF TS can use that.. I can take a look how CK editor works first.   When i set toolbarSet="Basic": i get error like this:

    /mdssys/site/site/mdssys/oracle/webcenter/doclib/view/jsf/taskflows/richTextEditor/editHTML.jsff: Line # 48, <rte:editor converter="#{pageFlowScope.rte.HTMLConverter}" id="rte" toolbarSet="Basic" value="#{pageFlowScope.rte.HTMLTextArea}" xmlns:rte="http://xmlns.oracle.com/webcenter/services/doclib/rte"/>

    Error: toolbarSet is not a property of oracle.webcenter.doclib.rte.internal.taglib.RteEditorTag.

    So  as we do not know is there any oracle doc can illustrate how webcenter to wrap the CK editor and use it? ,, and by what way developer has the ability to change the code (JS etc.)or config for the CKeditor source to make the CK editor internal can be customized or add some new feature/buttons inside it .

    But I think your "toolbarSet" setting suggest can help in some extent.

    Wayne

  • amr.gawish
    amr.gawish Member Posts: 122

    I kind of expected this since I didn't see any reference talking about this toolbarSet anywhere.

    The only solution you have now is through javascript, to get the CMKEditor config object through javascript and set config.toolbar="Basic" like it was described in this article. However it might not be an easy task to do!

This discussion has been closed.