CN112183033A - Rich text editor and editing method - Google Patents
Rich text editor and editing method Download PDFInfo
- Publication number
- CN112183033A CN112183033A CN202011061498.4A CN202011061498A CN112183033A CN 112183033 A CN112183033 A CN 112183033A CN 202011061498 A CN202011061498 A CN 202011061498A CN 112183033 A CN112183033 A CN 112183033A
- Authority
- CN
- China
- Prior art keywords
- module
- picture
- storage
- editing
- sends
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/53—Querying
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
- G06F16/53—Querying
- G06F16/538—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/151—Transformation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a rich text editor and an editing method, wherein the rich text editor comprises a receiving module, a storage module, a sending module, a display module and a picture editing module. The receiving module receives the pictures and sends the pictures to the picture editing module. The picture editing module converts the picture from base64 format into jpg format and then sends the converted picture to the storage module for storage. The sending module sends the storage path of the picture to the display module. The display module sends a secondary request to the storage module to request to acquire the picture data. And after receiving the secondary request, the storage module sends the picture data to the display module through the sending module. The invention converts the complex base64 format of the picture into the jpg format, can change a large string of character strings in the base64 format into the simple jpg format, and greatly reduces the number of the uploaded character strings, thereby easily relieving the pressure of transmitting data to the background and the storage pressure of the background.
Description
Technical Field
The invention relates to the technical field of computer mobile terminals, in particular to a rich text editor and an editing method.
Background
A Rich Text Editor, called RTE for short, is a Text Editor that can be embedded in a browser and is what you see is what you get. The existing rich text editor has the following problems when editing pictures: for example, vue (Vue is a set of progressive JavaScript frames for constructing a user interface), a lightweight rich text editor vue-quick-editor is often used, which is also very powerful, but has a disadvantage that, during and after picture uploading, the format is a long string of base64 encoding format, and transmitting a long string of base64 encoding to a background storage and processing module increases transmission pressure and storage pressure. Base64 is one of the most common encoding schemes for transmitting 8-Bit bytecodes over a network. Base64 is a method of representing binary data based on 64 printable characters.
Disclosure of Invention
The invention aims to provide a rich text editor and an editing method, which can solve the problems of transmission and storage caused by long-string base64 encoding in the process of uploading pictures in the prior art.
The purpose of the invention is realized by the following technical scheme:
in a first aspect, the present invention provides a rich text editing method, including the following steps:
step S1, the picture editing module converts the received picture from base64 format into jpg format and sends the converted picture to the storage module;
step S2, the storage module stores the picture in the jpg format and sends the storage path to the display module;
step S3, after receiving the storage path, the display module sends a secondary request to the storage module to request to acquire the picture data;
and step S4, the storage module finds corresponding picture data according to the file name and the path carried in the secondary request, the picture data is sent to the display module through the sending module, and the display module generates a graphical interface.
Further, the picture editing module converts the picture from a base64 format to a jpg format by using a formmid module, and specifically includes: selecting pictures and uploading the pictures to a receiving module; the receiving module sends the picture data of the picture to the picture editing module; the picture editing module sets a storage path by using a formmid module and renames the picture to a format of a file name jpg; and the picture editing module sends the modified file name and the corresponding picture data to the storage module.
Further, the picture editing module calls a parse method to analyze the picture data transmitted by the receiving module, so as to obtain data of the picture in base64 format; modifying the picture name to file name. jpg in the parse method; calling a rename method for renaming and setting a picture data format modification method.
Further, in step S2, the storage module stores the file name and the picture data after establishing a corresponding relationship, and generates a storage path after the storage is completed.
Further, in step S2, the secondary request carries a file name and a storage path of the requested picture.
In a second aspect, the invention provides a rich text editor, which comprises a receiving module, a storage module, a sending module, a display module and a picture editing module; the receiving module receives the pictures and sends the pictures to the picture editing module; the picture editing module converts the picture from a base64 format into a jpg format and then sends the converted picture to the storage module for storage; the sending module sends the storage path of the picture to the display module; the display module sends a secondary request to the storage module to request to acquire picture data; and the storage module receives the secondary request and then sends the picture data to the display module through the sending module.
Further, the picture editing module comprises a formmid module.
According to the rich text editor and the rich text editing method, the complex base64 format of the picture is converted into the jpg format, a large string of character strings in the base64 format can be changed into the simple jpg format, the number of the uploaded character strings is greatly reduced, and therefore the pressure of transmitting data to the background and the storage pressure of the background are easily relieved.
Drawings
FIG. 1 is a schematic diagram of a rich text editor in accordance with the present invention;
fig. 2 is a step diagram of the rich text editing method of the present invention.
Detailed Description
The embodiments of the present disclosure are described in detail below with reference to the accompanying drawings.
The embodiments of the present disclosure are described below with specific examples, and other advantages and effects of the present disclosure will be readily apparent to those skilled in the art from the disclosure in the specification. It is to be understood that the described embodiments are merely illustrative of some, and not restrictive, of the embodiments of the disclosure. The disclosure may be embodied or carried out in various other specific embodiments, and various modifications and changes may be made in the details within the description without departing from the spirit of the disclosure. It is to be noted that the features in the following embodiments and examples may be combined with each other without conflict. All other embodiments, which can be derived by a person skilled in the art from the embodiments disclosed herein without making any creative effort, shall fall within the protection scope of the present disclosure.
The rich text editor comprises a receiving module, a picture editing module, a storage module, a sending module and a display module. The receiving module receives the pictures and sends the pictures to the picture editing module. The picture editing module converts the picture from base64 format into jpg format and then sends the converted picture to the storage module for storage. The sending module sends the storage path of the picture to the display module. The display module assigns the storage path to the src attribute, sends a secondary request to the storage module to request for obtaining picture data, and after receiving the secondary request, the storage module sends the picture data to the display module through the sending module to generate a graphical interface.
SRC: sparse representation-based classifier, classification based on sparse representation. In HTML, the src attribute has the following attribute values: the URL specifying the picture/audio/video source. Absolute URL: to another web site. Relative URL: a certain file pointing to a website.
The rich text editing method comprises the following steps:
step S1, the picture editing module converts the received picture from base64 format into jpg format and sends it to the storage module.
The picture receiving process is as follows: and clicking the picture to upload on a display interface of the rich text editor, selecting a picture to be displayed, and after clicking the upload, firstly receiving the picture in the base64 format by the receiving module. The receiving module sends the picture in base64 format to the picture editing module. The picture editing module converts the picture name from base64 format to jpg format.
Further, in a preferred embodiment of the present application, the picture editing module converts the picture from a base64 format to a jpg format using a formmid module, and specifically includes: and selecting pictures to upload to a receiving module. The receiving module sends the picture data of the picture to the picture editing module. The picture editing module sets a storage path using the formulable module and renames the picture to a format of file name. And the picture editing module sends the modified file name and the corresponding picture data to the storage module.
The formmid module is a processing module used for processing pictures.
The receiving module receives picture data in base64 format.
The picture editing module calls a parse method to analyze the picture data transmitted by the receiving module to obtain data of the picture in base64 format. The picture name is then modified in the parse method to aaa. Then calling a rename method to rename and setting a picture data format modification method, so that the format and the name of the picture data can be modified. aaa represents a file name.
Through the step S1, the large string of characters in the base64 format of the picture is changed into the simple jpg format, so that the number of the uploaded strings is greatly reduced, and the pressure of transmitting data to the background and the pressure of storing the data in the background are easily reduced.
And step S2, the storage module stores the picture in the jpg format and sends the storage path to the display module.
The storage module establishes a corresponding relation between the file name and the picture data and then stores the file name and the picture data, and a storage path is generated after the storage is finished. And the storage module transmits the storage path through the transmission module.
The reason why only the storage path is sent here, not the photo book is sent directly, is that: the client needs this path for a secondary request.
And step S3, after receiving the storage path, the display module sends a secondary request to the storage module to request to acquire the picture data.
And the display module assigns the storage path to the src attribute and sends a secondary request to the storage module. The secondary request carries the file name and the storage path of the requested picture. And requesting the storage module to acquire the picture data corresponding to the file name.
And step S4, after receiving the secondary request, the storage module finds out corresponding picture data according to the file name and the path in the secondary request, sends the picture data to the display module through the sending module, and generates a graphical interface through the display module.
And the storage module analyzes the secondary request, namely the display module sends a get request to the storage module to request to acquire corresponding picture data. The storage module returns the corresponding picture data to the display module for rendering.
The above description is for the purpose of illustrating embodiments of the invention and is not intended to limit the invention, and it will be apparent to those skilled in the art that any modification, equivalent replacement, or improvement made without departing from the spirit and principle of the invention shall fall within the protection scope of the invention.
Claims (7)
1. The rich text editing method is characterized by comprising the following steps of:
step S1, the picture editing module converts the received picture from base64 format into jpg format and sends the converted picture to the storage module;
step S2, the storage module stores the picture in the jpg format and sends the storage path to the display module;
step S3, after receiving the storage path, the display module sends a secondary request to the storage module to request to acquire the picture data;
and step S4, the storage module finds corresponding picture data according to the file name and the path carried in the secondary request, the picture data is sent to the display module through the sending module, and the display module generates a graphical interface.
2. The method for editing rich text according to claim 1, wherein the picture editing module converts the picture from a base64 format to a jpg format using a formmid module, and specifically comprises: selecting pictures and uploading the pictures to a receiving module; the receiving module sends the picture data of the picture to the picture editing module; the picture editing module sets a storage path by using a formmid module and renames the picture to a format of a file name jpg; and the picture editing module sends the modified file name and the corresponding picture data to the storage module.
3. The rich text editing method according to claim 2, wherein the picture editing module calls a part method to parse the picture data sent from the receiving module to obtain data of a picture in a base64 format; modifying the picture name to file name. jpg in the parse method; calling a rename method for renaming and setting a picture data format modification method.
4. The method for editing rich text according to claim 1, wherein in step S2, the storage module stores the file name in correspondence with the picture data, and generates a storage path after the storage is completed.
5. The method for editing rich text according to claim 1, wherein in step S2, the file name and storage path of the requested picture are carried in the secondary request.
6. The rich text editor comprises a receiving module, a storage module, a sending module and a display module, and is characterized by also comprising a picture editing module; the receiving module receives the pictures and sends the pictures to the picture editing module; the picture editing module converts the picture from a base64 format into a jpg format and then sends the converted picture to the storage module for storage; the sending module sends the storage path of the picture to the display module; the display module sends a secondary request to the storage module to request to acquire picture data; and the storage module receives the secondary request and then sends the picture data to the display module through the sending module.
7. The rich text editor of claim 6 wherein said picture editing module comprises a formmid module.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011061498.4A CN112183033A (en) | 2020-09-30 | 2020-09-30 | Rich text editor and editing method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011061498.4A CN112183033A (en) | 2020-09-30 | 2020-09-30 | Rich text editor and editing method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112183033A true CN112183033A (en) | 2021-01-05 |
Family
ID=73948445
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011061498.4A Pending CN112183033A (en) | 2020-09-30 | 2020-09-30 | Rich text editor and editing method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112183033A (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170149857A1 (en) * | 2013-06-18 | 2017-05-25 | Vmware, Inc. | Systems and methods for transmitting data |
| CN106911794A (en) * | 2017-03-23 | 2017-06-30 | 福建天泉教育科技有限公司 | The method and system that a kind of picture is stored automatically |
| CN110737860A (en) * | 2019-09-20 | 2020-01-31 | 中国联合网络通信集团有限公司 | rich text picture insertion method and device |
| CN111209727A (en) * | 2019-12-31 | 2020-05-29 | 网易（杭州）网络有限公司 | Picture processing method and device, electronic equipment and storage medium |
| CN111309312A (en) * | 2018-12-10 | 2020-06-19 | 阿里巴巴集团控股有限公司 | Editing method and device of rich text object, terminal equipment and computer storage medium |
-
2020
- 2020-09-30 CN CN202011061498.4A patent/CN112183033A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20170149857A1 (en) * | 2013-06-18 | 2017-05-25 | Vmware, Inc. | Systems and methods for transmitting data |
| CN106911794A (en) * | 2017-03-23 | 2017-06-30 | 福建天泉教育科技有限公司 | The method and system that a kind of picture is stored automatically |
| CN111309312A (en) * | 2018-12-10 | 2020-06-19 | 阿里巴巴集团控股有限公司 | Editing method and device of rich text object, terminal equipment and computer storage medium |
| CN110737860A (en) * | 2019-09-20 | 2020-01-31 | 中国联合网络通信集团有限公司 | rich text picture insertion method and device |
| CN111209727A (en) * | 2019-12-31 | 2020-05-29 | 网易（杭州）网络有限公司 | Picture processing method and device, electronic equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| 紫藤萝YU: "图片base64格式转为file文件类型上传方法", 《HTTPS://WWW.CNBLOGS.COM/LUOXUEMEI/P/10843082.HTML》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP4982455B2 (en) | Mobile web service system and method | |
| US9002943B2 (en) | Subscription-based dynamic content optimization | |
| US8645491B2 (en) | Methods and apparatus for enabling a hybrid web and native application | |
| CN101040283A (en) | Form related data reduction | |
| US12120198B2 (en) | Systems for platform-independent application publishing to a web container | |
| US20100050089A1 (en) | Web browser system of mobile communication terminal, using proxy server | |
| CN111104631B (en) | Webp picture format conversion method | |
| US11151219B2 (en) | Generating rich digital documents from limited instructional data | |
| US10930288B2 (en) | Mobile device for speech input and text delivery | |
| CN103092941B (en) | The method and apparatus presenting content on an electronic device | |
| US20060218480A1 (en) | Data output method and system | |
| CN103177015B (en) | Web page image methods of exhibiting and system | |
| CN102779063A (en) | Method for providing application invocation and server | |
| CN106095598B (en) | Data processing method and client | |
| WO2018053594A1 (en) | Emoji images in text messages | |
| CN106933853A (en) | A kind of files passe processing method and processing device | |
| CN113382083A (en) | Webpage screenshot method and device | |
| CN112256990A (en) | Image processing method and device and computer readable storage medium | |
| CN114297544A (en) | Remote browsing method, device, equipment and storage medium | |
| CN117076811A (en) | Webpage export method, device, equipment and storage medium | |
| CN112183033A (en) | Rich text editor and editing method | |
| CN113542335A (en) | Information sharing method and device, electronic equipment and storage medium | |
| CN105468636A (en) | Dynamic web page picture loading method, apparatus and system | |
| CN113515213A (en) | Cursor shape synchronization method, remote browsing system, equipment and storage medium | |
| CN113824756A (en) | File processing method and device, storage medium and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210105 |
|
| RJ01 | Rejection of invention patent application after publication |