CN114518876A - Visual editing and generating method of HTML webpage source code - Google Patents

Visual editing and generating method of HTML webpage source code Download PDF

Info

Publication number
CN114518876A
CN114518876A CN202210148108.XA CN202210148108A CN114518876A CN 114518876 A CN114518876 A CN 114518876A CN 202210148108 A CN202210148108 A CN 202210148108A CN 114518876 A CN114518876 A CN 114518876A
Authority
CN
China
Prior art keywords
html
visual
source code
editing
webpage
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
Application number
CN202210148108.XA
Other languages
Chinese (zh)
Inventor
臧主峰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Individual
Original Assignee
Individual
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Individual filed Critical Individual
Priority to CN202210148108.XA priority Critical patent/CN114518876A/en
Publication of CN114518876A publication Critical patent/CN114518876A/en
Pending legal-status Critical Current

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/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Document Processing Apparatus (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a visual editing and generating method of HTML webpage source codes, which comprises the following steps: analyzing an initial HTML webpage source code to be edited, adding an extended identification attribute to an HTML tag, and generating an identification HTML source code; analyzing and identifying HTML source codes, replacing all webpage script/CSS style tags with non-repeated HTML annotation tags, and generating and editing HTML source codes; reading marked HTML source codes, inserting a visual operation support library and a script/style label mapping table, and generating visual HTML source codes; loading a visual HTML source code and an editing HTML source code into a webpage, and rendering the visual HTML source code and the editing HTML source code into a visual operation webpage and a hidden iframe respectively; a user executes various visual operations through a webpage; the visual operation supporting library synchronizes visual operation change information of a user to elements with the same extension identification in the hidden iframe; and the visual operation support library reads the HTML content text from the hidden iframe, restores the script/style tag and generates a visual editing result HTML source code. The problem that the existing editor cannot perform complex HTML webpage source code visual editing is solved.

Description

Visual editing and generating method of HTML webpage source code
Technical Field
The invention relates to the technical field of webpage visual editing, in particular to a visual editing and generating method of HTML webpage source codes.
Background
Currently, many web technology-based HTML source code visualization editors exist to enable users to input and edit content in a what-you-see-is-what-you-get manner, and provide intuitive and friendly interactive operation support for web applications.
However, these editors can only support simple HTML tag fragment source codes, cannot support complex HTML web page source codes (including web scripts, CSS styles, import libraries, and the like), and cannot support web application requirements that support both visual HTML editing and insertion of web scripts and CSS styles.
Disclosure of Invention
Therefore, the invention provides a visual editing and generating method of HTML webpage source codes, which aims to solve the problem that the existing editor cannot carry out visual editing on complex HTML webpage source codes.
In order to achieve the above purpose, the invention provides the following technical scheme:
the invention discloses a visual editing and generating method of HTML webpage source codes, which comprises the following steps:
s1, analyzing the original HTML webpage source code to be edited, adding an extended identification attribute to the HTML label, and generating an identification HTML source code;
S2, analyzing and identifying the HTML source code, replacing all webpage script/CSS style labels with nonrepeating HTML annotation labels, generating an edited HTML source code, and simultaneously saving the replaced content as a script/style label mapping table taking the HTML annotation labels as keywords;
s3, reading the marked HTML source code, inserting a visual operation support library and a script/style label mapping table, and generating a visual HTML source code;
s4, loading the visible HTML source codes and the editing HTML source codes into a web browser, and rendering the visible HTML source codes and the editing HTML source codes into a visual operation web page and a hidden iframe respectively;
s5, the user executes the inserting, selecting and editing visual operation by using the function provided by the visual operation support library in the visual operation webpage;
s6, synchronizing change information, recording the visual operation change information of a user by a visual operation support library, recording the extended identification attribute value of an operation HTML element, and synchronously updating the operation change information to the HTML element with the same extended identification attribute value in a hidden iframe;
s7, the visual operation support library reads the HTML content text from the hidden iframe, restores the script/style label and finally generates the visual editing result HTML source code.
Further, the visual operation support library is a web page script library which provides visual editing operation functions, and the functions include: inserting elements, selecting elements, editing contents and editing styles.
Further, in the step S5, the visualization operation support library immediately renders the insertion, selection, and editing operations to the visualization operation web page.
Furthermore, in the process of synchronously changing information, when the operation of inserting the webpage script and the CSS style is performed, one-to-one corresponding HTML annotation tag is generated for the webpage script and the CSS style, inserted into the hidden iframe and stored in the script/style tag mapping table.
Further, in the step S7, the visualization operation support library reads the HTML content text from the hidden iframe, deletes the extended identifier attributes of all HTML tags therein, replaces all HTML annotation tags existing in the script/style tag mapping table with corresponding script/style tags, and finally generates the visualization editing result HTML source code.
The invention has the following advantages:
the invention discloses a visual editing and generating method of HTML webpage source codes, which not only supports the HTML label fragment source codes which are simple to visually edit, but also supports the HTML webpage source codes which are complex to visually edit, supports the inserting webpage scripts and CSS styles, immediately visually reflects the script logic and style effects, and finally generates the HTML source codes of the editing results. The web application can realize the functions of supporting visual editing of complex HTML webpage source codes, supporting the insertion of webpage scripts and CSS styles and finally generating visual editing result HTML source codes, and meets the requirements of multi-scenario application.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below. It should be apparent that the drawings in the following description are merely exemplary and that other implementation drawings may be derived from the drawings provided to one of ordinary skill in the art without inventive effort.
The structures, ratios, sizes, and the like shown in the present specification are only used for matching with the contents disclosed in the specification, so as to be understood and read by those skilled in the art, and are not used to limit the conditions that the present invention can be implemented, so that the present invention has no technical significance, and any structural modifications, changes in the ratio relationship, or adjustments of the sizes, without affecting the effects and the achievable by the present invention, should still fall within the range that the technical contents disclosed in the present invention can cover.
Fig. 1 is an overall flowchart architecture diagram of a method for visually editing and generating source codes of an HTML web page according to an embodiment of the present invention;
Detailed Description
The present invention is described in terms of particular embodiments, other advantages and features of the invention will become apparent to those skilled in the art from the following disclosure, and it is to be understood that the described embodiments are merely exemplary of the invention and that it is not intended to limit the invention to the particular embodiments disclosed. All other embodiments, which can be obtained by a person skilled in the art without making any creative effort based on the embodiments in the present invention, belong to the protection scope of the present invention.
Examples
The embodiment discloses a visual editing and generating method of TML webpage source codes, which comprises the following steps:
s1, analyzing the original HTML webpage source code to be edited, adding an extended identification attribute to the HTML label, and generating an identification HTML source code;
s2, analyzing and identifying the HTML source code, replacing all webpage script/CSS style labels with nonrepeating HTML annotation labels, generating an edited HTML source code, and simultaneously saving the replaced content as a script/style label mapping table taking the HTML annotation labels as keywords;
s3, reading the marked HTML source code, inserting a visual operation support library and a script/style label mapping table, and generating a visual HTML source code;
s4, loading the visible HTML source codes and the editing HTML source codes into a web browser and rendering the visible HTML source codes and the editing HTML source codes into a visual operation web page and a hidden iframe respectively;
s5, the user executes the inserting, selecting and editing visual operation by using the function provided by the visual operation support library in the visual operation webpage;
s6, synchronizing change information, recording the visual operation change information of a user by a visual operation support library, recording the extended identification attribute value of an operation HTML element, and synchronously updating the operation change information to the HTML element with the same extended identification attribute value in a hidden iframe;
S7, the visual operation support library reads the HTML content text from the hidden iframe, restores the script/style label and finally generates the visual editing result HTML source code.
The visual operation support library is a webpage script library for providing visual editing operation functions, and the functions comprise: insert elements, select elements, edit content, edit styles, and the like.
In step S5, the visual operation support library immediately renders the insertion, selection, and editing operations to the visual operation web page, thereby implementing synchronization of operations and completing the visual operation in each step.
In the process of synchronously changing information, for the operation of inserting the webpage script and the CSS style, corresponding HTML annotation labels are generated for the operation, inserted into the hidden iframe and stored into the script/style label mapping table.
In step S7, the visualization operation support library reads the HTML content text from the hidden iframe, deletes the extended identifier attributes of all HTML tags in the hidden iframe, replaces all HTML annotation tags existing in the script/style tag mapping table with corresponding script/style tags, and finally generates the HTML source code of the visualization editing result.
The method for visually editing and generating the source code of the HTML webpage disclosed by the embodiment supports not only the simple HTML tag fragment source code but also the complex HTML webpage source code, supports inserting a webpage script and a CSS style, immediately visually reflects the script logic and style effect, and finally generates the HTML source code of the editing result. The web application can support the functions of visually editing complex HTML webpage source codes, supporting inserting webpage scripts and CSS styles, and finally generating visual editing result HTML source codes, and the multi-scene application requirements are met.
Although the invention has been described in detail with respect to the general description and the specific embodiments, it will be apparent to those skilled in the art that modifications and improvements may be made based on the invention. Accordingly, it is intended that all such modifications and alterations be included within the scope of this invention as defined in the appended claims.

Claims (5)

1. A visual editing and generating method for HTML webpage source codes is characterized in that the method comprises the following steps:
s1, analyzing the initial HTML webpage source code to be edited, adding an extended identification attribute to the HTML label, and generating an identification HTML source code;
s2, analyzing and marking the HTML source code, replacing all webpage script/CSS style labels with non-repeated HTML annotation labels, generating an edited HTML source code, and simultaneously saving the replaced content as a script/style label mapping table taking the HTML annotation labels as keywords;
s3, reading the marked HTML source codes, inserting a visual operation support library and a script/style label mapping table, and generating visual HTML source codes;
s4, loading the visible HTML source code and the editing HTML source code into a web browser, and rendering the visible HTML source code and the editing HTML source code into a visual operation web page and a hidden iframe respectively;
S5, the user executes the inserting, selecting and editing visual operation by using the function provided by the visual operation support library in the visual operation web page;
s6, synchronizing change information, recording the visual operation change information of a user by a visual operation support library, recording the extended identification attribute value of an operation HTML element, and synchronously updating the operation change information to the HTML element with the same extended identification attribute value in a hidden iframe;
and S7, the visual operation support library reads the HTML content text from the hidden iframe, restores the script/style label and finally generates a visual editing result HTML source code.
2. The method for visually editing and generating source code of an HTML web page according to claim 1, wherein said visual operation support library is a web script library providing visual editing operation functions, the functions include: inserting elements, selecting elements, editing content and editing styles.
3. The method for visually editing and generating source code of an HTML web page as claimed in claim 1, wherein in step S5, the visual operation support library immediately renders the insertion, selection and editing operation to the visual operation web page.
4. The method for visually editing and generating source codes of an HTML webpage as claimed in claim 1, wherein in the process of synchronously changing information, if the operation of inserting the webpage script and the CSS style is performed, a one-to-one HTML annotation tag is generated for the operation, and is inserted into the hidden iframe, and is stored in the script/style tag mapping table.
5. The method for visually editing and generating source code of an HTML web page as claimed in claim 1, wherein in step S7, the visual operation support library reads HTML content text from the hidden iframe, deletes the extended identification attribute of all HTML tags therein, replaces all HTML annotation tags existing in the script/style tag mapping table with corresponding script/style tags, and finally generates the HTML source code of the visual editing result.
CN202210148108.XA 2022-02-17 2022-02-17 Visual editing and generating method of HTML webpage source code Pending CN114518876A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210148108.XA CN114518876A (en) 2022-02-17 2022-02-17 Visual editing and generating method of HTML webpage source code

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210148108.XA CN114518876A (en) 2022-02-17 2022-02-17 Visual editing and generating method of HTML webpage source code

Publications (1)

Publication Number Publication Date
CN114518876A true CN114518876A (en) 2022-05-20

Family

ID=81598709

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210148108.XA Pending CN114518876A (en) 2022-02-17 2022-02-17 Visual editing and generating method of HTML webpage source code

Country Status (1)

Country Link
CN (1) CN114518876A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20240028661A1 (en) * 2022-07-21 2024-01-25 Google Llc Augmented ui generated through natural language query and semantic data connections

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20240028661A1 (en) * 2022-07-21 2024-01-25 Google Llc Augmented ui generated through natural language query and semantic data connections

Similar Documents

Publication Publication Date Title
RU2409844C2 (en) Markup-based extensibility for user interfaces
US7137066B2 (en) Binary cache file format for themeing the visual appearance of a computer system
CN101937427B (en) Browser-based system and method for content edition and issue
US9495134B2 (en) Methods and apparatus for code segment handling
US8510647B2 (en) Computer programming and markup language source code visualization tool
US8996621B2 (en) Asynchronous comment updates
US6263347B1 (en) System for linking data between computer and portable remote terminal and data linking method therefor
GB2423387A (en) Application-Generic Sequence Diagram Generator Driven by a Non-Proprietary Language
US10331761B2 (en) Method, computer readable storage medium and computer system for efficient agenda drafting, synchronization and display
CN101196818A (en) Fast graphical developing system
CN101667118A (en) Method and device for multi-language version development and replacement
CN106294493A (en) Realize the method and device of document format conversion
CN114518876A (en) Visual editing and generating method of HTML webpage source code
KR20140096225A (en) Interactive multimedia E-book authoring apparatus and method
KR101649822B1 (en) Apparatus and method for building web-page
US8037015B2 (en) Flexible interface using scalable vector graphics with metalevel palette
CN114527979A (en) Method and system for generating multi-end form interactive page
CN115309476A (en) Browser-based ofd file display and editing method
JP2015200953A (en) image display device
KR100346983B1 (en) Web editor for wireless internet and operating method therefor
CN115994523B (en) Rich-format digital teaching material content numbering method and system
CN111723556B (en) Method for realizing different product release modes through rich text editing
KR100577611B1 (en) The method of composing for multimedia
CN116151208A (en) Method, device and storage medium for generating electronic document with embedded template
CN118627475A (en) Display method, device, equipment and medium for special characters

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