CN114997119A

CN114997119A - Rich text editing method for adjusting reading effect

Info

Publication number: CN114997119A
Application number: CN202210613862.6A
Authority: CN
Inventors: 李�赫; 李世昌; 冯璐璐
Original assignee: Hangzhou Yingying Sound Technology Co ltd
Current assignee: Hangzhou Yingying Sound Technology Co ltd
Priority date: 2022-06-01
Filing date: 2022-06-01
Publication date: 2022-09-02

Abstract

The invention relates to the technical field of text editing, in particular to a rich text editing method for adjusting reading effect. The method comprises the following steps: monitoring user operation including text input or paste by a user keyboard; filtering the text format to obtain plain text data; copying the plain text data to a user view input box; the user performs marking operation in the user view input box, and simultaneously executes text editing operation; the tagging operation comprises at least one of: pause labeling, mute labeling and polyphone labeling; and after the data of the marking operation and the text editing operation of the user are obtained, re-rendering the data to the user view input box. The invention adopts DOM label to simulate the text field to edit the text, thus ensuring the flexibility and having rich and expandable functions; secondly, the system is used with a cursor, so that the development scheme is simpler and clearer, the operation delay is reduced, the use is smoother, and the system failure rate is reduced.

Description

Rich text editing method for adjusting reading effect

Technical Field

The invention relates to the technical field of text editing, in particular to a rich text editing method for adjusting reading effect.

Background

With the development of self-media and the development of TTS, the text editing requirement for adjusting reading effect is vigorous, the client side is excessively complicated to edit, and many functions redundant to common users are included, so that many multifunctional webpage version rich text editors appear, and the development of self-media, TTS and the like is promoted more flexibly and at low cost. The use requirements of users also become higher and higher standards, and the flexibility, smoothness and low failure rate become key points.

The method comprises the steps that an editor starts a text editing system, sees a text editing input box and an editing operation function button, inputs or pastes text content to be edited, the text editing system receives the input or pasted text, a text filtering processing program is operated to filter unnecessary formats to obtain filtered text, the filtered text is displayed on an interactive display interface, and the editor carries out interactive editing operation on the interactive display interface through the text editing function button; the text editing system utilizes the editing rule to assist the editing operation of editing personnel through the editing rule processing device, and the accurate text added with pause, mute and polyphone labels is obtained after editing.

Two existing editing methods are described below, and a series of obvious problems to be solved by the present invention are described:

1. the method for editing by using the text field is to input or paste the content into the text field, and the marked content is inserted behind the corresponding text position. Options marked by the method are displayed outside the text field, and an operator can easily lose the position of the operation text in the operation process; the inserted labels such as pause or polyphone characters can be displayed in the form of text characters, the labels cannot be written in the format of the css language, and the labels and the original text are mixed together to cause reading inconvenience, so that the modification efficiency is low.

2. A method for controlling text editing by a pure dom label is characterized in that a dom label is used for simulating an input frame, a cursor is simulated by the input frame to record user operation, and each character is a dom label. According to the principle, the method can realize richer functions, but page operation is blocked due to excessive dom labels, and a cursor simulated by an input frame is delayed, so that the problem that continuous operation cannot be conveniently and efficiently carried out is caused. When the method is used for copying texts in batches from software such as word or wps, redundant formats cannot be filtered well, and the text formats need to be modified manually by a user, so that the efficiency is reduced, and the method is not convenient.

In order to solve the technical problem, the rich text editing method for adjusting the reading effect is provided.

Disclosure of Invention

The invention aims to provide a rich text editing method for adjusting reading effect, which is used for solving the problems in the prior art in the background technology.

In order to achieve the purpose, the invention adopts the following technical scheme:

a rich text editing method for adjusting reading effect comprises the following steps:

step 1, monitoring user operation including text input or paste by a user keyboard;

step 2, filtering the text format to obtain plain text data;

step 3, copying the plain text data to a user view input box;

step 4, the user performs marking operation in the user view input box, and simultaneously executes text editing operation;

the tagging operation comprises at least one of: pause labeling, mute labeling and polyphone labeling;

step 5, after the marking operation data and the text editing operation data of the user are obtained, re-rendering the data to the user view input box;

and 6, analyzing and obtaining data in the user view input box by adopting a DOM-based native getChildren method.

Further preferably, in step 1, the user operation is monitored by using a js script.

Further preferably, in step 4, the method for implementing pause labeling includes:

setting a pause button, and when a user clicks the pause button, realizing the positioning mode based on the JavaScript script: displaying a popup window above a text cursor and displaying selectable pause categories;

after the user finishes selecting the pause type, the InsertNode method based on the JavaScript script is realized as follows: inserting a picture containing the pause category at a cursor;

the pause categories include: long, medium and short without pause.

Further preferably, in step 4, the method for implementing mute annotation includes:

setting an insertion mute button, and when a user clicks the insertion mute button, realizing the positioning mode based on the JavaScript script: a popup appears above a text cursor, and selectable mute duration buttons or user-defined mute duration are displayed;

after the client selects the mute time length, the InsertNode method based on the JavaScript script is realized as follows: and inserting a DOM label containing the mute time length at the cursor.

Further preferably, in step 4, the method for implementing polyphone annotation includes:

setting a polyphone button, and when a user clicks the polyphone button, realizing a positioning mode based on a JavaScript script: a popup window appears above a text cursor, and all phonetic symbols of the Chinese character are displayed;

after a client selects a phonetic symbol, the insperten node method based on the JavaScript script is realized as follows: inserting a DOM tag containing the phonetic symbol at a cursor;

the DOM tag is implemented by a contentditable attribute in the DIV tag.

The invention has at least the following beneficial effects:

the invention adopts the DOM tag to simulate the text field for text editing, thereby ensuring the flexibility, and having rich and expandable functions; secondly, the system is used with a cursor, so that the development scheme is simpler and clearer, the operation delay is reduced, the use is smoother, and the system failure rate is reduced.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.

FIG. 1 is a schematic diagram of an overall process for text editing;

FIG. 2 is a schematic diagram of pause labeling function;

FIG. 3 is a diagram illustrating an example of the pause tagging function;

FIG. 4 is a schematic diagram of a mute annotation function;

FIG. 5 is a diagram of an example of a specific mute annotation function;

FIG. 6 is a functional schematic diagram of polyphone labeling;

FIG. 7 is a diagram illustrating an example of the function of marking polyphonic characters.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

The invention relates to a rich text editing method for adjusting reading effect, which aims to facilitate a user to edit articles or information.

The core function of the whole system can be divided into the following modules for explanation: the whole text editing use process, the pause marking function, the mute marking function and the polyphone marking function. This editor needs to run on the chrome browser.

1. Text editing overall process

Specifically, referring to fig. 1, the module specifically illustrates a complete flow of implementing the technical solution. The method comprises the following steps:

1.1. monitoring the operation of a user through a js script, wherein the operation comprises user keyboard input or text pasting;

1.2. formatting data input by a user for the purpose of obtaining plain text data and preventing page layout abnormity;

1.3. displaying the formatted and filtered data on a view input box;

1.4. marking characters or blanks in an input box by a user, and acquiring an area needing marking;

1.5. the user executes editing function operation;

1.6. obtaining data after operation of a user and re-rendering the data into a view input box;

1.7. and analyzing and obtaining data in the view by using a DOM-based native getChildren method.

2. Text editor pause labeling functional principle

Referring specifically to fig. 2, the pause marking function is for visually showing the place where the pause needs to be noticed in the current text reading. The concrete implementation is as follows:

2.1. and setting a pause button, and when a user clicks the pause button, a popup window (shown in a figure 3-phi) appears above a text cursor, a selectable pause category area is shown in the popup window, and the realization mode of the popup window position is realized based on the positioning mode of a JavaScript script.

2.2. When the user finishes selecting and clicks the pause category in the popup window, a picture containing the pause category is inserted at a cursor of an input box (figure 3-c), and the picture is inserted by an insertNode method based on a JavaScript script.

3. Mute marking functional principle of text editor

Referring specifically to fig. 4, the mute function is to visually display the current text reading where muting is required. The concrete implementation is as follows:

3.1. and setting an insertion mute button, wherein when a user clicks the insertion mute button, a popup window (shown in figure 5-r) appears above a text cursor by the function of inserting the mute button, a selectable mute duration button is displayed in the popup window, and the position of the popup window is realized in a positioning mode based on a JavaScript script.

3.2. Clicking the pause category in the popup window inserts a DOM tag containing the mute time length at a cursor of an input box (figure 5-the second place), wherein the insertion mode is realized by an insertNode method based on a JavaScript script.

4. Functional principle for marking polyphone of text editor

Referring to fig. 6, the function of the polyphone labeling can bind the pronunciation of a Chinese character with the Chinese character when the Chinese character has multiple pronunciations, and visually display the pronunciation and the Chinese character in the input frame. The concrete implementation is as follows:

4.1. the polyphone button function can generate a popup window (figure 7-phi) above the selected text, all phonetic symbols of the Chinese character can be displayed in the popup window, and the popup window position is realized in a positioning mode based on a JavaScript script.

4.2. Clicking the pause category in the popup window can insert a self-defined DOM tag at the selected position (figure 7-II) of the characters of the input box, wherein the DOM tag can bind the Chinese characters and the phonetic symbols of the Chinese characters, the realization mode of the DOM tag is realized based on the content table attribute in the DIV tag, and the insertion mode of the DOM tag is realized based on the InsertNode method of the JavaScript script.

Therefore, through the design:

the label is displayed in a label mode, so that reading and searching are facilitated; and secondly, the native attribute of the development language is used, so that the performance of the page element simulation text field is improved, and the flexibility of developing multiple functions is achieved, so that a more accurate result can be obtained by using the editor. The system is used for carrying the cursor, so that the delay and the failure rate are greatly reduced. And when text content with formats (such as linefeed characters and the like) is copied, formats which influence editing can be automatically and effectively filtered, and time cost is greatly saved.

The foregoing shows and describes the general principles, essential features, and advantages of the invention. It will be understood by those skilled in the art that the present invention is not limited to the embodiments described above, which are merely illustrative of the principles of the invention, but that various changes and modifications may be made without departing from the spirit and scope of the invention, which fall within the scope of the invention as claimed. The scope of the invention is defined by the appended claims and equivalents thereof.

Claims

1. A rich text editing method for adjusting reading effect is characterized by comprising the following steps:

step 2, filtering the text format to obtain plain text data;

step 3, copying the plain text data to a user view input box;

2. The rich text editing method for adjusting reading effect according to claim 1, wherein in step 1, the user operation is monitored by using js script.

3. The rich text editing method for adjusting reading effect of claim 1, wherein in step 4, the pause labeling implementation method comprises:

the pause categories include: long, medium and short without pause.

4. The rich text editing method for adjusting reading effect according to claim 1, wherein in step 4, the mute label implementation method comprises:

5. The rich text editing method for adjusting reading effect of claim 1, wherein in step 4, the method for implementing polyphonic annotation comprises:

the DOM tag is implemented by a contentditable attribute in the DIV tag.