CN-122021569-A - Cross-platform application system supporting rich text editing and related method

CN122021569ACN 122021569 ACN122021569 ACN 122021569ACN-122021569-A

Abstract

The application relates to a cross-platform application system supporting rich text editing and a related method. The system comprises a presentation layer, a service layer and a bridging layer, wherein the presentation layer is constructed based on a declarative user interface framework and is used for rendering a native user interface and responding to user interaction, the service layer is operated in a webpage view container and is used for bearing and operating a rich text editor packaged into a local static resource package, the bridging layer is respectively in communication connection with the presentation layer and the service layer and is used for realizing two-way message communication and data exchange between the presentation layer and the service layer, the presentation layer is configured to convert user operation into a standard command and send the standard command to the service layer through the bridging layer, the service layer is configured to execute the standard command and actively send a state event to the presentation layer through the bridging layer, and the system packages the rich text editing capability of the service layer into rich text editing service which can be called by the presentation layer through the bridging layer so as to realize the primary experience and the rich text editing function in application hybrid development.

Inventors

LUO JING
LI SHUYI

Assignees

华夏基金管理有限公司

Dates

Publication Date: 20260512
Application Date: 20260210

Claims (10)

1. A cross-platform application system supporting rich text editing, comprising a presentation layer, a service layer and a bridging layer: The presentation layer is constructed based on a declarative user interface framework and is used for rendering a native user interface and responding to user interaction; The service layer is operated in the webpage view container and used for bearing and operating a rich text editor packaged into a local static resource package; the bridging layer is respectively in communication connection with the presentation layer and the service layer and is used for realizing two-way message communication and data exchange between the presentation layer and the service layer; The system comprises a presentation layer, a bridging layer, a service layer, a system and a system, wherein the presentation layer converts a received user operation instruction into a standard command and sends the standard command to the service layer through the bridging layer, the service layer executes the standard command and actively sends a state event to the presentation layer through the bridging layer, and the system packages the rich text editing capability of the service layer into rich text editing service which can be called by the presentation layer through the bridging layer.
2. The system of claim 1, wherein the presentation layer comprises a native user interface module, a user interaction module, and a state management module: The native user interface module is in communication connection with the state management module and is used for providing and managing a native control and receiving a user operation instruction of a user on the native control; the user interaction module is in communication connection with the state management module and is used for providing a native view component of a webpage view container carrying a service layer and receiving a user interaction instruction of a user in the native view; The state management module is in communication connection with the bridging layer and is used for converting a user operation instruction and a user interaction instruction into standard commands in a preset format and sending the standard commands to the bridging layer, and the state management module receives the state event transmitted by the bridging layer and updates the display states of the native user interface module and the user interaction module based on the state event.
3. The system of claim 1, wherein the business layer comprises a rich text editor core processing module, a document model management module, and an editing operations processing module: The rich text editor core processing module is in communication connection with the document model management module and is used for loading and running the rich text editor so as to provide the core logic processing capability of rich text editing; the document model management module is in communication connection with the editing operation processing module, is used for managing a local static resource package and is responsible for initializing and resource scheduling of the rich text editor; The editing operation processing module is in communication connection with the bridging layer, and is used for receiving the standard command transmitted by the bridging layer, forwarding the standard command to the rich text editor core processing module for execution, monitoring the internal state change of the rich text editor core processing module, and sending the internal state change to the bridging layer as a state event.
4. The system of claim 1, wherein the bridging layer comprises a web page view container, a two-way communication protocol module, and a lifecycle management module: The webpage view container is respectively in communication connection with the presentation layer and the service layer, is a communication channel between the presentation layer and the service layer, and is used for bearing the service layer and providing a local resource loading environment; The bidirectional communication protocol module is respectively in communication connection with the presentation layer and the service layer and is used for carrying out serialization encapsulation on the standard command received from the presentation layer and carrying out serialization encapsulation on the state event received from the service layer to form an encapsulation message conforming to a predefined communication protocol; The life cycle management module is in communication connection with the two-way communication protocol module and is used for managing creation, loading and destruction of the webpage view container and realizing a data transmission optimization and error retry mechanism by calling the native capability of the bottom layer of the operating system.
5. The system of claim 1, further comprising an adaptation module communicatively coupled to the presentation layer and the bridging layer, respectively, for enabling a native-level interactive experience, the adaptation module comprising a touch event optimization module, a virtual keyboard adaptation module, and a cursor following module: The touch event optimizing module is used for rewriting touch event processing logic of the editing area through the expression layer; the virtual keyboard adaptation module is used for monitoring system keyboard events through the presentation layer, acquiring the keyboard height and injecting codes into the webpage view container through the bridging layer so as to dynamically adjust the layout of the editing area; And the cursor following module is used for acquiring the cursor position information from the service layer through the bridging layer and adjusting the rolling offset of the network view through the presentation layer.
6. A method for building a cross-platform application system supporting rich text editing, the method comprising: initializing a runtime environment of a target item based on a declarative user interface framework; configuring a webpage view container component in the target item for bearing a business layer; introducing a rich text editor related dependency package and a resource file, and packaging the rich text editor related dependency package and the resource file into a local static resource package which can be loaded by the webpage view container so as to prepare business layer resources; setting a native control for receiving a user operation instruction and an editing area container component for bearing the webpage view container so as to develop a native user interface and a user interaction module of a presentation layer; establishing a bridging layer connecting the presentation layer and the service layer; The system comprises a presentation layer, a bridging layer, a service layer, a state event sending layer and a state event sending layer, wherein the presentation layer is used for sending the standard command to the service layer; wherein the configuration web view container component comprises: Determining an application platform type, wherein the platform type comprises a first platform type and a second platform type; responding to the application platform type as a first platform type, configuring a first network view corresponding to the first platform, starting script execution permission, and allowing cross-domain access and file access; And responding to the application platform type as a second platform type, configuring a second network view corresponding to the second platform, starting script execution permission, and setting a cache mode allowing cross-domain access and file access.
7. The method of claim 6, wherein packaging the rich text editor-related dependency packages and resource files into a local static resource package available for loading by the web page view container comprises: Creating a hypertext markup language file serving as a loading entry of a webpage view container; creating a script file for initializing a rich text editor instance, mounting a global communication function and monitoring editor events; Creating a cascading style sheet file for customizing the mobile end style of the editor; And merging, compressing and outputting the hypertext markup language file, the script file and the cascading style sheet file with the editor core code by using a construction tool to form a local static resource package.
8. The method of claim 6, wherein the establishing a bridging layer connecting the presentation layer and the service layer comprises: Formulating a communication protocol based on a target format, the communication protocol defining a message format including command, event, response and error types; Establishing a bidirectional communication channel from a primary end to a webpage technical end and from the webpage technical end to the primary end through the webpage view container; Wherein establishing a bi-directional communication channel from the native end to the web page technology end and from the web page technology end to the native end through the web page view container comprises: Establishing a communication channel from a raw end to a webpage technical end through the injection script function of the webpage view container; And establishing a communication channel from a webpage technical end to a native end through a message back-pass interface provided by the webpage view container.
9. A method of implementing rich text editing in a cross-platform application system based on a cross-platform application system supporting rich text editing according to any of claims 1-5, the method comprising: Responding to the original user interface module of the presentation layer to receive a user operation instruction and/or the user interaction module to receive a user interaction instruction, converting the user operation instruction and/or the user interaction instruction into a standard command, and sending the standard command to the service layer through the bridging layer; Responding to the standard command received by the editing operation processing module of the service layer, and forwarding the standard command to the rich text editor core processing module of the service layer for execution; Responding to the standard command executed by the rich text editor core processing module, triggering internal state change, monitoring the internal state change of the rich text editor core processing module by the editing operation processing module, taking the internal state change as a state event, and actively transmitting the state event to the presentation layer through the bridging layer; responding to the state management module of the presentation layer to receive the state event, and updating the display states of the native user interface module and the user interaction module according to the state event; the method for converting the user operation instruction and/or the user interaction instruction into a standard instruction and sending the standard instruction to a business layer through a bridging layer comprises the following steps of: responding to a native control in the native user interface module to receive a user operation instruction, and sending the user operation instruction to the state management module; responding to the edit area container component in the user interaction module to receive a user interaction instruction, and sending the user interaction instruction to the state management module; and responding to the state management module receiving the user operation instruction and/or the user interaction instruction, converting the user operation instruction and/or the user interaction instruction into a standard command conforming to a preset communication protocol, and sending the standard command to the service layer through the bridging layer.
10. The method of claim 9, wherein the listening, by the editing operation processing module, for internal state changes of a rich text editor core processing module and actively sending the internal state changes to the presentation layer through the bridging layer as state events comprises: Responding to the edit operation processing module to monitor that the internal state of the rich text editor core processing module changes, and generating a corresponding state event, wherein the state event at least comprises a content change event or a selection change event; And actively transmitting the state event to a state management module of the presentation layer through the bridging layer.

Description

Cross-platform application system supporting rich text editing and related method Technical Field The application relates to the technical field of computers, in particular to a cross-platform application system supporting rich text editing and a related method. Background The rich text editing is used as a core function of the mobile application, and the implementation scheme always faces challenges that the development efficiency, the function richness and the original experience are difficult to consider. Especially in a cross-platform development scene, how to deeply merge the editing capability of the Web technology and the interactive experience of the original system is a technical difficulty in the field for a long time. In the related art, pure native component development is applied, development cost is high, pure WebView embedding scheme is applied, the development efficiency is high, but the problems of low starting speed, large memory occupation, obvious interaction experience and native application difference and the like exist, when the cross-platform frame native component is applied for development, in order to keep the universality and the performance of the frame, great simplification or clipping is carried out on functions, the rich text editing requirement under a complex scene is difficult to meet, and the problems of function and efficiency sacrificing when the native experience is pursued and the native experience sacrificing when the functional efficiency is pursued exist in the related art. Therefore, there is a need for an application system that integrates the rich editing capabilities enabled by Web technology with the fluent interaction capabilities provided by the native system. Disclosure of Invention Based on this, it is necessary to provide a cross-platform application system supporting rich text editing and a related method for realizing the function of combining native experience and rich text editing in application hybrid development. In order to solve the above technical problems, in a first aspect, a cross-platform application system supporting rich text editing is provided, where the system includes a presentation layer, a service layer, and a bridging layer: The system comprises a presentation layer, a service layer, a bridging layer, a service layer, a system and a system, wherein the presentation layer is constructed based on a declarative user interface framework and is used for rendering a native user interface and responding to user interaction, the service layer is operated in a webpage view container and is used for bearing and operating a rich text editor packaged into a local static resource package, the bridging layer is respectively in communication connection with the presentation layer and the service layer and is used for realizing two-way message communication and data exchange between the presentation layer and the service layer, the presentation layer converts a received user operation instruction into a standard command and sends the standard command to the service layer through the bridging layer, the service layer executes the standard command and actively sends a state event to the presentation layer through the bridging layer, and the system packages the rich text editing capability of the service layer into rich text editing service which can be called by the presentation layer through the bridging layer. In order to solve the technical problem, in a second aspect, a method for constructing a cross-platform application system supporting rich text editing is provided, where the method includes: The method comprises the steps of initializing an operating environment of a target project based on a declarative user interface frame, configuring a webpage view container component in the target project for bearing a service layer, introducing a rich text editor related dependency package and a resource file, packaging the rich text editor related dependency package and the resource file into a local static resource package which can be loaded by the webpage view container to prepare service layer resources, setting a native control for receiving user operation instructions and an editing area container component for bearing the webpage view container to develop a native user interface and a user interaction module of the performance layer, establishing a bridging layer for connecting the performance layer and the service layer, configuring the bridging layer to realize bidirectional message communication and data exchange between the performance layer and the service layer, configuring the performance layer to convert user operation into standard commands and send the standard commands to the service layer through the bridging layer, configuring the service layer to execute the standard commands and actively send state events to the performance layer through the bridging layer, wherein the configuration view container component comprises determining a