Method and apparatus for rendering code editor, and device, medium and program product

Abstract

The present disclosure relates to the technical field of computers, and in particular to a method and apparatus for rendering a code editor, and a device, a medium and a program product. The method comprises: in response to a target rendering instruction, determining a target rendering type of a code editor, wherein the target rendering type indicates the scope of rendering the code editor; on the basis of the target rendering type, acquiring, from a first document object node, a first region to be rendered, wherein the first document object node is used for storing content information to be rendered and displayed, and the first region includes the code editor; on the basis of the first region, parsing out the current designated location to be rendered; and rendering elements included in the first region to the designated location.

Description

Code editor rendering method, device, equipment, medium and program product Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method, apparatus, device, medium, and program product for rendering a code editor. Background Art

[0002] To achieve a better code editing experience on the web, two technologies are currently available. The first is to embed a complete cross-platform code editor into a web page. The other is to directly connect to the corresponding language services for different programming languages ​​by calling API interfaces on top of the most basic web code editor to provide corresponding language editing capabilities.

[0003] However, the first related technology does not support changing the position of the embedded code editor, resulting in poor customization. The second related technology requires targeted design and implementation for each programming language and does not support the code editor plug-in system. As a result, it is impossible to add more functions by installing extensions, making it difficult to meet user needs and lacking flexibility.

[0004] Summary of the Invention

[0005] In view of this, the present disclosure provides a method, apparatus, device, medium and program product for rendering a code editor to solve the problems in the related art of not supporting the change of the position of the embedded code editor, poor customization, difficulty in meeting user personalized needs, and poor flexibility.

[0006] In a first aspect, the present disclosure provides a method for rendering a code editor, the method comprising:

[0007] In response to the target rendering instruction, determining a target rendering type of the code editor, wherein the target rendering type indicates a range of rendering the code editor;

[0008] Obtaining a first area to be rendered from a first document object node according to a target rendering type, wherein the first document object node is used to store content information to be rendered and displayed, and the first area includes a code editor;

[0009] Parsing a designated location for current rendering based on the first region;

[0010] Renders the elements contained in the first area to the specified position.

[0011] In an embodiment of the present disclosure, the target rendering type of the code editor is obtained by responding to the target rendering instruction, and then the first area to be rendered is obtained from the first document object node according to the target rendering type, wherein the first document object node is used to store the content information to be rendered and displayed, and the first area contains the code editor, and then the designated position of the current rendering is parsed based on the first area, and the elements contained in the first area are rendered to the designated position. In this way, the embodiment of the present disclosure can realize efficient and complete rendering of the full-featured code editor to any position based on the first document object node, and with the help of the complete language support ecology of the code editor plug-in, targeted design is made for each programming language, so that the online code editor has complete language capabilities, and more functions can be added by installing extensions. It is highly flexible and can meet the diverse needs of users.

[0012] In an optional implementation, obtaining the first area to be rendered from the first document object node according to the target rendering type includes:

[0013] When the target rendering type is the first type, obtaining the code editor, the block area where the code editor is located, and / or the group where the code editor is located;

[0014] A first area is obtained according to the block area where the code editor is located and / or the group where the code editor is located, and the code editor.

[0015] In the embodiment of the present disclosure, the overall interface rendering can be implemented on the editing area according to the target rendering type to achieve flexible customization requirements.

[0016] In an optional implementation, obtaining the first area to be rendered from the first document object node according to the target rendering type includes:

[0017] When the target rendering type is the second type, a code editor is obtained and used as a rendering object, wherein the first area only contains the code editor.

[0018] In the disclosed embodiment, fragment rendering can be implemented on the editing area according to the target rendering type, and the code editor can be rendered only at a specified location to meet flexible customization requirements.

[0019] In an optional implementation, rendering all elements contained in the first area to a specified position includes:

[0020] Get the file path to be rendered;

[0021] Initialize the document model corresponding to the file path;

[0022] Initialize the editor model corresponding to the document model;

[0023] Calling the initialized editor model on the first document object node so that the code editor is rendered to the specified position;

[0024] Bind the initialized document model to the initialized editor model so that the file information corresponding to the file path is displayed at the specified location where the code editor is located.

[0025] In an optional embodiment, calling the initialized editor model on the first document object node so that the code editor is rendered to a specified position includes:

[0026] Get the number of times the initialized editor model is called on the first document object node;

[0027] Determine the number of code editors to be rendered based on the number of times;

[0028] When the number is greater than a preset value, each code editor is rendered to the corresponding designated position according to the mapping relationship between the code editor and the designated position.

[0029] In the embodiment of the present disclosure, according to the mapping relationship between the code editor to be rendered and the designated position, the rendering designated position corresponding to each code editor is determined, thereby achieving the purpose of rendering the code editor to any position.

[0030] In an optional implementation, parsing the currently rendered designated location based on the first region includes:

[0031] Parse the code segment corresponding to the first region;

[0032] Get the target character written at the preset position in the code segment;

[0033] Get the specified position according to the target character.

[0034] In an embodiment of the present disclosure, by modifying the layout part of the code editor, the editor area is separated from the rendering system of the code editor as an independent module, and by writing target characters at a preset position, the first area in the first document object node is rendered separately to a specified position on the web page.

[0035] In an optional embodiment, the method further includes:

[0036] Obtaining a second area to be hidden from a second document object node according to a target rendering type, wherein the second document object node is used to store content information to be hidden;

[0037] Performs a hide operation on all elements contained in the second range.

[0038] In the disclosed embodiment, the platform portion not related to editing is hidden to ensure maximum compatibility, making the page display more concise and the front-end user viewing the editing area more intuitive.

[0039] In a second aspect, the present disclosure provides a device for rendering a code editor, the device comprising:

[0040] A first acquisition module is configured to determine a target rendering type of the code editor in response to a target rendering instruction, wherein the target rendering type indicates a range of rendering the code editor;

[0041] A second acquisition module is configured to acquire, according to a target rendering type, a first area to be rendered from a first document object node, wherein the first document object node is used to store content information to be rendered and displayed, and the first area includes a code editor;

[0042] A parsing module, configured to parse a designated location of current rendering based on the first region;

[0043] The rendering module is used to render the elements contained in the first area to a specified position.

[0044] In a third aspect, the present disclosure provides a computer device comprising: a memory and a processor, the memory and the processor being communicatively connected to each other, the memory storing computer instructions, and the processor executing the code editor rendering method of the first aspect or any corresponding embodiment thereof by executing the computer instructions.

[0045] In a fourth aspect, the present disclosure provides a computer-readable storage medium having computer instructions stored thereon, the computer instructions being used to enable a computer to execute the code editor rendering method of the first aspect or any corresponding embodiment thereof.

[0046] In a fifth aspect, the present disclosure provides a computer program product, including computer instructions, which are used to enable a computer to execute the code editor rendering method of the above-mentioned first aspect or any corresponding embodiment thereof. BRIEF DESCRIPTION OF THE DRAWINGS

[0047] In order to more clearly illustrate the specific embodiments of the present disclosure or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the specific embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present disclosure. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0048] FIG1 is a flow chart of a method for rendering a code editor according to an embodiment of the present disclosure;

[0049] FIG2 is a schematic diagram showing rendering to a specified position under the first type according to an embodiment of the present disclosure;

[0050] FIG3 is a schematic diagram showing rendering to a specified position under the second type according to an embodiment of the present disclosure;

[0051] FIG4 is a structural block diagram of a device for rendering a code editor according to an embodiment of the present disclosure;

[0052] FIG5 is a schematic diagram of the hardware structure of a computer device according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0053] To make the purpose, technical solutions, and advantages of the embodiments of the present disclosure more clear, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the drawings in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, not all of the embodiments. Based on the embodiments of the present disclosure, all other embodiments obtained by those skilled in the art without making creative efforts shall fall within the scope of protection of the present disclosure.

[0054] To achieve a better code editing experience on the web, there are currently two related technologies: the first is to embed it into the web page. The other is to directly provide language editing capabilities for different programming languages ​​by calling API interfaces on the most basic web code editor.

[0055] However, the first related technology cannot hide redundant page elements. The webpage embedded in the integrated development environment must be a complete page, including the original file tree, menu bar, bottom bar, and other elements. These cannot be completely hidden or partially modified, making it difficult to unify the editor with other interface elements and poorly customizable. Webpage embedding consumes a lot of resources and has low performance. It does not support changing the position of the embedded code editor, making it difficult to customize. The second related technology requires a targeted design and implementation for each programming language and does not support a code editor plug-in system. As a result, it is impossible to add more functionality by installing extensions, making it difficult to meet user needs and inflexible.

[0056] In order to solve the above problems, according to an embodiment of the present disclosure, a method embodiment of a code editor rendering is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0057] In this embodiment, a method for rendering a code editor is provided. FIG1 is a flow chart of the method for rendering a code editor according to an embodiment of the present disclosure. As shown in FIG1 , the method can be applied to the front-end side of a browser. The method flow includes the following steps:

[0058] Step S101 : determining a target rendering type of a code editor in response to a target rendering instruction, wherein the target rendering type indicates a range of rendering the code editor.

[0059] Optionally, in an embodiment of the present disclosure, the rendering type of the code editor can be set in advance in the background. In this case, the front end obtains the target rendering type of the code editor by responding to the target rendering instruction of the background. In addition, it is also possible to obtain the trigger operation performed by any user on the front end of the web page on multiple rendering types in the page, and obtain the selected target rendering type by responding to the target rendering instruction corresponding to the trigger operation. It is understandable that the rendering range of the code editor can be divided into multiple rendering types according to different scenario requirements.

[0060] Step S102 : obtaining a first area to be rendered from a first document object node according to a target rendering type, wherein the first document object node is used to store content information to be rendered and displayed, and the first area includes a code editor.

[0061] Optionally, if there is a first document object node with MW as class in the web page, all objects stored in the node will be rendered and displayed. At this time, the object to be rendered is determined by obtaining the first area to be rendered from the first document object node.

[0062] The first area here can be rendered as a complete whole, including tabs, breadcrumb navigation, panel splits, toolbar buttons and code editor parts, or it can be rendered as a fragment, which only contains the code editor.

[0063] Step S103: parse the first area to obtain a designated location for current rendering.

[0064] Optionally, a designated position that can be rendered and displayed is parsed from the first region. That is, in the disclosed embodiment, the target user can freely render the first region at any position on the front-end web page, and the arbitrary position is the designated position parsed from the first region.

[0065] Step S104: Render the elements contained in the first area to a designated position.

[0066] Optionally, after determining the designated position, all elements contained in the first area may be rendered to the designated position.

[0067] It should be noted that, after rendering the elements in the first area to the specified position, the embodiment of the present disclosure enables the editor part to be freely rendered to any specified position on the page. By transforming the layout part of the code editor, the editor area is separated from the rendering system of the code editor as an independent module. The editor part after splitting and mounting can retain the core capabilities of the editor such as syntax highlighting, code completion, smart prompts, code folding, code jumping, etc., and supports functional expansion through code editor plug-ins.

[0068] In an embodiment of the present disclosure, by responding to a target rendering instruction, the target rendering type of the code editor is obtained, and the first area to be rendered is obtained from the first document object node, wherein the first document object node is used to store the content information to be rendered and displayed, and the first area contains the code editor. Then, based on the first area, the designated position of the current rendering is parsed, and the elements contained in the first area are rendered to the designated position. In this way, the embodiment of the present disclosure can efficiently and completely render a full-featured code editor to any location based on the first document object node, and with the help of the complete language support ecosystem of the code editor plug-in, targeted design is made for each programming language, so that the online code editor has complete language capabilities, and more functions can be added by installing extensions. It is highly flexible and can meet the diverse needs of users.

[0069] In some optional implementations, obtaining the first area to be rendered from the first document object node according to the target rendering type includes:

[0070] When the target rendering type is the first type, obtaining the code editor, the block area where the code editor is located, and / or the group where the code editor is located;

[0071] A first area is obtained according to the block area where the code editor is located and / or the group where the code editor is located, and the code editor.

[0072] Optionally, when it is determined that the target rendering type selected by the target user is the first type (i.e., the complete rendering range), the code editor and the block area where the code editor is located and / or the group where the code editor is located can be obtained, that is, it is necessary to obtain the code editor as the basis, and then the block area where the code editor is located and the group where the code editor is located are used as the first area to be rendered and rendered to the web page, such as including tabs, breadcrumb navigation, panel segmentation, toolbar buttons and code editor. Or, on the premise of obtaining the code editor as the basis, the block area where the code editor is located is used as the first area to be rendered and rendered to the web page, or, on the premise of obtaining the code editor as the basis, the group where the code editor is located is used as the first area to be rendered and rendered to the web page. As shown in Figure 2, the figure is an overall editing area interface rendered by an interface composed of the block area where the code editor is located, the group where the code editor is located and the code editor (i.e., the shaded part in Figure 2).

[0073] In the embodiment of the present disclosure, the overall interface rendering can be implemented on the editing area according to the target rendering type to achieve flexible customization requirements.

[0074] In some optional implementations, obtaining the first area to be rendered from the first document object node according to the target rendering type includes:

[0075] When the target rendering type is the second type, a code editor is obtained and used as a rendering object, wherein the first area only contains the code editor.

[0076] Optionally, when it is determined that the target rendering type selected by the target user is the second type (i.e., the fragment rendering range), the split code editor is used as the minimum rendering unit and rendered at a specified location on the web page. Since the code editor supports different types of document models, the fragment rendering range also supports targeted rendering for different document models. At the same time, under the fragment rendering range, multiple code editors are supported for rendering on the web page. As shown in Figure 3, the shaded part in the figure is the code editor that supports rendering under the fragment rendering range. There are currently two code editors: Code Editor 1 and Code Editor 2.

[0077] In the disclosed embodiment, fragment rendering can be implemented on the editing area according to the target rendering type, and the code editor can be rendered only at a specified location to meet flexible customization requirements.

[0078] In some optional implementations, rendering all elements contained in the first area to a specified position includes:

[0079] Get the file path to be rendered;

[0080] Initialize the document model corresponding to the file path;

[0081] Initialize the editor model corresponding to the document model;

[0082] Calling the initialized editor model on the first document object node so that the code editor is rendered to the specified position;

[0083] Bind the initialized document model to the initialized editor model so that the file information corresponding to the file path is displayed at the specified location where the code editor is located.

[0084] Optionally, since the fragment rendering range also supports targeted rendering for different document models, the specific rendering process is: receiving the file path to be rendered; initializing the document model corresponding to the file path according to the file path, such as the EditorInput document model; receiving the first document object node container position of the code editor to be rendered; initializing the editor model corresponding to the document model, such as the TextFileEditor editor model; calling the initialized editor model on the first document object node container to be rendered, so that the code editor is rendered to the specified position; calling the setInput method of the editor model to bind the initialized document model and the initialized editor model, so that the file information corresponding to the file path is displayed at the specified position where the code editor is located.

[0085] In some optional implementations, calling the initialized editor model on the first document object node so that the code editor is rendered to a specified position includes:

[0086] Get the number of times the initialized editor model is called on the first document object node;

[0087] Determine the number of code editors to be rendered based on the number of times;

[0088] When the number is greater than a preset value, each code editor is rendered to the corresponding designated position according to the mapping relationship between the code editor and the designated position.

[0089] Optionally, if multiple code editors need to be rendered on the web page, the number of corresponding rendered code editors can be determined based on the number of times the initialized editor model is called on the first document object node. For example, if the editor model is called twice, the number of code editors to be rendered is 2.

[0090] When it is determined that the number of code editors to be rendered is greater than a preset value (for example, 1), it is necessary to obtain the specified location to which each code editor needs to be rendered based on the mapping relationship between the code editor and the specified location, thereby achieving the purpose of rendering the code editor to any specified location on the web page.

[0091] In the embodiment of the present disclosure, according to the mapping relationship between the code editor to be rendered and the designated position, the rendering designated position corresponding to each code editor is determined, thereby achieving the purpose of rendering the code editor to any position.

[0092] In some optional implementations, resolving the currently rendered designated location based on the first region includes:

[0093] Parse the code segment corresponding to the first region;

[0094] Get the target character written at the preset position in the code segment;

[0095] Get the specified position according to the target character.

[0096] Optionally, in the embodiment of the present disclosure, when determining the designated location to which the first region needs to be rendered, the final rendering region can be obtained according to the designated location passed in as a parameter. For example, if you want to render the entire editor to the location of separated-editor, you need to first obtain the code segment corresponding to the first region and perform code parsing, and then find 's location, and then get The target character to be written, for example, the target character currently being written is "separated-editor", and the result is<div id="separated-editor"style="width:100%;height:100%;"class="MW"> At this time, the front-end can know that separated-editor is the designated position where the first area is rendered as a whole. At this time, the height and width of the rendering area are both 100%, and the class attribute is MW.

[0097] In an embodiment of the present disclosure, by modifying the layout part of the code editor, the editor area is separated from the rendering system of the code editor as an independent module, and by writing target characters at a preset position, the first area in the first document object node is rendered separately to a specified position on the web page.

[0098] In some optional embodiments, the method further comprises:

[0099] Obtaining a second area to be hidden from a second document object node according to a target rendering type, wherein the second document object node is used to store content information to be hidden;

[0100] Performs a hide operation on all elements contained in the second range.

[0101] Optionally, in an embodiment of the present disclosure, another node is present on the webpage, which can be a second document object node for storing content information to be hidden. All information stored under this node will be hidden and will not be displayed to the target user. Therefore, for the front-end, it performs a hiding operation on all elements contained in the second area, so that the user does not need to consider the platform parts that are not relevant to editing.

[0102] In the disclosed embodiment, the platform portion not related to editing is hidden to ensure maximum compatibility, making the page display more concise and the front-end user viewing the editing area more intuitive.

[0103] In this embodiment, a device for rendering a code editor is also provided, which is used to implement the above-mentioned embodiments and preferred implementations. Details that have already been described will not be repeated here. As used below, the term "module" may refer to a combination of software and / or hardware that implements a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, implementation using hardware, or a combination of software and hardware, is also possible and contemplated.

[0104] This embodiment provides a code editor rendering device, as shown in FIG4 , including:

[0105] A first acquisition module 401 is configured to determine a target rendering type of the code editor in response to a target rendering instruction, wherein the target rendering type indicates a range of rendering the code editor;

[0106] A second acquisition module 402 is configured to acquire a first region to be rendered from a first document object node according to a target rendering type, wherein the first document object node is used to store content information to be rendered and displayed, and the first region includes a code editor;

[0107] A parsing module 403 is configured to parse the first region to determine a designated location for current rendering;

[0108] The rendering module 404 is configured to render the elements contained in the first area to a specified position.

[0109] In an embodiment of the present disclosure, by responding to a target rendering instruction, the target rendering type of the code editor is obtained, and the first area to be rendered is obtained from the first document object node, wherein the first document object node is used to store the content information to be rendered and displayed, and the first area contains the code editor. Then, based on the first area, the designated position of the current rendering is parsed, and the elements contained in the first area are rendered to the designated position. In this way, the embodiment of the present disclosure can efficiently and completely render a full-featured code editor to any location based on the first document object node, and with the help of the complete language support ecosystem of the code editor plug-in, targeted design is made for each programming language, so that the online code editor has complete language capabilities, and more functions can be added by installing extensions. It is highly flexible and can meet the diverse needs of users.

[0110] In some optional implementations, the second acquisition module 402 includes:

[0111] A first acquisition submodule is configured to acquire a code editor, a block area where the code editor is located, and / or a group where the code editor is located when the target rendering type is the first type;

[0112] The submodule is obtained, and is used to obtain the first area according to the block area where the code editor is located and / or the group where the code editor is located, and the code editor.

[0113] In some optional implementations, the second acquisition module 402 includes:

[0114] The second acquisition submodule is configured to acquire a code editor and use the code editor as a rendering object when the target rendering type is the second type, wherein the first area only includes the code editor.

[0115] In some optional implementations, the rendering module 404 includes:

[0116] The third acquisition submodule is used to obtain the file path to be rendered;

[0117] The first initialization submodule is used to initialize the document model corresponding to the file path;

[0118] The second initialization submodule is used to initialize the editor model corresponding to the document model;

[0119] A calling submodule is used to call the initialized editor model on the first document object node, so that the code editor is rendered to a specified position;

[0120] The display submodule is used to bind the initialized document model and the initialized editor model so that the file information corresponding to the file path is displayed at the specified location where the code editor is located.

[0121] In some optional implementations, calling the submodule includes:

[0122] An acquiring unit, configured to acquire the number of times the initialized editor model is called on the first document object node;

[0123] A determination unit, configured to determine the number of code editors to be rendered according to the number of times;

[0124] The rendering unit is used to render each code editor to the corresponding designated position according to the mapping relationship between the code editor and the designated position when the number is greater than a preset value.

[0125] In some optional implementations, the parsing module 403 includes:

[0126] A parsing submodule, configured to parse the code segment corresponding to the first region;

[0127] A fourth acquisition submodule is used to acquire a target character written at a preset position in the code segment;

[0128] Get the submodule, which is used to get the specified position according to the target character.

[0129] In some optional embodiments, the device further comprises:

[0130] a fifth acquisition submodule, configured to acquire, according to a target rendering type, a second region to be hidden from a second document object node, wherein the second document object node is used to store content information to be hidden;

[0131] The hiding submodule is used to perform a hiding operation on all elements contained in the second area.

[0132] The further functional description of each of the above modules and units is the same as that of the above corresponding embodiments and will not be repeated here.

[0133] The device for rendering the code editor in this embodiment is presented in the form of a functional unit, where the unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that executes one or more software or fixed programs, and / or other devices that can provide the above functions.

[0134] The embodiment of the present disclosure further provides a computer device having the code editor rendering device shown in FIG4 .

[0135] Please refer to Figure 5, which is a structural diagram of a computer device provided by an optional embodiment of the present disclosure. As shown in Figure 5, the computer device includes: one or more processors 10, a memory 20, and interfaces for connecting various components, including high-speed interfaces and low-speed interfaces. The various components are connected to each other using different buses and can be installed on a common motherboard or installed in other ways as needed. The processor can process instructions executed in the computer device, including instructions stored in or on the memory to display graphical information of the GUI on an external input / output device (such as a display device coupled to the interface). In some optional embodiments, if necessary, multiple processors and / or multiple buses can be used together with multiple memories and multiple memories. Similarly, multiple computer devices can be connected, and each device provides some necessary operations (for example, as a server array, a group of blade servers, or a multi-processor system). Figure 5 takes a processor 10 as an example.

[0136] The processor 10 may be a central processing unit, a network processor, or a combination thereof. The processor 10 may further include a hardware chip. The hardware chip may be an application-specific integrated circuit, a programmable logic device, or a combination thereof. The programmable logic device may be a complex programmable logic device, a field programmable gate array, a general purpose array logic, or any combination thereof.

[0137] The memory 20 stores instructions that can be executed by at least one processor 10, so as to enable at least one processor 10 to execute the method shown in the above embodiment.

[0138] The memory 20 may include a program storage area and a data storage area, wherein the program storage area may store an operating system and application programs required for at least one function; the data storage area may store data created based on the use of the computer device, etc. In addition, the memory 20 may include a high-speed random access memory, and may also include a non-transient memory, such as at least one disk storage device, a flash memory device, or other non-transient solid-state storage device. In some optional embodiments, the memory 20 may optionally include a memory remotely located relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0139] The memory 20 may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a flash memory, a hard disk or a solid-state drive; the memory 20 may also include a combination of the above types of memory.

[0140] The computer device further includes a communication interface 30 for the computer device to communicate with other devices or a communication network.

[0141] The embodiments of the present disclosure also provide a computer-readable storage medium. The above-mentioned method according to the embodiments of the present disclosure can be implemented in hardware, firmware, or implemented as a computer code that can be recorded in a storage medium, or implemented as a computer code that is originally stored in a remote storage medium or a non-temporary machine-readable storage medium and downloaded through a network and will be stored in a local storage medium, so that the method described herein can be stored in such software processing on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. Among them, the storage medium can be a magnetic disk, an optical disk, a read-only storage memory, a random access memory, a flash memory, a hard disk or a solid-state drive, etc.; further, the storage medium can also include a combination of the above-mentioned types of memory. It can be understood that a computer, a processor, a microprocessor controller or programmable hardware includes a storage component that can store or receive software or computer code. When the software or computer code is accessed and executed by a computer, a processor or hardware, the method shown in the above embodiment is implemented.

[0142] Part of the present disclosure may be applied as a computer program product, such as a computer program instruction, which, when executed by a computer, can call or provide the method and / or technical solution according to the present disclosure through the operation of the computer. Those skilled in the art should understand that the form in which the computer program instruction exists in a computer-readable medium includes but is not limited to a source file, an executable file, an installation package file, etc. Accordingly, the way in which the computer program instruction is executed by the computer includes but is not limited to: the computer directly executes the instruction, or the computer compiles the instruction and then executes the corresponding compiled program, or the computer reads and executes the instruction, or the computer reads and installs the instruction and then executes the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium that can be accessed by the computer.

[0143] Although the embodiments of the present disclosure have been described with reference to the accompanying drawings, those skilled in the art may make various modifications and variations without departing from the spirit and scope of the present disclosure, and such modifications and variations are all within the scope defined by the appended claims.

Claims

1. A code editor rendering method, comprising: In response to a target rendering instruction, determining a target rendering type of the code editor, wherein the target rendering type indicates a range of rendering the code editor; According to the target rendering type, obtaining a first area to be rendered from a first document object node, wherein the first document object node is used to store content information to be rendered and displayed, and the first area includes the code editor; Parsing a designated location for current rendering based on the first area; Render the elements contained in the first area to the specified position.

2. The method according to claim 1, wherein obtaining the first area to be rendered from the first document object node according to the target rendering type comprises: When the target rendering type is the first type, obtaining the code editor, and the block area where the code editor is located and / or the group where the code editor is located; The first area is obtained according to the block area where the code editor is located and / or the group where the code editor is located, and the code editor.

3. The method according to claim 1, wherein obtaining the first area to be rendered from the first document object node according to the target rendering type comprises: When the target rendering type is the second type, the code editor is acquired and used as a rendering object, wherein the first area only includes the code editor.

4. The method according to claim 3, wherein rendering all elements contained in the first area to the specified position comprises: Get the file path to be rendered; Initialize the document model corresponding to the file path; Initialize the editor model corresponding to the document model; Invoking the initialized editor model on the first document object node so that the code editor is rendered to the specified position; Bind the initialized document model and the initialized editor model so that the file path The corresponding file information is displayed at the designated location where the code editor is located.

5. The method according to claim 4, wherein calling the initialized editor model on the first document object node so that the code editor is rendered to the specified position comprises: Obtain the number of times the initialized editor model is called on the first document object node; Determining the number of code editors to be rendered according to the number of times; When the number is greater than a preset value, each code editor is rendered to the corresponding designated position according to the mapping relationship between the code editor and the designated position.

6. The method according to claim 2 or 3, wherein the step of resolving the designated location of the current rendering based on the first area comprises: parsing the code segment corresponding to the first region; Obtaining a target character written at a preset position in the code segment; The designated position is obtained according to the target character.

7. The method according to claim 1, further comprising: According to the target rendering type, obtaining a second area to be hidden from a second document object node, wherein the second document object node is used to store content information to be hidden; A hiding operation is performed on all elements contained in the second area.

8. A device for rendering a code editor, comprising: A first acquisition module is configured to determine a target rendering type of the code editor in response to a target rendering instruction, wherein the target rendering type indicates a range for rendering the code editor; A second acquisition module is configured to acquire, according to the target rendering type, a first area to be rendered from a first document object node, wherein the first document object node is used to store content information to be rendered and displayed, and the first area includes the code editor; A parsing module, configured to parse a designated location currently rendered based on the first area; A rendering module is used to render the elements contained in the first area to the specified position.

9. A computer device comprising: A memory and a processor, wherein the memory and the processor are connected to each other in communication, the memory stores computer instructions, and the processor executes the computer instructions to execute the rights The method for rendering a code editor according to any one of claims 1 to 7.

10. A computer-readable storage medium having computer instructions stored thereon, wherein the computer instructions are used to enable a computer to execute the code editor rendering method according to any one of claims 1 to 7.

11. A computer program product comprising computer instructions, wherein the computer instructions are configured to cause a computer to execute the code editor rendering method according to any one of claims 1 to 7.

Images