Rich Text Editor: Conversion from ASPX to HTML and TypeScript

The information in the following tables will help you to convert the ASPX elements that are related to a rich text editor to HTML or TypeScript elements.

AutoSize

The following table shows the correspondence between the AutoSize element and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.

ASPX HTML or TypeScript
AutoSize
<px:PXRichTextEdit ...>
  <AutoSize 
    Enabled="True" 
    MinHeight="216"/>
</px:PXRichTextEdit>
 Use the properties in the config attribute of the qp-rich-text-editor control.
<qp-rich-text-editor 
  id="edBody"
  state.bind="ItemSettings.Body"
  class="stretch">
</qp-rich-text-editor>
Enabled
<px:PXRichTextEdit ...>
  <AutoSize 
    Enabled="True">
</px:PXRichTextEdit>
 Use the expandToContent property in the config attribute of the qp-rich-text-editor control.
<qp-rich-text-editor 
  config.bind="{expandToContent: true}">
</qp-rich-text-editor>
MinHeight
<px:PXRichTextEdit ...>
  <AutoSize  
    MinHeight="216"/>
</px:PXRichTextEdit>
 Use the expandToContentMinHeight property in the config attribute of the qp-rich-text-editor control.
<qp-rich-text-editor 
  config.bind=
    "{expandToContentMinHeight: 216}">
</qp-rich-text-editor>

PXRichTextEdit

The following table shows the correspondence between the PXRichTextEdit element and the HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.

ASPX HTML or TypeScript
PXRichTextEdit
<px:PXRichTextEdit 
  ID="edBody" 
  runat="server" 
  DataField="Body" 
  Style="border-width: 0px;"
  AllowAttached="true" 
  AllowSearch="true" 
  AllowLoadTemplate="false" 
  AllowSourceMode="true">
</px:PXRichTextEdit>
 Use the qp-rich-text-editor tag in HTML.
<qp-rich-text-editor 
  id="edBody"
  state.bind="ItemSettings.Body"
  class="stretch">
</qp-rich-text-editor>
ID
<px:PXRichTextEdit 
  ID="edBody">
</px:PXRichTextEdit>
 Use the id attribute of the qp-rich-text-editor tag in HTML.
<qp-rich-text-editor 
  id="edBody">
</qp-rich-text-editor>
DataField
<px:PXRichTextEdit 
  DataField="Body">
</px:PXRichTextEdit>
 Use the state attribute of the qp-rich-text-editor tag in HTML.
<qp-rich-text-editor 
  state.bind="ItemSettings.Body">
</qp-rich-text-editor>

Obsolete ASPX Controls and Properties

The following table lists the obsolete ASPX elements that are related to rich text editors. You do not need to replace these ASPX elements with any HTML or TypeScript elements.

ASPX Control Properties
PXRichTextEdit
  • AllowAttached
  • AllowLoadTemplate
  • AllowSearch
  • AllowSourceMode
  • runat
  • Style