Skip to content

Rich Text

EditorContext

Functional description: EditorContext instance, which can be obtained bywx.createSelectorQuery EditorContext is bound to an editor component by id and operates the corresponding editor component.

.blur

TIP

The API usage is as follows: EditorContext.blur(Object object)

  • Functional description: The editor loses focus and the keyboard is closed at the same time.
  • Parameters and descriptions: Object object
    PropertiesTypeDefault valueRequiredDescription
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

.clear

TIP

The API usage is as follows: EditorContext.clear(Object object)

  • Functional description: Clear the editor content.
  • Parameters and descriptions: Object object
    PropertiesTypeDefault valueRequiredDescription
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

.format

TIP

The API usage is as follows: EditorContext.format(string name, string value)

  • Functional description: Modify the style.

  • Parameters and descriptions:

    • string name,Properties;
    • string value, Value
  • List of styles that can be set:

    namevalue
    bold-
    italic-
    underline-
    strike-
    ins-
    scriptsub / super
    headerH1 / H2 / h3 / H4 / h5 / H6
    alignleft / center / right / justify
    directionrtl
    indent-1 / +1
    listordered / bullet / check
    colorhex color
    backgroundColorhex color
    margin/marginTop/marginBottom/marginLeft/marginRightcss style
    padding/paddingTop/paddingBottom/paddingLeft/paddingRightcss style
    font/fontSize/fontStyle/fontVariant/fontWeight/fontFamilycss style
    lineHeightcss style
    letterSpacingcss style
    textDecorationcss style
    textIndentcss style
    wordWrapcss style
    wordBreakcss style
    whiteSpacecss style
  • Setting a selection that has already applied a style will cancel the style. css style represents the allowed values

.getContents

TIP

The API usage is as follows: EditorContext.getContents(Object object)

  • Functional description: Get the editor content.

  • Parameters and descriptions: Object object

    PropertiesTypeDefault valueRequiredDescription
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)
    • object.success Callback function

    Parameter Object.res

    PropertiesTypeDescription
    htmlstringHTML content with tags
    textstringPlain text content
    deltaObjectDelta object representing the content

.getSelectionText

TIP

The API usage is as follows: EditorContext.getSelectionText(Object object)

  • Functional description: Get the plain text content in the selected area of

  • Parameters and descriptions: Object object

    PropertiesTypeDefault valueRequiredDescription
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)
    • object.success Callback function

    Parameter Object.res

    PropertiesTypeDescription
    textstringPlain text content

.insertDivider

TIP

The API usage is as follows: EditorContext.insertDivider(Object object)

  • Functional description: Insert a dividing line.
  • Parameters and descriptions: Object object
    PropertiesTypeDefault valueRequiredDescription
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

.insertlmage

TIP

The API usage is as follows: EditorContext.insertlmage(Object object)

  • Functional description: Insert an image.

    • When the address is a temporary file, the tag in the obtained editor html format content adds the attribute data-local, and the image attributes in the deta format content adds the data-local field, which is the temporary file address passed in.
    • Developers can choose to upload images to the server during the submission phase and replace them after obtaining the network address. When replacing, the src value of should be replaced for html content, and the insert { image: abc } value should be replaced for delta content.
  • Parameters and descriptions: Object object

    PropertiesTypeDefault valueRequiredDescription
    srcstring-YesImage address, only supports http(s), base64, temporary files
    nowrapbooleanfalseNoWhether to automatically wrap after inserting the image, default wrap
    altstring-NoAlternative text when the image cannot be displayed
    widthstring-NoImage width (pixels/percentage)
    heightstring-NoImage height (pixels/percentage)
    extClassstring-NoClass name added to the image img tag
    dataObject-NoData is serialized into the format of name=value;name1=value2 and hung on the attribute data-custom
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (will be executed for both successful and failed calls)
  • Sample code:

js
this.editorCtx.insertImage({
  src: 'xx',
  width: '100px',
  height: '50px',
  extClass: className
})

.insertText

TIP

The API usage is as follows: EditorContext.insertText(Object object)

  • Functional description: Overwrite the current selection and set a text.
  • Parameters and descriptions: Object object
    PropertiesTypeDefault valueRequiredDescription
    textstring-NoText content
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

.redo

TIP

The API usage is as follows: EditorContext.redo(Object object)

  • Functional description: Restore
  • Parameters and descriptions: Object object
    PropertiesTypeDefault valueRequiredDescription
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

.removeFormat

TIP

The API usage is as follows: EditorContext.removeFormat(Object object)

  • Functional description: Clear the style of the current selection.
  • Parameters and descriptions: Object object
    PropertiesTypeDefault valueRequiredDescription
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

.scrolllntoView

TIP

The API usage is as follows: EditorContext.scrollIntoView()

  • Functional description: Make the editor cursor scroll to the visible area of

.setContents

TIP

The API usage is as follows: EditorContext.setContents(Object object)

  • Functional description: Initialize the editor content, only delta takes effect when html and delta exist at the same time.
  • Parameters and descriptions: Object object
    PropertiesTypeDefault valueRequiredDescription
    htmlstring-NoHTML content with tags
    deltaObject-NoDelta object representing the content
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)

.undo

TIP

The API usage is as follows: EditorContext.undo(Object object)

  • Functional description: Undo.
  • Parameters and descriptions: Object object
    PropertiesTypeDefault valueRequiredDescription
    successFunction-NoCallback function for successful interface call
    failFunction-NoCallback function for failed interface call
    completeFunction-NoCallback function for interface call completion (executed regardless of success or failure)