CN115390819B - Method and system for deep integration of online drawing component of rich text editor - Google Patents
Method and system for deep integration of online drawing component of rich text editor Download PDFInfo
- Publication number
- CN115390819B CN115390819B CN202211330607.7A CN202211330607A CN115390819B CN 115390819 B CN115390819 B CN 115390819B CN 202211330607 A CN202211330607 A CN 202211330607A CN 115390819 B CN115390819 B CN 115390819B
- Authority
- CN
- China
- Prior art keywords
- rich text
- data
- text editor
- unit
- graphic
- 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.)
- Active
Links
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 deep integration of an online drawing component of a rich text editor, belonging to the technical field of online editing of WEB documents, wherein the method comprises the following steps: the online document rich text editor comprises a customizing loading unit, a drawing engine and a customizing drawing information feedback unit, wherein the customizing loading unit is used for initializing the drawing engine and customizing drawing information and transmitting the drawing information back to the rich text editor; the http communication is invoked by triggering the save item unit, and all image-text records are transmitted to a server for storage and interaction with the operation data of the editor; the stored data is re-rendered in the editor, the graphic is reloaded by double-clicking operation, the graphic is visualized in the drawing unit after processing the drawing data, and the graphic can be continuously drawn. The system is a computer program for realizing the method. The invention realizes that the rich text editor is used for drawing multiple types of graphic display information in the online editing process of the WEB document so as to improve the ductility and business function richness of the rich text editor.
Description
Technical Field
The invention relates to a method and a system for deep integration of an online drawing component of a rich text editor, belonging to the technical field of online editing of WEB documents.
Background
Modern client browser document online editing technology based on rich text editor is limited in integrating drawing functions, and functional applicability and user experience are not comparable with professional drawing tools. However, in the process of editing online documents, inserting some complex charts, line diagrams, flowcharts, network diagrams and the like are very common business functions. To meet this functional requirement while avoiding the variability of the rich text editors used in different modules of the same software system. Therefore, how to provide a deep integrated online drawing component of a rich text editor, which can realize the expansion of the drawing capability of the rich text editor and the reduction of 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 deep integration of a rich text editor on-line drawing components, which have the following specific technical scheme:
a method of deep integration of a rich text editor into an online drawing component comprising the steps of:
step 1: customizing an add-on unit in a rich text editor;
step 2: the loading item unit executes event functions, starts drawing function indexes, supplements an initialization principle, initializes a drawing engine, transmits drawing information to the drawing engine, and displays the drawing information in a visual way;
step 3: after the drawing unit self-defines the drawing graph and draws the graph, the click event executes the function of the save item unit, calls the standard cross-source communication Api and returns the graph drawn by the drawing unit to the rich text editor. The rich text editor inserts and exposes graphics in the content presentation area. The save item unit function compiles the drawn graph into byte code data, and binds the byte code data to the data attribute value of the graph in the rich text editor;
step 4: the storage item unit executes an event function, triggers the rich text editor to execute a 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 document graph-text data. Then the event function transmits the document image-text data to a server through http communication, and the server stores the data in a database;
step 5: the rich text editor interacts with the data of the server, and custom document data stored in a database is obtained by using an http communication mode;
step 6: the method comprises the steps of obtaining document image-text data of a server side, transmitting the document image-text data to a rich text editor by an loading item unit based on the document image-text data of the server side, and re-rendering and displaying the document image-text data by the rich text editor.
Further, if the graphic needs to be edited continuously after entering the step 6, the graphic in the rich text editor binds the dblclick event, by triggering the event, the event function converts the graphic data attribute value into drawing information according to the drawing engine data format, reloads the drawing engine, transmits the drawing information to the drawing engine, the drawing engine restores the drawing information into an editable graphic unit, and the editable graphic unit is visualized in the drawing unit, so that the user can continue drawing or modifying the graphic.
Further, the step 1 specifically is to call an extended function of the rich text editor standard, generate and construct a load item unit, where the load item unit includes an operation button or a functional link, and the load item 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 for starting drawing to the drawing engine, and then the drawing operation interface is visually displayed on the drawing unit, so that a user can self-define drawing graphics on the drawing operation interface;
the initializing drawing engine specifically includes: installing a canvas core library, registering an extended graphic library, defining canvas data objects and monitoring mouse event functions.
Further, the step 3 of returning the graphic drawn by the drawing unit to the rich text editor specifically includes the following steps:
step 31: the storage 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 html format and 8Bit byte code information;
step 32: and the element data attribute value and the 8Bit byte codes are transmitted back to a rich text editor in a function parameter mode, and the rich text editor displays the document image-text data in a graphic visualization mode.
A system for a rich text editor deep integrated online drawing component provides a Web end program for the rich text editor deep integrated online drawing component and a server end program for accessing data. The Web end program comprises a loading item unit, a drawing unit, a save 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 on-line drawing and visualization of 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; and the operation unit is used for calling a callback function and transmitting the callback function back to the rich text editor.
The beneficial effects of the invention are as follows:
the method and the system realize the deep integration of the rich text editor on-line drawing component. In the process of editing the online document, common business graphics such as complex charts, line block diagrams, flowcharts, network diagrams and the like can be inserted. The rich text editor is deeply integrated with the online drawing component, 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 editors is expanded, and the development difficulty of complex function technology is reduced.
The technical method can support the integration of any open-source rich text editor with an online drawing component, and realize the drawing of multi-type graphic display information by using the rich text editor in the online editing process of the WEB document so as to improve the ductility and business function richness of the rich text editor.
Drawings
FIG. 1 is a core logic diagram of a rich text editor deep integration online drawing component of the present invention;
FIG. 2 is a diagram of a rich text editor graphic visualization of the present invention;
FIG. 3 is a diagram of the on-line drawing function unit area of the present invention.
Detailed Description
The invention will now be described in further detail with reference to the accompanying drawings. This embodiment uses the open source rich text editor tinyce.
As shown in fig. 1, the rich text editor deep integration online drawing component program performs the drawing process as follows:
step S10: the client uses the rich text editor to compile the document online, establishes communication with the server through data interaction in the step S11, acquires the document and drawing data, displays the document and drawing data in the rich text editor, and performs user-defined document content data. If the server side has no relevant storage data, the initial JSON document data is created. Invoking the rich text editor extended constructor custom load item unit item U10, executing the custom code as follows:
/**
* @author:
* Editor custom load button
* @ param { function } onDrawGraph initializing drawing component functions
* Drawing component function is called in @ param { function } editdraw graph secondary 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, 'draw graphics and insert 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: after the user action event, the ondraw graph (initializing drawing component function) in step S10 is called to load the drawing engine to initialize the on-line 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 files with multiple formats (such as a visio file) locally. The on-line drawing function visualization unit area is shown in fig. 3.
Step S30: after the user customizes the graph by the online drawing unit U20, the drawing engine processes the drawing data, and then calls the callback function through the operation unit U50 to be returned to the rich text editor. The program executes the following code:
/**
* @author:
* Editor custom load button
* @ param { Object } foredialogs initialize drawing component functions
* @ param { Boolean } success secondary edit call drawing component functions
* @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 drawing data returned in step S30 into an html format picture, and inserts the drawing graphic file of the user into the position of the rich text cursor, as shown in fig. 2.
Step S50: the on-line drawing unit U20 in the rich text editor will be loaded for secondary drawing or the save item unit U30 will be selected for storing all records of drawing data and graphic file encoding information according to the user's actions double-clicking, as shown in fig. 2.
Step S60: double clicking on the on-line drawing unit U20 event in the rich text editor can trigger the reloading drawing engine to process drawing information data and restore the drawing information data into graphic coding information visualization, and a user can continue to draw the operation behavior of the graphic.
Step S70: and (3) communicating the document data and the drawing data in the rich text editor through http, converting the document data and the drawing data into 8Bit byte codes convenient to transmit, and transmitting all records of the drawing data and the graphic file code data to a server by the rich text editor.
Step S80: the server receives and stores the document information and the operation data, and performs data interaction with the editor.
With the above-described preferred embodiments according to the present invention as an illustration, the above-described descriptions can be used by persons skilled in the relevant art to make various changes and modifications without departing from the scope of the technical idea of the present invention. The technical scope of the present invention is not limited to the description, but must be determined according to the scope of claims.
Claims (2)
1. A method for deep integration of a rich text editor into an online drawing component, comprising the steps of:
step 1: customizing an loading item unit in a rich text editor, calling an extension function of a rich text editor standard, generating and constructing the loading item unit, wherein the loading item unit comprises an operation button or a functional link, and the loading item unit is used for triggering the initialization of a drawing engine;
step 2: the loading item unit executes event functions, starts drawing function indexes, supplements an initialization principle, initializes a drawing engine, transmits drawing information to the drawing engine, and displays the drawing information in a visual way;
the starting drawing function index specifically includes: the rich text editor transmits basic data for starting drawing to the drawing engine, and then the drawing operation interface is visually displayed on the drawing unit, so that a user can self-define drawing graphics on the drawing operation interface; the initializing drawing engine specifically includes: installing a canvas core library, registering an extension graphic library, defining canvas data objects and monitoring mouse event functions;
step 3: after the drawing unit self-defines the drawing graph, executing a save item unit function by a click event, 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 the graphics in the content display area;
the save item unit function compiles the drawn graph into byte code data, and binds the byte code data to the data attribute value of the graph in the rich text editor;
the graphic drawn by the drawing unit is returned to the rich text editor, and the method specifically comprises the following steps of:
step 31: the storage 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 html format and 8Bit byte code information;
step 32: the element data attribute value and the 8Bit byte codes are transmitted back to a rich text editor in a function parameter mode, and the rich text editor displays document image-text data in a graphic visualization mode;
step 4: the storage item unit executes an event function and triggers the rich text editor to execute a 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 document graph-text data;
then, the event function transmits document image-text data to a server through http communication, and the server stores the data in a database;
step 5: the rich text editor interacts with the data of the server, and custom document data stored in a database is obtained by using an http communication mode;
step 6: acquiring document image-text data of a server side, transmitting the document image-text data to a rich text editor by an loading item unit based on the document image-text data of the server side, and re-rendering and displaying the document image-text data by the rich text editor;
if the graphic needs to be edited continuously after entering the step 6, the graphic in the rich text editor is bound with a dblclick event, the event function converts the graphic data attribute value into drawing information according to the drawing engine data format by triggering the event, the drawing engine is reloaded, the drawing information is transmitted into the drawing engine, the drawing engine restores the drawing information into an editable graphic unit, the editable graphic unit is visualized in the drawing unit, and a user can continuously draw or modify the graphic.
2. A system for deep integration of a rich text editor into an online drawing component, comprising: the system provides a Web end program of the deep integration online drawing component of the rich text editor and a server end program for accessing data;
when the system is processed and executed, the method of claim 1 is realized, and the Web end program comprises a loading item unit, a drawing unit, a save 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 on-line drawing and visualization of 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; and 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 CN115390819A (en) | 2022-11-25 |
| CN115390819B true 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 (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
Family Cites Families (3)
| 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 |
| CN103353863B (en) * | 2013-05-29 | 2016-09-28 | 徐华 | A kind of text template generates method |
| CN106202027A (en) * | 2016-08-12 | 2016-12-07 | 南京都昌信息科技有限公司 | A kind of Tibetan language electronic medical record system text editor |
-
2022
- 2022-10-28 CN CN202211330607.7A patent/CN115390819B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
|---|---|
| CN115390819A (en) | 2022-11-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10379710B2 (en) | Modeling system for graphic user interface | |
| US7522176B2 (en) | Dynamically generating mini-graphs to represent style and template icons | |
| US5675753A (en) | Method and system for presenting an electronic user-interface specification | |
| CA2650016C (en) | Modifying and formatting a chart using pictorially provided chart elements | |
| CN108984172B (en) | Interface file generation method and device | |
| Bigelow et al. | Iterating between tools to create and edit visualizations | |
| KR102016161B1 (en) | Method and system for simplified knowledge engineering | |
| CN111625226B (en) | Prototype-based man-machine interaction design implementation method and system | |
| Limbourg et al. | Addressing the mapping problem in user interface design with UsiXML | |
| JP2008146664A (en) | Menu item display method and device | |
| JPH08501401A (en) | Object-oriented notification framework system | |
| JPWO2011052431A1 (en) | System, method, and program for editing electronic documents | |
| JPWO2006051905A1 (en) | Data processing apparatus and data processing method | |
| CA2391756A1 (en) | Accessing a remote iseries or as/400 computer system from the eclipse integrated development environment | |
| US20050076330A1 (en) | Browser-based editor for dynamically generated data | |
| JP4577847B2 (en) | Authoring systems, software, and methods for creating content | |
| CN112214218A (en) | High-performance and high-efficiency Sketch component library generation and management scheme and system | |
| CA2786385A1 (en) | Pattern-based user interfaces | |
| Ferreira et al. | The semiotics of user interface redesign | |
| JPWO2006051904A1 (en) | Data processing apparatus and data processing method | |
| CN106055535B (en) | Chart generation method and device | |
| CN115390819B (en) | Method and system for deep integration of online drawing component of rich text editor | |
| CN112905944A (en) | Page online dynamic generation method and device, electronic equipment and readable storage medium | |
| JPWO2006051906A1 (en) | Archiver device, data acquisition device, and data acquisition method | |
| Gallesio et al. | Embedding a Scheme interpreter in the Tk toolkit |
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 |