Text editing method, text editing device and storage medium

Abstract

The invention relates to a text editing method, a text editing device and a storage medium, and the text editing method comprises the steps: responding to a first triggering operation of a user on a text editor, and displaying a simulation cursor in the text editor; in response to a selection operation of a user on a preset editing component in the text editor, displaying a visual element block corresponding to the selection operation at the current display position of the simulation cursor; the current display position of the simulation cursor moves along with the moving operation of the user on the simulation cursor; generating structured data based on the data objects corresponding to the visual element blocks; wherein a bidirectional binding relationship is formed between a display sequence of the visual element block in the text editor and a data object sequence in the structured data. Through the method and the device, the problem that the text editor is difficult to consider both simple operation and output structuralization is solved.

Description

Technical Field

[0001] This application relates to the field of computers, and in particular to text editing methods, text editing devices, and storage media. Background Technology

[0002] Web editing refers to the human-computer interaction process implemented through a browser. Its core function is to allow users to create, modify, or delete content and data on web pages. Web editing takes many forms, has diverse application scenarios, varies in complexity, and employs different methods.

[0003] In related technologies, web editing mainly follows these technical paths: First, there are rich text editors based on free input. Rich text editors ultimately generate text in the form of element tags, allowing users to directly edit text styles or insert simple media elements (such as images / videos), making operation convenient. Second, there are visual drag-and-drop editors based on drag-and-drop and attribute configuration. These are usually divided into three functional areas: material area, editing view, and attribute panel. Users drag materials onto the canvas and configure attributes to ultimately generate JSON structured data that can be rendered.

[0004] However, while rich text editors offer an intuitive editing experience, their output of unstructured text or HTML requires complex and error-prone parsing before it can be understood and executed by the computer. Drag-and-drop editors, on the other hand, can directly generate structured data, but their interactive process is cumbersome and disjointed, making it difficult to efficiently edit linear logic such as formulas. Therefore, in web editing technologies, there has always been a lack of a linear text editing paradigm that can balance ease of use with structured output.

[0005] Currently, no effective solution has been proposed for the problem that text editors in related technologies struggle to balance ease of use and structured output. Summary of the Invention

[0006] This application provides a text editing method, a text editing device, and a storage medium to at least solve the problem in related technologies where text editors struggle to balance ease of operation and structured output.

[0007] In a first aspect, embodiments of this application provide a text editing method, the method comprising:

[0008] In response to the user's first trigger action on the text editor, a simulated cursor is displayed in the text editor;

[0009] In response to the user's selection operation on a preset editing component within the text editor, a visual element block corresponding to the selection operation is displayed at the current display position of the simulated cursor; the current display position of the simulated cursor moves with the user's movement operation on the simulated cursor.

[0010] Based on the data object corresponding to the visual element block, structured data is generated;

[0011] The visual element blocks displayed in the text editor form a two-way binding relationship with the data object sequence in the structured data.

[0012] In some embodiments, the text editor has an initial state and an active state, and the insertion of a simulated cursor in the text editor in response to a first triggering operation within the text editor includes:

[0013] When the text editor is in the initial state, in response to the first trigger operation, an input box element is dynamically created, the input box element is inserted into the position corresponding to the first trigger operation, and the simulated cursor is displayed by controlling the focus of the input box element, so that the text editor enters the active state from the initial state.

[0014] In some embodiments, the method further includes:

[0015] In response to a second triggered action by the user outside the editing area of ​​the text editor, the simulated cursor is removed so that the text editor returns from the active state to the initial state.

[0016] In some embodiments, displaying a simulated cursor in the text editor in response to a user's first triggering action on the text editor includes:

[0017] If an existing visual element block is already displayed in the text editor, obtain the position coordinates of the first triggering operation, and calculate the logical position index where the simulated cursor should be inserted based on the position coordinates and the positional relationship between the position coordinates and the existing visual element block.

[0018] Insert and display the simulated cursor according to the logical position index.

[0019] In some embodiments, after inserting and displaying the simulated cursor according to the logical position index, the method further includes:

[0020] Detect keyboard operations on the simulated cursor;

[0021] When the keyboard operation is detected to be a delete operation, the previous visual element block and the data object corresponding to the visual element block are deleted according to the current display position of the simulated cursor, and the cursor is reactivated.

[0022] When the keyboard operation is detected to be a directional key movement operation, the current simulated cursor is deleted, and a new simulated cursor is inserted at an adjacent position to the current display position according to the movement direction obtained by parsing the directional key movement operation.

[0023] In some embodiments, obtaining the location coordinates of the first triggering operation includes:

[0024] If the object of the first triggering operation is the existing visual element block or the preset simulated placeholder prompt element, then the first triggering operation is determined to be an invalid operation; otherwise, the first triggering operation is determined to be a valid operation.

[0025] If the first triggering operation is detected as a valid operation, the location coordinates of the first triggering operation are obtained.

[0026] In some embodiments, generating structured data based on the data object corresponding to the visual element block includes:

[0027] Based on the display sequence of the visual element blocks in the text editor, the data objects corresponding to the visual element blocks are combined into a data object sequence with a predetermined structure, and the structured data is generated and stored in the database.

[0028] In response to the display operation of the text editor, the corresponding structured data is extracted from the database, and based on the data object sequence, the structured data is restored into a sequence of visual element blocks for display.

[0029] In some embodiments, the preset editing component includes a parameter editing component and an operator editing component; the step of displaying a visual element block corresponding to the selection operation at the current display position of the simulated cursor in response to a selection operation of the preset editing component within the text editor includes:

[0030] In response to a selection operation on the parameter editing component, a corresponding parameter visual element block is inserted at the current display position of the simulated cursor;

[0031] In response to a selection operation on the operator editing component, a corresponding operator visual element block is inserted at the current display position of the simulated cursor.

[0032] Secondly, embodiments of this application provide a text editing device, including:

[0033] A simulated cursor module is used to insert a simulated cursor in the text editor in response to the user's first triggering operation within the text editor;

[0034] An insertion module is used to respond to the user's selection operation on a preset editing component within the text editor by inserting a visual element block corresponding to the selection operation at the current display position of the simulated cursor; the current display position of the simulated cursor moves with the user's movement operation on the simulated cursor.

[0035] The generation module is used to generate structured data based on the data objects corresponding to the visual element blocks; wherein, the display sequence of the visual element blocks in the text editor forms a two-way binding relationship with the data object sequence in the structured data.

[0036] Thirdly, embodiments of this application provide a storage medium storing a computer program thereon, which, when executed by a processor, implements the text editing method as described in the first aspect above.

[0037] Compared to related technologies, the text editing method, text editing device, and storage medium provided in this application, in response to a user's first trigger operation on the text editor, display a simulated cursor in the text editor; in response to a user's selection operation on a preset editing component within the text editor, display a visual element block corresponding to the selection operation at the current display position of the simulated cursor; the current display position of the simulated cursor moves with the user's movement operation on the simulated cursor; and structured data is generated based on the data object corresponding to the visual element block; wherein, the display sequence of the visual element block within the text editor and the data object sequence in the structured data constitute a two-way binding relationship.

[0038] By employing the above method, the familiar linear text editing interaction paradigm is reproduced through the insertion of a simulated cursor, making the operation intuitive and requiring no learning curve, achieving ease of operation comparable to rich text editors. On the other hand, by converting free input into selection operations on preset editing components, the standardization and semantic clarity of each input element are ensured from the data source. Combined with the two-way binding mechanism between visual element sequences and data object sequences, every editing action of the user on the interface can be mapped in real time and automatically to the precise evolution of the structured data model, while also effectively reducing development costs. Ultimately, while ensuring operational freedom, the structured and computable output results are guaranteed, thus effectively solving the problem that text editors struggle to balance ease of operation and structured output.

[0039] Details of one or more embodiments of this application are set forth in the following drawings and description to make other features, objects and advantages of this application more readily apparent. Attached Figure Description

[0040] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0041] Figure 1 This is a hardware structure block diagram of a terminal for a text editing method according to an embodiment of this application;

[0042] Figure 2 This is a flowchart of a text editing method according to an embodiment of this application;

[0043] Figure 3 This is a schematic diagram of an editing interface according to an embodiment of this application;

[0044] Figure 4 This is a flowchart of another text editing method according to an embodiment of this application;

[0045] Figure 5 This is a structural block diagram of a text editing device according to an embodiment of this application. Detailed Implementation

[0046] To make the objectives, technical solutions, and advantages of this application clearer, the application is described and illustrated below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the application. All other embodiments obtained by those skilled in the art based on the embodiments provided in this application without inventive effort are within the scope of protection of this application. Furthermore, it is understood that although the efforts made in such a development process may be complex and lengthy, for those skilled in the art related to the content disclosed in this application, modifications to design, manufacturing, or production based on the technical content disclosed in this application are merely conventional technical means and should not be construed as insufficient disclosure of the content of this application.

[0047] In this application, the reference to "embodiment" means that a specific feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The appearance of this phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it a separate or alternative embodiment that is mutually exclusive with other embodiments. It will be explicitly and implicitly understood by those skilled in the art that the embodiments described in this application may be combined with other embodiments without conflict.

[0048] Unless otherwise defined, the technical or scientific terms used in this application shall have the ordinary meaning understood by one of ordinary skill in the art to which this application pertains. The terms “a,” “an,” “an,” “the,” and similar words used in this application do not indicate quantity limitation and may indicate singular or plural. The terms “comprising,” “including,” “having,” and any variations thereof used in this application are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or device that includes a series of steps or modules (units) is not limited to the listed steps or units, but may also include steps or units not listed, or may include other steps or units inherent to these processes, methods, products, or devices. The terms “connected,” “linked,” “coupled,” and similar words used in this application are not limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. “Multiple” used in this application means two or more. “And / or” describes the relationship between related objects, indicating that three relationships may exist; for example, “A and / or B” can represent: A alone, A and B simultaneously, and B alone. The terms “first,” “second,” “third,” etc., used in this application are merely to distinguish similar objects and do not represent a specific ordering of the objects.

[0049] The method embodiments provided in this example can be executed on a terminal, computer, or similar computing device. Taking running on a terminal as an example, Figure 1 This is a hardware structure block diagram of a terminal for a text editing method according to an embodiment of this application. Figure 1 As shown, a terminal may include one or more ( Figure 1 Only one is shown in the diagram. A processor 102 (which may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.) and a memory 104 for storing data are also shown. Optionally, the terminal may further include a transmission device 106 for communication functions and an input / output device 108. Those skilled in the art will understand that... Figure 1 The structure shown is for illustrative purposes only and does not limit the structure of the terminal described above. For example, the terminal may also include components that are more... Figure 1 The more or fewer components shown, or having the same Figure 1 The different configurations shown.

[0050] The memory 104 can be used to store computer programs, such as application software programs and modules, like the computer program corresponding to the text editing method in this embodiment. The processor 102 executes various functional applications and data processing by running the computer program stored in the memory 104, thus implementing the above-described method. The memory 104 may include high-speed random access memory and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor 102, and these remote memories can be connected to the terminal via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0051] The transmission device 106 is used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the terminal's communication provider. In one example, the transmission device 106 includes a Network Interface Controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 106 may be a Radio Frequency (RF) module used for wireless communication with the Internet.

[0052] This embodiment provides a text editing method. Figure 2 This is a flowchart of a text editing method according to an embodiment of this application, such as... Figure 2 As shown, the process includes the following steps:

[0053] Step S210: In response to the user's first trigger operation on the text editor, a simulated cursor is displayed in the text editor.

[0054] When a user performs a first-trigger action such as clicking within the text editor area, the system captures this interaction event through an event listener mechanism. After confirming the validity of the action, it dynamically creates an input element with the type attribute "text". An example code snippet is shown below: <input data-v-862a6444 type="”text”"> At this point, the browser will render a blinking text cursor for the input element, but since the input element itself has been hidden, the user can only see the visual effect of the simulated cursor existing independently.

[0055] In step S220, in response to the user's selection operation of the preset editing component in the text editor, the visual element block corresponding to the selection operation is displayed at the current display position of the simulated cursor; the current display position of the simulated cursor moves with the user's movement operation of the simulated cursor.

[0056] When a user makes a selection in the preset editing component panel on the right (for example, this preset editing component panel is pre-set on the left side of the text editor's editing area), the system first captures the interaction event through an event listener mechanism, and then parses the type identifier and metadata information of the selected component through the properties of the event object. Subsequently, it accesses the core data array maintained in the system (such as the JavaScript array `chosedList`), which stores the data objects corresponding to all elements within the editor in sequence. This includes not only visual element data representing parameters and operators, but also simulated cursor data representing the current insertion position. In other words, in this embodiment, the interactive functions are controlled separately; the user controls the cursor position by clicking and inputs content by selecting. However, the objects generated by both (the cursor input and the content div) are treated equally and managed and sorted in the same data array (`chosedList`) at the underlying level, thus achieving absolute control over the editing state.

[0057] The system dynamically creates the corresponding visual element DOM node and inserts it into the corresponding position in the document flow based on the index position of the current cursor data object in `chosedList`. For example, the system can synchronously add the data object corresponding to the newly created visual element block to the position before the cursor data object in the `chosedList` array, then immediately delete the data object representing the original cursor and its corresponding DOM element. Then, according to the navigation rules determined by the component type (such as moving to the next position after inserting a regular parameter, or locating to its parameter area after inserting a function operator), the system inserts a new cursor data object at the specified position in the `chosedList` array and creates the corresponding focused input element. The entire process synchronously drives interface rendering and data state maintenance by atomically updating the `chosedList` array, ensuring that the visual element sequence and data object sequence remain strictly consistent after each operation, thereby achieving true two-way binding and providing a reliable data foundation for generating fully structured calculation rules.

[0058] Step S230: Generate structured data based on the data objects corresponding to the visual element blocks; wherein, the display sequence of the visual element blocks in the text editor forms a two-way binding relationship with the data object sequence in the structured data.

[0059] Specifically, the system sorts and assembles the data object set of visual element blocks according to their display sequence in the editor, and serializes it according to a predefined data protocol, converting it into a standardized output (such as a JSON string) that is independent of the front-end rendering logic and is a pure data structure. This output fully preserves the business logic of the visual editing sequence and can be directly parsed and executed by the computing engine or persistently stored in the database, thereby achieving a seamless conversion from interactive visual editing to machine-readable structured data.

[0060] It should also be noted that, as mentioned earlier, in order to maintain the consistency between the visual layer and the data layer, the system has established a centralized state management mechanism at the bottom layer. A specially designed data structure is used to store the data objects corresponding to all visual element blocks. This data structure is usually organized in the form of an array, and each array element is a complex object containing a type identifier, data value, unique ID and other metadata.

[0061] Thus, when a user performs any editing operation at the interface layer, the system triggers a unified state update pipeline. This pipeline is responsible for synchronizing visual changes to the data layer. Specifically, this is achieved by immediately executing the corresponding data array operation after each DOM operation (such as inserting, deleting, or moving visual element blocks), ensuring that interface changes and data changes are atomic and indivisible units. For example, when a user inserts a new parameter block, the processor first inserts the corresponding visual element at the specified position in the DOM tree, and then immediately inserts a data object containing information such as parameter type, parameter ID, display label, and value type at the corresponding index position in the data array. The entire two-way binding system is designed with performance optimization in mind, ensuring a smooth interactive experience and reliable data consistency even in complex editing scenarios.

[0062] Through steps S210 to S230, the familiar linear text editing interaction paradigm is reproduced by inserting a simulated cursor, making the operation intuitive and requiring no learning cost, achieving ease of operation comparable to rich text editors. On the other hand, by converting free input into selection operations on preset editing components, the standardization and semantic clarity of each input element are ensured from the data source. Combined with the two-way binding mechanism between visual element sequences and data object sequences, every editing action of the user on the interface can be mapped in real time and automatically to the precise evolution of the structured data model, while also effectively reducing development costs. Ultimately, while ensuring operational freedom, the structured and computable output results are ensured, thus effectively solving the problem that text editors struggle to balance ease of operation and structured output.

[0063] In some embodiments, the text editor described above has an initial state and an active state; the insertion of a simulated cursor in the text editor in response to a first trigger operation within the text editor may further include the following steps:

[0064] When the text editor is in its initial state, in response to the first trigger operation, an input box element is dynamically created, inserted into the position corresponding to the first trigger operation, and a simulated cursor is displayed by controlling the focus of the input box element, so that the text editor enters the active state from the initial state.

[0065] The editor's initial state is characterized by a blank screen with no input data. This initial state is a non-interactive interface displaying static prompts and unable to receive input. When the system detects the user's first trigger action (such as clicking to add a condition or formula), it immediately initiates a state transition process: First, it dynamically creates an input element with the type attribute "text" using JavaScript's DOM interface and inserts it into the corresponding position using methods like `insertBefore`. Then, the system immediately executes the `focus()` method to give the input element focus, at which point the browser's rendering engine draws a blinking text insertion cursor. This series of atomic operations works together to transform the editor from its initial state (displaying only placeholders) to its active state (with an interactive cursor), establishing a basic interactive environment for subsequent structured editing. The active state of the text editor is characterized by an interactive interface displaying a blinking cursor and allowing users to edit structured content by selecting predefined components.

[0066] Through the above embodiments, by dynamically creating input box elements and accurately locating them at the trigger position, the editor can immediately present the native cursor interaction experience at any click location. This not only retains the intuitive "click-and-type" operation mode of traditional text editors to ensure ease of operation, but also lays a precise positioning foundation for generating structured data through selection input, thereby ensuring a smooth user experience and controllable data status.

[0067] In some embodiments, the text editing method described above may further include the following steps:

[0068] In response to a second trigger action by the user outside the editing area of ​​the text editor, the simulated cursor is removed, so that the text editor returns from the active state to the initial state.

[0069] When the system detects a second triggering operation performed by the user outside the visible area of ​​the text editor (such as a user clicking on another area of ​​the page when there is no value on the editing page, triggering a defocusing operation), it will immediately trigger the state rollback mechanism: remove the input box element currently carrying the cursor through the DOM manipulation interface, terminate the browser's cursor rendering and event listening for the element, and restore the display of the placeholder element in the initial state, thereby completely severing the interactive connection of the editor, and restoring it from the active state with cursor blinking and input response to the non-interactive initial state that only presents static prompt information.

[0070] Through the above embodiments, when the system detects a click operation outside the editing area, it automatically triggers the cursor hiding and state rollback process. This not only conforms to the user's intuitive understanding of "clicking on a blank area to cancel focus" and thus significantly reduces the learning cost, but also effectively prevents the continuation of invalid operations by clearing temporary interactive elements (cursor) in a timely manner. At the same time, it ensures that the editor always presents a neat initial interface when it is inactive. This closed-loop state management not only ensures the rigor of the interaction process, but also provides underlying support for the reliability of structured data generation.

[0071] It should also be noted that the aforementioned preset editing components refer to basic functional units that are predefined, encapsulated, and integrated into the editor's interactive interface, allowing users to directly select them to build data models. For example, these preset editing components may include parameter editing components and operator editing components. The parameter editing components include input box types (e.g., numeric), dropdown selection box types (e.g., project progress), and combined types (e.g., target, result); the operator editing components include simple single operators as well as operators that can contain elements (e.g., ABS, SUM), as shown in the following code:

[0072]

[0073]

[0074] parameter:

[0075]

[0076] <div class="sitem" v-for="sitem in choseParamsList" :key="sitem.name" @click="onChoseParam(sitem, '1')">

[0077]

[0078]

[0079]

[0080] Operators:

[0081]

[0082] <div class="sitem" v-for="sitem in choseSymbolList" :key="sitem.name" @click="onChoseParam(sitem, '2')">

[0083]

[0084]

[0085]

[0086] Based on this, in some embodiments, the above-mentioned response to a selection operation on a preset editing component within the text editor, displaying the visual element block corresponding to the selection operation at the current display position of the simulated cursor, may further include the following steps:

[0087] In response to a selection operation on the parameter editing component, insert the corresponding parameter visual element block at the current display position of the simulated cursor; in response to a selection operation on the operator editing component, insert the corresponding operator visual element block at the current display position of the simulated cursor.

[0088] Specifically, when the system captures a user's selection of a parameter or operator through an event listener mechanism, it immediately initiates a structured content insertion process: First, based on the type identifier of the selected component, it retrieves the corresponding visual template and data specifications from a predefined component library. It then tracks the current editing position by maintaining a simulated cursor state. When the user selects a parameter, the system dynamically creates and inserts a visual element block representing that parameter at the current cursor position in the DOM (usually implemented as a DOM element with specific styles and data, such as a draggable block component with parameter identifiers and data types). Similarly, when the user selects an operator, the system inserts the corresponding operator visual element block using the same mechanism (implemented as a visual component with operational logic symbols and connection points). One code example is shown below:

[0089] <template v-else-if="item.type === '1'">

[0090]

[0091] <selectcombin :info="{ ...item, index}" @callback="onSetItem" / >

[0092]

[0093]

[0094] <zk-input-number

[0095] v-model="item.paramValue" placeholder="Numeric value" :controls="false" @change="onInputChange"

[0096] / >

[0097]

[0098]

[0099] <zk-select v-model="item.paramValue" @change="onChageProgress">

[0100] <zk-option

[0101] v-for="item in progressOptions"

[0102] :value="item.label"

[0103] :label="item.label"

[0104] :key="item.value"

[0105] >

[0106]

[0107]

[0108]

[0109] {{ item.param}}

[0110] < / template>

[0111] In the code example above, when the parameter type is 1, the system first checks whether the parameter belongs to the preset list of combined parameters. If it does, it renders the SelectCombin component, which receives the current item information and index as attributes and supports callback functions. If the parameter is identified as "numeric", it renders the zk-input-number input box component, implements two-way data binding through v-model, and hides the control buttons. If the parameter is identified as "project progress", it renders the zk-select dropdown selector component, generates an optional list by traversing the progressOptions array, and binds a value change event. If none of the above conditions are met, the parameter name is displayed as plain text by default, thus building a visual editing interface that can intelligently adapt to different parameter types.

[0112] Through the above embodiments, it is ensured that all types of components can be visualized in a way that best matches their semantic characteristics, thereby improving the accuracy of operation while maintaining the smoothness of the editing process.

[0113] In some embodiments, the above-described response to a user's first triggering operation on the text editor, displaying a simulated cursor in the text editor, may further include the following steps:

[0114] If an existing visual element block is already displayed in the text editor, obtain the position coordinates of the first triggering operation, and calculate the logical position index where the simulated cursor should be inserted based on the position coordinates and the positional relationship between the position coordinates and the existing visual element block; insert and display the simulated cursor according to the logical position index.

[0115] When there is no value in the editor, clicking the editor will result in normal focus; the following details the simulated cursor position after clicking the editor when there is a value:

[0116] When the text editor already contains visual element blocks, after the system captures the coordinate data (leftX, topY) of the first trigger operation, it iterates through the existing set of visual elements (els) in the editor, compares the spatial relationship between the position boundaries (top / bottom / left / right) of each element and the operation coordinates, for example, filtering out elements that match in the vertical direction (topY is located between the top and bottom of the element), and then determines the precise index position (index) where the cursor should be inserted by comparing the horizontal coordinates. Finally, the cursor display is updated by deleting the original cursor element and creating a focused input box at the new index position.

[0117] Furthermore, for line breaks, when focusing on the simulated cursor position, you can first determine if the position of the traversed object and the currently clicked position are on the same line (topY >= top && topY <= bottom), then determine the final cursor position based on left and obtain the index value. Here is a code example:

[0118] const onTouchstart = (e) => {

[0119] if (resultRef.value !== e.target && placeholderRef.value !== e.target) return / / Determine if the clicked object is valid.

[0120] isEditing.value = true

[0121] let els = resultRef.value.querySelectorAll('.item-div') / / Query the collection of selected elements els in the editor.

[0122] Let leftX = ex

[0123] Let topY = ey

[0124] let index = 0

[0125] for (let i = 0; i < els.length; i++) { / / Traverse

[0126] const { top, bottom, left, right} = els[i].getBoundingClientRect()

[0127] if (topY >= top && topY <= bottom) {

[0128] if (leftX <= left) {

[0129] / / Normal time

[0130] index = i

[0131] break

[0132] } else if (!els[i + 1]) {

[0133] / / At the end, there is no next one.

[0134] index = i + 1

[0135] break

[0136] } else if (leftX >= right && els[i + 1].getBoundingClientRect().left === els[0].getBoundingClientRect().left) {

[0137] / / When there is a next one

[0138] index = i + 1

[0139] break

[0140] }

[0141] }

[0142] }

[0143] let arr = chosenList.value.filter(i => i.type !== 'input') / / Delete the original cursor (input) and insert a new cursor at the new position index.

[0144] arr.splice(index, 0, {

[0145] type: 'input'

[0146] })

[0147] chosedList.value = arr

[0148] nextTick(() => {

[0149] setTimeout(() => {

[0150] inputRef.value[0].focus() / / Activate the cursor

[0151] }, 100)

[0152] })

[0153] }

[0154] It should also be noted that for the simulated cursor position after a value is selected, the editor will further process the logic based on the selected type (parameter - 1 or operator - 2). For example, for ABS logic, the steps are: step 1: find the current simulated cursor position; step 2: determine if the selected type is an operator; step 3: if the operator is ABS, insert the symbols "ABS", "[", and "]" before and after the current cursor; step 4: reactivate the simulated cursor, as shown in the following code example:

[0155] const omChoseParam = (sitem, type) => {

[0156] let index = chosenList.value.findIndex(item => item.type === 'input') / / step 1

[0157] let tag = false

[0158] if (type === '2' && (sitem.name === '(' || sitem.name === 'ABS' || sitem.name === 'SNM')) { / / step 2

[0159] if (sitem.name === '(') {

[0160] chosedList.value.splice(index, 0, {

[0161] type,

[0162] param: '('

[0163] })

[0164] chosedList.value.splice(index + 2, 0, {

[0165] type,

[0166] param: ')'

[0167] })

[0168] }

[0169] if (sitem.name === 'ABS' || sitem.name === 'SNM') { / / step 3

[0170] let name = sitem.name

[0171] chosedList.value.splice(index, 0, {

[0172] type,

[0173] param: name

[0174] }, {

[0175] type,

[0176] param: '('

[0177] })

[0178] chosedList.value.splice(index + 3, 0, {

[0179] type,

[0180] param: ')'

[0181] })

[0182] }

[0183] } else {

[0184] choseList.value.splice(index, 0, {

[0185] type,

[0186] param: sitem.name,

[0187] paramValue: '', / / Value, the item being called

[0188] ...sitem

[0189] })

[0190] if (sitem.name === 'numerical') {

[0191] tag = true

[0192] }

[0193] }

[0194] if (tag) {

[0195] nextTick(() => {

[0196] let eLs = resultRef.value?.querySelectorAll('.item-div')

[0197] eLs[index].querySelector('input').focus()

[0198] })

[0199] } else {

[0200] nextTick(() => {

[0201] inputRef.value[0].focus()

[0202] })

[0203] }

[0204] }

[0205] The main function of the above code is to: search for an item of type 'input' in the array chosenList; insert different parameter items into the list according to different conditions; and focus on the corresponding input box according to the operation result.

[0206] Through the above embodiments, by calculating the spatial relationship between the trigger coordinates and existing elements in real time, the physical click position is intelligently converted into a logical index in the data model. This enables the editor to accurately identify the user's insertion intention in the gaps between different visual blocks or in the line break area. It retains the intuitive interactive experience of the traditional text editor, which allows for instant input, while overcoming the limitation of block editors that can only perform sequential appending. This achieves continuous and accurate positioning capability in discrete visual block sequences, and ultimately significantly improves the degree of operational freedom and editing efficiency in complex editing scenarios through this refined positioning mechanism.

[0207] In some embodiments, after inserting and displaying the simulated cursor according to the logical position index, the text editing method may further include the following steps:

[0208] Detect keyboard operations on the simulated cursor; when a delete operation is detected, delete the previous visual element block and its corresponding data object according to the current display position of the simulated cursor, and reactivate the cursor; when a directional key movement operation is detected, delete the current simulated cursor, and insert a new simulated cursor at an adjacent position according to the movement direction obtained from parsing the directional key movement operation.

[0209] Specifically, when the system detects an operation on the simulated cursor through the keyboard event listening mechanism, it performs corresponding processing based on the operation type:

[0210] In a delete operation scenario, after determining that a delete command has been executed via the keydown event bound to the cursor, the current cursor position index is first obtained. Then, the previous data item at the corresponding position in the chosenList data array and its associated visual element block are deleted simultaneously. Finally, the UI state is updated by reactivating the cursor. See the following code example:

[0211] if (e.key === 'Backspace' && chosenList.value.length > 1) {

[0212] / / Delete operation

[0213] let index = chosenList.value.findIndex(item => item.type === 'input')

[0214] if (index === 0) return

[0215] chosenList.value.splice(index - 1, 1)

[0216] nextTick(() => {

[0217] inputRef.value[0].focus()

[0218] })

[0219] }

[0220] In arrow key movement scenarios, the system determines the movement direction by parsing the key type, specifically by determining whether to move left or right based on the keydown event bound to the cursor, and obtaining the cursor position index. Next, it checks if there are any values ​​before or after the cursor position. If there are no values, the cursor does not move; if there are values, the DOM element corresponding to the current cursor is first deleted, and then a new cursor element is inserted at an adjacent position (moving forward or backward one position) based on the direction determination result, triggering focus, thus achieving cursor navigation within the existing visual element block sequence: The following code is an example of controlling left cursor movement:

[0221] / / Move cursor left

[0222] if (e.key === 'ArrowLeft' && chosenList.value.length > 1) {

[0223] let index = chosenList.value.findIndex(item => item.type === 'input')

[0224] if (index === 0) return

[0225] chosenList.value.splice(index, 1)

[0226] choseList.value.splice(index - 1, 0, {

[0227] type: 'input'

[0228] })

[0229] nextTick(() => {

[0230] setTimeout(() => {

[0231] inputRef.value[0].focus()

[0232] }, 100)

[0233] })

[0234] }

[0235] Through the above embodiments, the deletion operation is transformed into the synchronous removal of the preceding visual block and its data object, ensuring the real-time consistency between the interface and the underlying data. At the same time, the destruction and reconstruction mechanism of the cursor triggered by the arrow keys enables discrete block elements to support continuous focus navigation. This not only inherits the advantages of efficient keyboard interaction of text editors, but also overcomes the operational bottleneck of drag-and-drop editors that must rely on precise mouse clicks. Ultimately, the keyboard-driven editing loop significantly improves the maintenance efficiency and operational smoothness of structured data.

[0236] In some embodiments, obtaining the location coordinates of the first triggering operation may further include the following steps:

[0237] If the object of the first triggering operation is an existing visual element block or a preset simulated placeholder prompt element, the first triggering operation is determined to be an invalid operation; otherwise, the first triggering operation is determined to be a valid operation. If the first triggering operation is detected to be a valid operation, the position coordinates of the first triggering operation are obtained.

[0238] In the text editor's interactive processing flow, after the system captures the first triggered operation through an event listener mechanism, it first performs an operation validity verification: by accessing the target property of the event object to obtain the actual clicked object, if the clicked object is identified as belonging to an existing visual element block (i.e., a parameter or operator component already presented within the editor) or a preset simulated placeholder tooltip element (i.e., a pre-created DOM element that mimics the gray tooltip text of an input box, such as a div element with the class attribute containing "placeholder"), the subsequent processing flow is immediately interrupted. Only when the operation target is a blank area of ​​the editor container is the object of the first triggered operation deemed valid. In this case, the precise position coordinates of the operation in the viewport coordinate system are extracted through the clientX and clientY properties of the event object, and these coordinate values ​​are used as input parameters for subsequent cursor positioning calculations, thereby ensuring that only operations targeting valid editing areas will trigger the cursor insertion process.

[0239] Through the above embodiments, predictive filtering directly intercepts accidental touches on existing visual blocks and placeholders at the initial stage, avoiding unnecessary coordinate calculations and cursor positioning processes. This effectively prevents unexpected changes to the data structure due to accidental operations and significantly improves the editor's response efficiency and interaction accuracy, thereby ensuring the continuity of the structured editing process by maintaining the stable state of interface elements.

[0240] In some embodiments, generating structured data based on the data objects corresponding to visual element blocks may further include the following steps:

[0241] Based on the display sequence of visual element blocks in the text editor, the data objects corresponding to the visual element blocks are combined into a data object sequence with a predetermined structure, and structured data is generated and stored in the database. In response to the display operation of the text editor, the corresponding structured data is extracted from the database, and based on the data object sequence, the structured data is restored into a visual element block sequence for display.

[0242] Specifically, the system first combines the corresponding data objects into structured data (usually in JSON format) that conforms to a predetermined specification, based on the display order of the visual element blocks in the editor. Then, it submits this data to the server and stores it in the database via a network request. When the edited content needs to be displayed again, the system retrieves the stored structured data from the server through an initialization process, parses out the sequence of data objects, and creates the corresponding visual element blocks in sequence (including instantiating the corresponding input components or text elements according to the parameter type). These elements are then inserted into the editor container in the original order, and the data binding relationship is re-established, thereby accurately restoring the editing interface state that is completely consistent with the state when it was stored.

[0243] Please see Figure 3 Taking an application in a business target management system as an example, the diagram shows a schematic of a text editor interface. In this interface, the first line of text prompts is used to generate "Calculation Rule 1". The user clicks the "Add Condition" button below to add condition 1. Under condition 1, the user can select "This Indicator" from the drop-down list displayed on the interface, and select parameters or operators from the preset editing components configured below, such as selecting "Target" or the ">=" operator. The user can then configure the calculation rule for "Achievement Rate" through the same interactive operation.

[0244] on the other hand, Figure 3 The calculation rule data configured in the middle can be transformed as follows:

[0245] conditionalist: [{paramList: [{type: "1", category: "1", indexId:null, param: "target"},

[0246] 0: {paramList: [{type: "1", category: "1", indexId: null, param: "target"}, oriParam: "target"},

[0247] paramList: [{type: "1", category: "1", indexId: null, param: "target"}, oriParam: "target"},

[0248] 0: {type: "1", category: "1", indexId: null, param: "target", oriParam: "target"}

[0249] category: "1"

[0250] indexId: null

[0251] oriParam: "target"

[0252] param: "target"

[0253] type: "1"

[0254] 1: {type: "2", category: null, indexId: null, param: ">=", oriParam:">=")

[0255] conditionRelaType: "1"

[0256] result: {paramList: [{type: "1", category: null, indexId: null,param: "First"}]

[0257] paramList: [{type: "1", category: null, indexId: null, param: "First Place", oriParam:"First Place"}]

[0258] 0: [{type: "1", category: null, indexId: null, param: "First Place",oriParam: "First Place"}]

[0259] category: null

[0260] indexId: null

[0261] oriParam: "Project Progress"

[0262] param: "First Place"

[0263] type: "1"

[0264] 1: {type: "1", category: null, indexId: null, param: 12, oriParam: "numeric value"}

[0265] 2: {type: "2", category: null, indexId: null, param: "-", oriParam:"-"}

[0266] resultType: "1"

[0267] The present application will now be described in detail with reference to specific embodiments. Figure 4 This is a flowchart of another text editing method according to an embodiment of this application, such as... Figure 4 As shown, the process includes the following steps:

[0268] Step S401: The text editor is in its initial state.

[0269] Step S402: The text editor enters the active state. Specifically, when the user clicks the "Add Condition" or "Add Formula" button in the editing interface, the editor expands, the cursor focuses, and the text editor enters the active state from its initial state.

[0270] Step S403: Determine if there is a value in the editor.

[0271] If not, in step S404, the text editor returns to its initial state when the user clicks somewhere outside the editing area.

[0272] Step S405: If present, determine the cursor position.

[0273] Step S406: Based on the determined cursor position, add or delete a simulated cursor to update the cursor position; return to step S405 above to continue the editing process until the calculation rule editing is completed. During this process, when the user clicks outside the editing area, the text editor returns to its initial state.

[0274] It should be noted that the steps shown in the above process or in the flowchart of the accompanying figures can be executed in a computer system such as a set of computer-executable instructions, and although a logical order is shown in the flowchart, in some cases the steps shown or described may be executed in a different order than that shown here.

[0275] This embodiment also provides a text editing device for implementing the above embodiments and preferred embodiments, which will not be repeated hereafter. As used below, the terms "module," "unit," "subunit," etc., can refer to a combination of software and / or hardware that performs a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0276] Figure 5 This is a structural block diagram of a text editing device according to an embodiment of this application, such as... Figure 5 As shown, the device includes:

[0277] The simulated cursor module 10 is used to insert a simulated cursor in the text editor in response to the user's first trigger operation in the text editor;

[0278] The insertion module 20 is used to respond to the user's selection operation of the preset editing component in the text editor, and insert the visual element block corresponding to the selection operation at the current display position of the simulated cursor; the current display position of the simulated cursor moves with the user's movement operation of the simulated cursor;

[0279] The generation module 30 is used to generate structured data based on the data objects corresponding to the visual element blocks; wherein, the display sequence of the visual element blocks in the text editor forms a two-way binding relationship with the sequence of data objects in the structured data.

[0280] In some embodiments, the simulated cursor module 10 is further configured to, when an existing visual element block is already displayed in the text editor, obtain the position coordinates of the first trigger operation, and calculate the logical position index where the simulated cursor should be inserted based on the positional relationship between the position coordinates and the existing visual element block; and insert and display the simulated cursor according to the logical position index.

[0281] In some embodiments, the text editing device further includes a cursor operation module; the cursor operation module is used to detect keyboard operations on the simulated cursor; the cursor operation module is also used to, when the detected keyboard operation is a delete operation, delete the previous visual element block and the data object corresponding to the visual element block according to the current display position of the simulated cursor, and reactivate the cursor; the cursor operation module is also used to, when the detected keyboard operation is an arrow key movement operation, delete the current simulated cursor, and insert a new simulated cursor at an adjacent position to the current display position according to the movement direction obtained by parsing the arrow key movement operation.

[0282] It should be noted that the above modules can be functional modules or program modules, and can be implemented by software or hardware. For modules implemented by hardware, the above modules can reside in the same processor; or the above modules can be located in different processors in any combination. Specific examples in this embodiment can be found in the examples described in the above embodiments and optional implementations, and will not be repeated in this embodiment.

[0283] This embodiment also provides an electronic device, including a memory and a processor, wherein the memory stores a computer program and the processor is configured to run the computer program to perform the steps in any of the above method embodiments.

[0284] Optionally, the electronic device may further include a transmission device and an input / output device, wherein the transmission device is connected to the processor and the input / output device is connected to the processor.

[0285] Optionally, in this embodiment, the processor can be configured to perform the following steps via a computer program:

[0286] S1, in response to the user's first trigger action on the text editor, displays a simulated cursor in the text editor.

[0287] S2, in response to the user's selection of a preset editing component in the text editor, displays the visual element block corresponding to the selection operation at the current display position of the simulated cursor; the current display position of the simulated cursor moves with the user's movement of the simulated cursor.

[0288] S3 generates structured data based on the data objects corresponding to the visual element blocks; wherein, the display sequence of the visual element blocks in the text editor forms a two-way binding relationship with the sequence of data objects in the structured data.

[0289] It should be noted that the specific examples in this embodiment can refer to the examples described in the above embodiments and optional implementations, and will not be repeated here.

[0290] Furthermore, in conjunction with the text editing methods in the above embodiments, this application embodiment can provide a storage medium for implementation. This storage medium stores a computer program; when executed by a processor, the computer program implements any of the text editing methods in the above embodiments.

[0291] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.

[0292] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments described above. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, etc., and are not limited to these.

[0293] Those skilled in the art should understand that the technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments have been described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0294] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the invention patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this patent application should be determined by the appended claims.

Claims

1. A text editing method, characterized in that, The method includes: In response to the user's first trigger action on the text editor, a simulated cursor is displayed in the text editor; In response to the user's selection operation on a preset editing component within the text editor, a visual element block corresponding to the selection operation is displayed at the current display position of the simulated cursor; the current display position of the simulated cursor moves with the user's movement operation on the simulated cursor. Based on the data object corresponding to the visual element block, structured data is generated; The visual element blocks displayed in the text editor form a two-way binding relationship with the data object sequence in the structured data.

2. The text editing method according to claim 1, characterized in that, The text editor has an initial state and an active state. The action of inserting a simulated cursor in the text editor in response to a first trigger operation within the text editor includes: When the text editor is in the initial state, in response to the first trigger operation, an input box element is dynamically created, the input box element is inserted into the position corresponding to the first trigger operation, and the simulated cursor is displayed by controlling the focus of the input box element, so that the text editor enters the active state from the initial state.

3. The text editing method according to claim 2, characterized in that, The method further includes: In response to a second triggered action by the user outside the editing area of ​​the text editor, the simulated cursor is removed so that the text editor returns from the active state to the initial state.

4. The text editing method according to claim 1, characterized in that, The step of displaying a simulated cursor in the text editor in response to a user's first trigger operation on the text editor includes: If an existing visual element block is already displayed in the text editor, obtain the position coordinates of the first triggering operation, and calculate the logical position index where the simulated cursor should be inserted based on the position coordinates and the positional relationship between the position coordinates and the existing visual element block. Insert and display the simulated cursor according to the logical position index.

5. The text editing method according to claim 4, characterized in that, After inserting and displaying the simulated cursor according to the logical position index, the method further includes: Detect keyboard operations on the simulated cursor; When the keyboard operation is detected to be a delete operation, the previous visual element block and the data object corresponding to the visual element block are deleted according to the current display position of the simulated cursor, and the cursor is reactivated. When the keyboard operation is detected to be a directional key movement operation, the current simulated cursor is deleted, and a new simulated cursor is inserted at an adjacent position to the current display position according to the movement direction obtained by parsing the directional key movement operation.

6. The text editing method according to claim 4, characterized in that, Obtaining the location coordinates of the first triggering operation includes: If the object of the first triggering operation is the existing visual element block or the preset simulated placeholder prompt element, then the first triggering operation is determined to be an invalid operation; otherwise, the first triggering operation is determined to be a valid operation. If the first triggering operation is detected as a valid operation, the location coordinates of the first triggering operation are obtained.

7. The text editing method according to claim 1, characterized in that, The generation of structured data based on the data object corresponding to the visual element block includes: Based on the display sequence of the visual element blocks in the text editor, the data objects corresponding to the visual element blocks are combined into a data object sequence with a predetermined structure, and the structured data is generated and stored in the database. In response to the display operation of the text editor, the corresponding structured data is extracted from the database, and based on the data object sequence, the structured data is restored into a sequence of visual element blocks for display.

8. The text editing method according to any one of claims 1 to 7, characterized in that, The preset editing components include parameter editing components and operator editing components; in response to a selection operation on the preset editing components within the text editor, displaying the visual element block corresponding to the selection operation at the current display position of the simulated cursor includes: In response to a selection operation on the parameter editing component, a corresponding parameter visual element block is inserted at the current display position of the simulated cursor; In response to a selection operation on the operator editing component, a corresponding operator visual element block is inserted at the current display position of the simulated cursor.

9. A text editing device, characterized in that, include: A simulated cursor module is used to insert a simulated cursor in the text editor in response to the user's first triggering operation within the text editor; An insertion module is used to respond to the user's selection operation on a preset editing component within the text editor by inserting a visual element block corresponding to the selection operation at the current display position of the simulated cursor; the current display position of the simulated cursor moves with the user's movement operation on the simulated cursor. The generation module is used to generate structured data based on the data objects corresponding to the visual element blocks; wherein, the display sequence of the visual element blocks in the text editor forms a two-way binding relationship with the data object sequence in the structured data.

10. A storage medium, characterized in that, The storage medium stores a computer program, wherein the computer program is configured to execute the text editing method according to any one of claims 1 to 8 when it is run.

Images