CN115390819A - Method and system for deeply integrating online drawing components by rich text editor - Google Patents
Method and system for deeply integrating online drawing components by rich text editor Download PDFInfo
- Publication number
- CN115390819A CN115390819A CN202211330607.7A CN202211330607A CN115390819A CN 115390819 A CN115390819 A CN 115390819A CN 202211330607 A CN202211330607 A CN 202211330607A CN 115390819 A CN115390819 A CN 115390819A
- Authority
- CN
- China
- Prior art keywords
- rich text
- data
- text editor
- unit
- function
- 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.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/33—Intelligent editors
-
- 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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Health & Medical Sciences (AREA)
- Health & Medical Sciences (AREA)
- Computational Linguistics (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Artificial Intelligence (AREA)
- Processing Or Creating Images (AREA)
- Document Processing Apparatus (AREA)
Abstract
The invention relates to a method and a system for deeply integrating online drawing components by a rich text editor, belonging to the technical field of WEB document online editing, wherein the method comprises the following steps: customizing a loading unit in the rich text editor of the online document, initializing a drawing engine, and customizing drawing information to return data to the rich text editor; invoking http communication by triggering a storage item unit, transmitting all image-text records to a server for storage, and interacting with editor operation data; and re-rendering the stored data in the editor, reloading the drawing engine by double-clicking the operation graph, processing the drawing data, visualizing the processed drawing data in the drawing unit, and continuously drawing the graph. The system is a computer program for implementing the method. The invention realizes that the rich text editor is used for drawing various types of graphic display information in the online editing process of the WEB document so as to improve the extensibility and the richness of the business function of the rich text editor.
Description
Technical Field
The invention relates to a method and a system for deeply integrating online drawing components by a rich text editor, belonging to the technical field of WEB document online editing.
Background
The document online editing technology of the modern client browser based on the rich text editor is relatively limited in the aspect of integrating drawing functions, and the functional applicability and the user experience of the modern client browser cannot be comparable with those of professional drawing tools. However, in the online document editing process, it is a common business function to insert some complex diagrams, wire-frame diagrams, flow charts, network diagrams, and the like. To meet this functional need while avoiding the differences in rich text editors used in different modules of the same software system. Therefore, how to provide a rich text editor deep integration online drawing component, which can expand the drawing capability of the rich text editor and reduce the technical development difficulty, becomes a problem to be solved urgently.
Disclosure of Invention
In order to solve the technical problems, the invention provides a method and a system for deeply integrating online drawing components by a rich text editor, wherein the specific technical scheme is as follows:
a method for a rich text editor to deeply integrate online drawing components, comprising the steps of:
step 1: customizing the add unit in a rich text editor;
step 2: the loading item unit executes an event function, starts a drawing function index, supplements an initialization principle, initializes a drawing engine, transmits drawing information into the drawing engine, and visually displays drawing units;
and step 3: and (3) customizing a drawing graph by the drawing unit, executing a storage item unit function by a click event after drawing the graph, calling a standard cross-source communication Api, and transmitting the graph drawn by the drawing unit back to the rich text editor. The rich text editor inserts and displays graphics in the content presentation area. Compiling the drawn graph into byte code data by the aid of the storage item unit function, and binding the byte code data to a data attribute value of the graph in the rich text editor;
and 4, step 4: and the storage item unit executes the event function, triggers the rich text editor to execute the recording action, and the rich text editor forms the graph and the coding information drawn by all drawing units into document graph-text data and records all the graph-text data. Then the event function transmits the document image-text data to the server through http communication, and the server stores the data in a database;
and 5: the rich text editor interacts with the server data, and user-defined document data stored in a database are obtained in an http communication mode;
step 6: and acquiring document image-text data of the server, transmitting the document image-text data to a rich text editor by the loading item unit based on the document image-text data of the server, and re-rendering and displaying the document image-text data by the rich text editor.
Further, if the graphics need to be continuously edited after the step 6, the graphics in the rich text editor bind the dblclick event, the event function converts the attribute value of the graphics data into the drawing information according to the data format of the drawing engine by triggering the event, the drawing engine is reloaded, the drawing information is transmitted to the drawing engine, the drawing engine restores the drawing information into an editable graphics unit which is visualized in the drawing unit, and the user can continuously draw or modify the graphics.
Further, the step 1 is specifically to invoke an extended function of the rich text editor standard, generate and construct a loading unit, where the loading unit includes an operation button or a function link, and the loading unit is used to trigger initialization of the drawing engine.
Further, the step 2 of starting the drawing function index specifically includes: the rich text editor transmits basic data of drawing starting to a drawing engine, and then a drawing operation interface is displayed on a drawing unit in a visual mode, and a user can draw a graph in a user-defined mode on the drawing operation interface;
initializing the drawing engine specifically includes: installing a canvas core library, registering an extended graphic library, defining a canvas data object and monitoring a mouse event function.
Further, the step 3 of returning the graph drawn by the drawing unit to the rich text editor specifically includes the following steps:
step 31: the saving item unit executes an event function, converts the graphic information into an element data attribute value, and simultaneously generates a graphic file and converts the graphic file into an html format and 8Bit byte code information;
step 32: and (4) returning the attribute value of the element data and the 8Bit byte code to a rich text editor in a function parameter mode, and visually displaying the graphic and text data of the document by the rich text editor.
A system for a rich text editor deep integration online drawing component provides a Web-side program for the rich text editor deep integration online drawing component and a server-side program for accessing data. When the system is processed and executed, the method is realized, and the Web end program comprises a loading item unit, a drawing unit, a storage item unit, an online drawing function visualization unit and an operation unit; the loading item unit is used for initializing a drawing engine for processing drawing data; the drawing unit is used for online drawing and visualization of the drawing; the storage item unit is used for storing all records of drawing data and graphic file coding information; the online drawing function visualization unit is used for providing a drawing function; the operation unit is used for calling a callback function and transmitting the callback function back to the rich text editor.
The invention has the beneficial effects that:
the method and the system realize the deep integration of the rich text editor with the online drawing component. In the process of editing the online document, some common business graphs such as complex diagrams, wire frame diagrams, flow charts, network diagrams and the like can be inserted. The rich text editor deeply integrates online drawing components, and can support unification of the rich text editors used in different modules of the same software system, so that the drawing capability of the rich text editor is expanded, and the difficulty in development of complex function technology is reduced.
The technical method can support the integration of online drawing components for any open-source rich text editor, and realizes the drawing of various types of graphic display information by using the rich text editor in the online editing process of the WEB document so as to improve the extensibility and the business function richness of the rich text editor.
Drawings
FIG. 1 is a core logic diagram of the rich text editor deep integrated online drawing component of the present invention;
FIG. 2 is a diagram of a rich text editor graphical visualization of the present invention;
FIG. 3 is a diagram of an online drawing functional unit area of the present invention.
Detailed Description
The present invention will now be described in further detail with reference to the accompanying drawings. The present embodiment uses the open source rich text editor TinyMce.
As shown in fig. 1, the rich text editor deep integration online drawing component program performs the drawing process as follows:
step S10: and the client side uses the rich text editor to compile a document on line, establishes communication with the server through the data interaction of the step S11, acquires the document and drawing data, displays the document and drawing data in the rich text editor and carries out user-defined document content data. And if the server side has no related storage data, creating initial JSON document data. Calling the rich text editor extension constructor to customize the add unit item U10, and executing the following customized codes:
/**
* @author:
* @ description editor custom Loading item button
* @ param { Funcion } onDrawGraph initialization drawing component function
* Invoking drawing component function with @ param { Funcion } editDrawGraph twice editing
* @ param { Object } tinymce rich text editor
* @return {null}
*/
const { onDrawGraph, editDrawGraph } = this
tinymce.PluginManager.add('drawGraph', function addPlugin(editor){
editor.ui.registry.addButton('drawGraphBtn', {
tooltip: 'drawing a graphic and inserting a document',
text: 'drawing',
onAction: function(api) {
onDrawGraph('draw')
}
})
editor.on('dblclick', function() {
const nodeData = editor.selection.getNode()
if (nodeData.nodeName === 'IMG' && nodeData.getAttribute('data-mxgraph')) {
editDrawGraph(nodeData.getAttribute('data-mxgraph'))
}
})
})
step S20: through the user behavior event, the onDrawGraph (initialized drawing component function) in the step S10 is called to load the drawing engine and initialize the online drawing function visualization unit U40, and the client drawing data is initialized, so that the user can start drawing after selecting a drawing template or importing a plurality of local format files (such as a visio file) of the user. The online drawing function visualization unit area is shown in fig. 3.
Step S30: after the user customizes the graphics in the online drawing unit U20, the drawing engine processes the drawing data and calls a callback function via the operation unit U50 to return to the rich text editor. The program executes the following code:
/**
* @author:
* @ description editor custom Loading item button
* @ param { Object } forceDialog initialization drawing component function
* @ param (Boolean } success secondary editing call drawing component function
* @return {null}
*/
saveFilePostDataCloseDrawDialog = function(forceDialog, success){
……
this.editor.exportToCanvas(mxUtils.bind(this, function(canvas) {
const xml = this.getFileData(true);
let imgBase64 = this.createImageDataUri(canvas, xml, 'png');
const fileData = xml.replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '\\\"')
if(imgBase64 && fileData){
top && top.postMessage({
type : 'drawGraphData',
mxgraphData: `{"highlight":"#0000ff","nav":true,"resize":true,"xml":"${fileData}","toolbar":"pages zoom layers lightbox","page":0}`,
imgBase64
},'*');
}
}),
)
……
}
Step S40: the rich text editor constructs the html-format picture from the drawing data returned in step S30, and inserts the drawing graphic file of the user into the position of the rich text cursor, as shown in fig. 2.
Step S50: according to the double-click of the user behavior, the online drawing unit U20 loaded in the rich text editor performs secondary drawing, or the item storage unit U30 is selected, and all records of the drawing data and the graphic file coding information are stored, as shown in FIG. 2.
Step S60: double-clicking the on-line drawing unit U20 event in the rich text editor can trigger the reloading drawing engine to restore the drawing information data to be visualized as the graphic coding information, and the user can continue to draw the operation behavior of the graphic.
Step S70: and communicating file data and drawing data in the rich text editor through http, converting the file data and the drawing data into 8-Bit byte codes convenient for transmission, and transmitting all records of the drawing data and the coding data of the graphic file to a server by the rich text editor.
Step S80: and the server receives and stores the document information and the operation data, and performs data interaction with the editor.
In light of the foregoing description of the preferred embodiment of the present invention, many modifications and variations will be apparent to those skilled in the art without departing from the spirit and scope of the invention. The technical scope of the present invention is not limited to the content of the specification, and must be determined according to the scope of the claims.
Claims (6)
1. A method for a rich text editor to deeply integrate online drawing components, comprising the steps of:
step 1: customizing a load item unit in a rich text editor;
step 2: loading an item unit to execute an event function, starting a drawing function index, supplementing an initialization principle, initializing a drawing engine, transmitting drawing information into the drawing engine, and visually displaying drawing units;
and step 3: the graphics are drawn by the drawing unit in a self-defined mode, after the graphics are drawn, a click event executes a storage item unit function, a standard cross-source communication Api is called, and the graphics drawn by the drawing unit are transmitted back to the rich text editor;
the rich text editor inserts and displays the graphics in the content display area;
compiling the drawn graph into byte code data by the aid of the storage item unit function, and binding the byte code data to a data attribute value of the graph in the rich text editor;
and 4, step 4: the storage item unit executes the event function, triggers the rich text editor to execute the recording action, and the rich text editor forms the graph and the coding information drawn by all the drawing units into document graph-text data and records all the graph-text data;
then, the event function transmits the document image-text data to the server through http communication, and the server stores the data in a database;
and 5: the rich text editor is interacted with data of a server side, and custom document data stored in a database are obtained in an http communication mode;
step 6: and acquiring document image-text data of the server, transmitting the document image-text data to a rich text editor by the loading item unit based on the document image-text data of the server, and re-rendering and displaying the document image-text data by the rich text editor.
2. The method of rich text editor deep integration online drawing component of claim 1, wherein: if the graph needs to be continuously edited after the step 6 is carried out, the dblclick event is bound to the graph in the rich text editor, the event function converts the attribute value of the graph data into the drawing information according to the data format of the drawing engine by triggering the event, the drawing engine is reloaded, the drawing information is transmitted to the drawing engine, the drawing engine restores the drawing information into an editable graph unit which is visualized in the drawing unit, and the user can continuously draw or modify the graph.
3. The method of rich text editor deep integration of online drawing components as recited in claim 1, wherein: specifically, the step 1 is to invoke an extended function of the rich text editor standard, generate and construct a loading unit, where the loading unit includes an operation button or a function link, and the loading unit is used to trigger initialization of a drawing engine.
4. The method of rich text editor deep integration of online drawing components as recited in claim 1, wherein: the step 2 of starting the drawing function index specifically comprises the following steps: the rich text editor transmits basic data of drawing starting to a drawing engine, and then visually displays a drawing operation interface on a drawing unit, and a user can customize a drawing graph on the drawing operation interface;
initializing the drawing engine specifically includes: installing a canvas core library, registering an extended graphic library, defining a canvas data object and monitoring a mouse event function.
5. The method of rich text editor deep integration online drawing component of claim 1, wherein: and 3, transmitting the graph drawn by the drawing unit back to the rich text editor, which specifically comprises the following steps:
step 31: the saving item unit executes an event function, converts the graphic information into an element data attribute value, and simultaneously generates a graphic file and converts the graphic file into an html format and 8Bit byte code information;
step 32: and (4) returning the attribute value of the element data and the 8Bit byte code to a rich text editor in a function parameter mode, and visually displaying the graphic and text data of the document by the rich text editor.
6. A system for a rich text editor to deeply integrate online drawing components, comprising: the system provides a Web end program of a rich text editor deep integration online drawing component and a server end program for accessing data;
when the system is processed and executed, the method according to any one of claims 1 to 5 is implemented, and the Web end program comprises a loading item unit, a drawing unit, a saving item unit, an online drawing function visualization unit and an operation unit; the loading item unit is used for initializing a drawing engine for processing drawing data; the drawing unit is used for online drawing and visualization of the drawing; the storage item unit is used for storing all records of drawing data and graphic file coding information; the online drawing function visualization unit is used for providing a drawing function; the operation unit is used for calling a callback function and transmitting the callback function back to the rich text editor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211330607.7A CN115390819B (en) | 2022-10-28 | 2022-10-28 | Method and system for deep integration of online drawing component of rich text editor |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211330607.7A CN115390819B (en) | 2022-10-28 | 2022-10-28 | Method and system for deep integration of online drawing component of rich text editor |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115390819A true CN115390819A (en) | 2022-11-25 |
| CN115390819B CN115390819B (en) | 2023-08-22 |
Family
ID=84114946
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211330607.7A Active CN115390819B (en) | 2022-10-28 | 2022-10-28 | Method and system for deep integration of online drawing component of rich text editor |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115390819B (en) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080104571A1 (en) * | 2001-02-15 | 2008-05-01 | Denny Jaeger | Graphical object programming methods using graphical directional indicators |
| CN103353863A (en) * | 2013-05-29 | 2013-10-16 | 徐华 | Text template generating method |
| CN106202027A (en) * | 2016-08-12 | 2016-12-07 | 南京都昌信息科技有限公司 | A kind of Tibetan language electronic medical record system text editor |
| CN109656665A (en) * | 2018-12-20 | 2019-04-19 | 成都四方伟业软件股份有限公司 | A kind of visual presentation method of data, component and readable storage medium storing program for executing |
| CN114064218A (en) * | 2021-11-30 | 2022-02-18 | 神州数码系统集成服务有限公司 | Mirror image generation method, system, medium and application for machine learning component |
-
2022
- 2022-10-28 CN CN202211330607.7A patent/CN115390819B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080104571A1 (en) * | 2001-02-15 | 2008-05-01 | Denny Jaeger | Graphical object programming methods using graphical directional indicators |
| CN103353863A (en) * | 2013-05-29 | 2013-10-16 | 徐华 | Text template generating method |
| CN106202027A (en) * | 2016-08-12 | 2016-12-07 | 南京都昌信息科技有限公司 | A kind of Tibetan language electronic medical record system text editor |
| CN109656665A (en) * | 2018-12-20 | 2019-04-19 | 成都四方伟业软件股份有限公司 | A kind of visual presentation method of data, component and readable storage medium storing program for executing |
| CN114064218A (en) * | 2021-11-30 | 2022-02-18 | 神州数码系统集成服务有限公司 | Mirror image generation method, system, medium and application for machine learning component |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115390819B (en) | 2023-08-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CA2650016C (en) | Modifying and formatting a chart using pictorially provided chart elements | |
| CN108984172B (en) | Interface file generation method and device | |
| US7992128B2 (en) | Computer software adaptation method and system | |
| US10592211B2 (en) | Generation of application behaviors | |
| CN109375914B (en) | Information remote interaction method and system | |
| JPWO2011052431A1 (en) | System, method, and program for editing electronic documents | |
| US20140047409A1 (en) | Enterprise application development tool | |
| US8032835B1 (en) | System and method for replacing application publisher interface branding with identity plates | |
| CA2786385A1 (en) | Pattern-based user interfaces | |
| CN111625226A (en) | Prototype-based human-computer interaction design implementation method and system | |
| US8701086B2 (en) | Simplifying analysis of software code used in software systems | |
| CN113010168B (en) | User interface generation method based on scene tree | |
| CN115390819B (en) | Method and system for deep integration of online drawing component of rich text editor | |
| CN114721567B (en) | Desktop display method and electronic equipment | |
| US20050033764A1 (en) | Interactive editor for data driven systems | |
| US10394932B2 (en) | Methods and systems for combining a digital publication shell with custom feature code to create a digital publication | |
| Tallis et al. | The Briefing Associate: A Role for COTS applications in the Semantic Web. | |
| RU2799988C2 (en) | System and method for dynamic visualization of software elements | |
| CN116088833A (en) | Method, device and equipment for creating page and readable storage medium | |
| EP1208426A2 (en) | Hierarchically structured control information editor | |
| CN118012427A (en) | Component editing method and device, electronic equipment and storage medium | |
| CN110879702A (en) | Method for realizing visual speech configuration in intelligent voice outbound system | |
| CN114327438A (en) | API interface generation method, service management system and storage medium | |
| CN115826974A (en) | Pluggable chart expansion method and device | |
| Johnson | Training Guide Programming in HTML5 with JavaScript and CSS3 (MCSD) |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |