Media editing method and device, computer and readable storage medium

Abstract

The embodiment of the application discloses a media editing method and device, a computer and a readable storage medium. The method comprises the following steps: in response to an editing operation instruction for a media editing area, updating and displaying a target editing image edited based on the editing operation instruction in the media editing area, and acquiring image sequence information of the target editing image in N editing images; N is a positive integer; the media editing area contains N editing images; acquiring source code data displayed by a language editing area, acquiring an image syntax code block from the source code data, positioning a target code position indicated by the image sequence information in the image syntax code block; generating a target sentence corresponding to the target editing image based on the editing operation instruction, displaying updated source code data in the language editing area based on the target code position; and the updated source code data comprises the target sentence. By using the application, the synchronization updating efficiency and effect of images and codes can be improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more particularly to a media editing method, apparatus, computer, and readable storage medium. Background Technology

[0002] Markdown is a lightweight markup language that allows you to create documents in an easy-to-read and easy-to-write plain text format. It allows you to add formatting elements to plain text documents, making them more readable. Markdown documents can be opened and edited by various applications and can be created on any operating system, meaning Markdown is highly versatile. Therefore, more and more users are using Markdown to create websites, documents, or tags. However, when editing images in Markdown, users need to find the image code and then update it to achieve the edit. When the image code is complex, both finding and editing it can be time-consuming, increasing the difficulty of image editing. Summary of the Invention

[0003] This application provides a media editing method, apparatus, computer, and readable storage medium, which can improve the efficiency and effectiveness of image and code synchronization updates.

[0004] One embodiment of this application provides a media editing method, the method comprising:

[0005] In response to editing operation commands for the media editing area, update and display the target edited image in the media editing area based on the editing operation commands;

[0006] Obtain the image order information of the target edited image among N edited images; N is a positive integer; the media editing area contains N edited images;

[0007] Obtain the source code data displayed in the language editing area, extract the image syntax code block from the source code data, and locate the target code position indicated by the image sequence information in the image syntax code block;

[0008] The target statement corresponding to the target edit image is generated based on the editing operation instructions. The updated source code data is displayed in the language editing area based on the target code location. The updated source code data includes the target statement.

[0009] One embodiment of this application provides a media editing method, the method comprising:

[0010] In response to a selection operation on an editable object in the media editing area, display the functional components associated with the editable object selected in the media editing area;

[0011] In response to a trigger action on any functional component, update the display in the media editing area to show the first edit object edited based on the trigger action;

[0012] Update the source code data displayed in the language editing area; the updated source code data includes the first statement corresponding to the first editing object.

[0013] The method also includes:

[0014] In response to an object insertion operation targeting the media editing area, display the second edit object inserted as indicated by the object insertion operation in the media editing area;

[0015] Insert and display the second statement corresponding to the second editing object in the source code data displayed in the language editing area.

[0016] Specifically, in response to an object insertion operation targeting the media editing area, displaying the second editable object inserted as indicated by the object insertion operation in the media editing area includes:

[0017] In response to a target-triggered action in the media editing area, display the object insertion component;

[0018] In response to a triggering operation for the object insertion component, a second edited object inserted by the object insertion component is displayed at the object rendering position triggered by the target triggering operation in the media editing area; the triggering operation for the object insertion component is used to trigger the object insertion operation.

[0019] Specifically, in response to an object insertion operation targeting the media editing area, displaying the second editable object inserted as indicated by the object insertion operation in the media editing area includes:

[0020] In response to a triggering action on the object insertion component, display the candidate area; the candidate area refers to the area used to display the object being edited.

[0021] In response to a selection operation on a target region within a candidate region, display the second edited object inserted in the target region, triggered by the triggering operation on the object insertion component.

[0022] One embodiment of this application provides a media editing apparatus, the apparatus comprising:

[0023] The image display module is used to respond to editing operation commands for the media editing area and update and display the target edited image in the media editing area based on the editing operation commands;

[0024] The sequence acquisition module is used to acquire the image order information of the target edited image among N edited images; N is a positive integer; the media editing area contains N edited images;

[0025] The code acquisition module is used to acquire the source code data displayed in the language editing area and extract the image syntax code block from the source code data;

[0026] The location module is used to locate the target code position indicated by the image sequence information in the image syntax code block;

[0027] The statement generation module is used to generate target statements corresponding to the target edited image based on editing operation instructions;

[0028] The code display module is used to display updated source code data in the language editing area based on the location of the target code; the updated source code data includes the target statements.

[0029] The image display module includes:

[0030] The component display unit is used to respond to a selection operation on N editable images in the media editing area and to display functional components associated with the editable image selected by the selection operation in the media editing area.

[0031] The instruction generation unit is used to generate editing operation instructions in response to trigger operations on functional components;

[0032] The image update unit is used to update the edit image selected by the selection operation based on the editing operation instruction, to obtain the target edit image, and to update and display the target edit image in the media editing area.

[0033] The editing operation command is an image insertion command; the image display module includes:

[0034] The image insertion unit is used to respond to an image insertion command for a media editing area, determine the image insertion position based on the image insertion command, and display the target edited image indicated by the image insertion command in the area indicated by the image insertion position in the media editing area.

[0035] The sequential acquisition module includes:

[0036] The label acquisition unit is used to acquire the image labels corresponding to N edited images respectively, and to acquire the target image label corresponding to the target edited image edited by the editing operation instruction;

[0037] The tag lookup unit is used to find the target image tag from N image tags and determine the sequence number of the target image tag in the N image tags as the image order information of the target edited image in the N edited images.

[0038] The location positioning module includes:

[0039] The quantity acquisition unit is used to obtain the number M of the image syntax code blocks; M is a positive integer.

[0040] The first position determination unit is used to, if M and N are the same, associate the N image syntax code blocks with the N edited images according to the first display order of the N image syntax code blocks in the language editing area and the second display order of the N edited images in the media editing area, and locate the target code position indicated by the image order information in the N image syntax code blocks according to the association result; one image syntax code block is associated with one edited image;

[0041] The second position determination unit is further configured to, if M is (N-1) and the editing operation instruction is an image insertion instruction, search for the first syntax code block and the second syntax code block corresponding to the image sequence information in the image syntax code block, and determine the area between the first syntax code block and the second syntax code block as the target code position; the M image syntax code blocks include the first syntax code block and the second syntax code block, and the first syntax code block and the second syntax code block are adjacent in the M image syntax code blocks;

[0042] The third position determination unit is also used to obtain the code attribute of each image syntax code block if M and N are different and the editing operation instruction is not an image insertion instruction, perform logical parsing on the M image syntax code blocks according to the code attribute, and locate the target code position indicated by the image order information in the parsed image syntax code blocks.

[0043] The third position determination unit includes:

[0044] The annotation filtering subunit is used to filter the annotation syntax code blocks in the M image syntax code blocks if there are annotation syntax code blocks with the code attribute of annotation code, to obtain valid syntax code blocks, and to locate the target code position indicated by the image order information in the valid syntax code blocks.

[0045] The hypertext parsing subunit is used to parse the hypertext grammar code block based on the hypertext code logic if there is a hypertext code block among the M image grammar code blocks with the code attribute of hypertext code attribute, and obtain the image preview information in the hypertext grammar code block.

[0046] The preview positioning subunit is used to locate the target code position in the parsed image syntax code block based on the image sequence information and image preview information.

[0047] Among them, the image preview information is used to indicate the number of editable images corresponding to the hypertext syntax code block and the image preview status, including the image display status and the image hidden status;

[0048] This preview positioning sub-unit includes:

[0049] The code splitting subunit is used to split the hypertext syntax code block into P virtual sub-code blocks based on image preview information, and obtain the image preview status corresponding to each virtual sub-code block; P is a positive integer, P refers to the number of edit images corresponding to the hypertext syntax code block;

[0050] The code selection sub-unit is used to find the target virtual sub-code block whose image preview state is the image display state from P virtual sub-code blocks;

[0051] The code positioning subunit is used to locate the target code position indicated by the image order information in the target virtual sub-code block and in the image syntax code blocks other than the hypertext syntax code block among the M image syntax code blocks.

[0052] The statement generation module includes:

[0053] The statement acquisition unit is used to acquire the hypertext language statement of the target image to be edited by the editing operation instructions;

[0054] The attribute extraction unit is used to extract image attributes of the target edited image from hypertext language statements; the hypertext language statements are statements belonging to the first markup language.

[0055] The template adding unit is used to obtain the image statement template corresponding to the second markup language, add the image attributes as parameters of the image statement template to the image statement template, and obtain the target statement corresponding to the target edit image.

[0056] The attribute extraction unit includes:

[0057] The basic extraction subunit is used to extract the basic image attributes of the target image to be edited from hypertext language statements; the basic image attributes are used to describe the basic information of the target image to be edited.

[0058] The style extraction subunit is used to obtain the hypertext code segment to which the hypertext language statement belongs, and to obtain the image style attributes of the target edit image from the hypertext code segment;

[0059] The attribute determination subunit is used to determine the image attributes of the target edited image based on the image's basic attributes and image style attributes.

[0060] The code display module includes:

[0061] The code insertion unit is used to insert the target statement corresponding to the target edited image into the source code data displayed in the language editing area if the editing operation command is an image insertion command;

[0062] The code replacement unit is used to update the image syntax code block located at the target code position in the source code data to the target statement in the language editing area if the editing operation instruction is not an image insertion instruction.

[0063] The device also includes:

[0064] The source code update module is used to respond to the update operation for the first code statement in the source code data, update the source code data, and obtain update marker data;

[0065] The interface preview module is used to convert updated markup data into data to be rendered, and to render the preview interface corresponding to the data to be rendered in the language editing area; the data to be rendered is data belonging to the first markup language.

[0066] One embodiment of this application provides a media editing apparatus, the apparatus comprising:

[0067] A component display module is used to respond to a selection operation on an editing object in a media editing area and display functional components associated with the editing object selected by the selection operation in the media editing area.

[0068] An object display module is configured to respond to a trigger operation for any of the aforementioned functional components and update the display of a first edit object edited based on the trigger operation in the media editing area;

[0069] The code update module is used to update the source code data displayed in the language editing area; the updated source code data includes the first statement corresponding to the first editing object.

[0070] The device also includes:

[0071] The insertion trigger module is used to respond to object insertion operations in the media editing area and display the second editing object inserted as indicated by the object insertion operation in the media editing area;

[0072] The statement insertion module is used to insert a second statement corresponding to the second editing object into the source code data displayed in the language editing area.

[0073] The insertion trigger module includes:

[0074] The region trigger unit is used to respond to target trigger operations for the media editing region and display the object insertion component;

[0075] A position display unit is used to respond to a trigger operation on the object insertion component and display the second edited object inserted by the object insertion component at the object rendering position triggered by the target trigger operation in the media editing area; the trigger operation on the object insertion component is used to trigger the object insertion operation.

[0076] The insertion trigger module includes:

[0077] The region display unit is used to respond to trigger operations on the object insertion component and display candidate regions; the candidate region refers to the region used to insert and edit objects.

[0078] The region selection unit is used to respond to a selection operation on a target region within a candidate region, and displays the second edit object inserted by the triggering operation on the object insertion component in the target region of the media editing region.

[0079] One embodiment of this application provides a computer device, including a processor, a memory, and an input / output interface;

[0080] The processor is connected to a memory and an input / output interface, respectively. The input / output interface is used to receive and output data, the memory is used to store computer programs, and the processor is used to call the computer programs so that the computer device containing the processor executes the media editing method in one aspect of the embodiments of this application.

[0081] One aspect of this application provides a computer-readable storage medium storing a computer program adapted to be loaded and executed by a processor, such that a computer device having the processor performs the media editing method of one aspect of this application.

[0082] One aspect of this application provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the methods provided in various optional embodiments of this application. In other words, when the computer instructions are executed by the processor, they implement the methods provided in various optional embodiments of this application.

[0083] Implementing the embodiments of this application will have the following beneficial effects:

[0084] In this embodiment, in response to an editing operation command for the media editing area, the target edited image edited based on the editing operation command is updated and displayed in the media editing area. The image order information of the target edited image among N edited images is obtained; N is a positive integer; the media editing area contains N edited images. Source code data displayed in the language editing area is obtained, and image syntax code blocks are extracted from the source code data. The target code position indicated by the image order information is located within the image syntax code blocks. A target statement corresponding to the target edited image is generated based on the editing operation command. Based on the target code position, the updated source code data is displayed in the language editing area; the updated source code data includes the target statement. Under this method, the computer device can simultaneously display a media editing area and a language editing area. The media editing area is used to display the rendered content corresponding to the code displayed in the language editing area, and the language editing area is used to display the code corresponding to the rendered content displayed in the media editing area. This allows the user to preview the rendered content corresponding to the edited code in real time while editing code in the language editing area, enabling the user to adjust the language editing area based on the rendered content, thereby improving the efficiency and effectiveness of media editing. Furthermore, it adds editing functions to the media editing area, allowing users to directly insert images or update already displayed images. The updated image is recorded as the target editing image, and the computer device can echo the updated code corresponding to the target editing image in the language editing area. This makes it easier to edit the required images even when there are many images, improving the synchronous display efficiency of the media editing area and the language editing area, and enhancing the efficiency and effectiveness of media editing. Attached Figure Description

[0085] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0086] Figure 1 This is a schematic diagram of a media editing scenario provided in an embodiment of this application;

[0087] Figure 2 This is a flowchart of a media editing method provided in an embodiment of this application;

[0088] Figure 3a This is a schematic diagram of a media editing scenario provided in an embodiment of this application;

[0089] Figure 3bThis is a schematic diagram of a media insertion scenario provided in an embodiment of this application;

[0090] Figure 4 This is a schematic flowchart of an image insertion method provided in an embodiment of this application;

[0091] Figure 5 This application provides a flowchart of the media editing area update interaction.

[0092] Figure 6 This is an interactive diagram of a language editing area update scenario provided in an embodiment of this application;

[0093] Figure 7a This is a schematic diagram of an object update method provided in an embodiment of this application;

[0094] Figure 7b This is a schematic flowchart of an object insertion method provided in an embodiment of this application;

[0095] Figure 8 This is a schematic diagram of a media editing device provided in an embodiment of this application;

[0096] Figure 9 This is another media editing device provided in the embodiments of this application;

[0097] Figure 10 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0098] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0099] In the embodiments of this application, please refer to Figure 1 , Figure 1 This is a schematic diagram of a media editing scenario provided in an embodiment of this application. For example... Figure 1As shown, the computer device displays an application editing page 101, which includes a language editing area 1011 and a media editing area 1012. The computer device displays source code data in the language editing area 1011 and displays an edited image in the media editing area 1012, which is rendered based on the source code data. In response to editing operation commands issued to the media editing area 1012, the computer device can update the display of the target edited image in the media editing area 1012 based on the editing operation command. Optionally, the editing operation command can be an image insertion command or an image update command for the edited image already displayed in the media editing area 1012. In other words, the computer device can respond to editing operation commands for the media editing area 1012 and update the content displayed in the media editing area 1012, so that after the update, the media editing area 1012 displays the target edited image. If the media editing area 1012 also includes edited images other than those edited by the editing operation commands, then after the update, the media editing area 1012 will also display edited images other than those edited by the editing operation commands. Further, the number of edited images displayed in the media editing area 1012 after the update is denoted as N, where N is a positive integer, and the N edited images include the target edited image. The computer device can obtain the image order information of the target edited image among the N edited images. For example, if the N edited images are considered as an image sequence, the sequence number corresponding to the target edited image in the image sequence composed of the N edited images can be determined as the image order information of the target edited image among the N edited images. The computer device retrieves the source code data displayed in the language editing area 1011, extracts the image syntax code block from the source code data, and locates the target code position indicated by the image sequence information within the image syntax code block. The computer device can generate a target statement corresponding to the target edited image based on editing operation instructions. This target statement is displayed when the target edited image is rendered. Based on the target code position, the computer device can display updated source code data 102 in the language editing area 1011, which includes the target statement.

[0100] Through the above process, the code language (i.e., source code data, etc.) displayed in the language editing area 1011 and the images (such as N edited images, etc.) displayed in the media editing area 1012 can be updated synchronously. This allows users to better view the image and code language editing results, thereby adjusting the code language or images and improving the efficiency and effectiveness of media editing. Simultaneously, the editing function of the media editing area is added, allowing users to directly update the rendered edited images. When the code language is complex, or when the user's understanding of the code language is not deep, the code language can also be edited and updated through the media editing area, thereby improving the efficiency of media editing.

[0101] It is understood that the computer equipment mentioned in the embodiments of this application includes, but is not limited to, terminal devices or servers. In other words, the computer equipment can be a server or a terminal device, or a system composed of a server and a terminal device. The terminal device mentioned above can be an electronic device, including but not limited to mobile phones, tablets, desktop computers, laptops, handheld computers, in-vehicle devices, augmented reality / virtual reality (AR / VR) devices, head-mounted displays, smart TVs, wearable devices, smart speakers, digital cameras, webcams, and other mobile internet devices (MIDs) with network access capabilities, or terminal devices in scenarios such as trains, ships, and flights. The server mentioned above can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, vehicle-to-everything (V2X) communication, content delivery networks (CDNs), and big data and artificial intelligence platforms.

[0102] Optionally, the data involved in the embodiments of this application may be stored in a computer device, or may be stored based on cloud storage technology or a blockchain network, without limitation.

[0103] Further, please see Figure 2 , Figure 2 This is a flowchart illustrating a media editing method provided in an embodiment of this application. Figure 2 As shown, the description takes editing an image as an example; in other words, in... Figure 2 In the described method embodiment, the media editing process includes the following steps:

[0104] Step S201: In response to the editing operation command for the media editing area, update and display the target edited image based on the editing operation command in the media editing area.

[0105] In this embodiment, the computer device can respond to an editing operation instruction for a media editing area, and can update and display the target edited image to be edited by the editing operation instruction in the media editing area. The computer device can obtain the image order information of the target edited image among N edited images. The editing operation instruction can be an image insertion instruction or an image update instruction. N is a positive integer; the media editing area contains N edited images, that is, after updating and displaying the target edited image, the media editing area displays N edited images, including the target edited image. The edited image in this application can be a type of media data, including but not limited to image media data and video media data. In other words, the target edited image is not limited to images; it can be a static image (such as a JPG or PNG image), a dynamic image (such as a GIF image), or a video, etc., without limitation. That is, the target edited image is a type of media data, which can be a static image, a dynamic image, or a video, etc., and the target edited image refers to the image to be edited by the editing operation instruction.

[0106] Specifically, the computer device can respond to a selection operation on N editable images in a media editing area, displaying functional components associated with the selected editable image in the media editing area; it should generate editing operation instructions in response to the triggering operation of the functional components, update the selected editable image based on the editing operation instructions to obtain the target editable image, and update and display the target editable image in the media editing area. This process can be considered as an editing operation on an existing editable image in the media editing area. For example, please refer to [link to example]. Figure 3a , Figure 3a This is a schematic diagram of a media editing scenario provided in an embodiment of this application. For example... Figure 3aAs shown, the computer device can display an application editing page 301, which includes a language editing area 3011 and a media editing area 3012. The computer device can display source code data in the language editing area 3011 and display an edited image rendered from the source code data, including the edited image 302, in the media editing area 3012. For example, the computer device displays source code data in the language editing area 3011. Assume that the source code data includes "". Here, the source code data can be code generated based on a second markup language, and the second markup language can be the Markdown language. After rendering the "" included in the source code data, the edited image 302 can be displayed. Further, the computer device can respond to a selection operation on N edited images in the media editing area. Assume that the selected edited image for the selection operation is the edited image 302. Function components associated with the selected edited image for the selection operation are displayed in the media editing area 3012, that is, function components 303 associated with the edited image 302. The number of the function components 303 is f, and f is a positive integer. The function components 303 include but are not limited to a scale adjustment component 30a, an alignment adjustment component 30b (such as a left alignment component, a center alignment component, or a right alignment component, etc.), an undo modification component 30c, a restore modification component 30d, and an image movement component 30e, etc. Here, the alignment adjustment component 30b is based on the editing area boundary of the media editing area 3012. For example, the left alignment component means that after being triggered, the edited image 302 is updated and displayed along the left boundary of the editing area boundary of the media editing area 3012. As Figure 3a As shown in, a trigger operation on the "scale adjustment component 30a" of the function component is responded to, an editing operation instruction is generated, and based on the editing operation instruction, the image size of the edited image 302 is adjusted to obtain a target edited image 304.

[0107] Specifically, the computer device can respond to an image insertion instruction for the media editing area, determine an image insertion position based on the image insertion instruction, and display a target edited image indicated to be inserted by the image insertion instruction in the area indicated by the image insertion position in the media editing area. For example, please refer to Figure 3b , Figure 3b which is a schematic diagram of a media insertion scenario provided by an embodiment of the present application. As Figure 3bAs shown, the computer device can display an application editing page 305. The application editing page 305 includes a language editing area 3051 and a media editing area 3052. The computer device can display source code data in the language editing area 3051 and display an edited image rendered from the source code data in the media editing area 3052, including edited images 3061, 3062, 3063, etc. For example, the computer device displays source code data in the language editing area 3051. Assume that the source code data includes "" and other image syntax code blocks. Each image syntax code block can be regarded as a code statement related to the edited image. Among them, the source code data can be code generated based on a second markup language, and the second markup language can be Markdown language. Assume that the image syntax code block "" is associated with the edited image 3061. After rendering the "" included in the source code data, the edited image 3061 can be displayed. Further, the computer device can respond to an image insertion operation on the media editing area 3052. Specifically, the computer device can respond to a trigger operation on an image insertion component 307 to generate an image insertion instruction. The image insertion component 307 can be a component displayed on the application editing page 305. The computer device can respond to the trigger operation on the image insertion component 307 to display a candidate area where an edited image can be inserted, and respond to a selection operation on a target area in the candidate area to display the target edited image 308 indicated by the image insertion instruction in the target area; or, the computer device can respond to a target trigger operation on the media editing area 3052 to display the image insertion component 307. The image insertion component 307 can be independently displayed on the application editing page 305 or displayed in the application editing page 305. Responding to the trigger operation on the image insertion component 307, an image insertion instruction is generated, the position triggered by the target trigger operation on the media editing area 3052 is determined as the image rendering position, a target area is determined at the image rendering position based on the target edited image 308 indicated by the image insertion instruction, and the target edited image 308 is displayed in the target area. The target trigger operation can be a pre-set operation for triggering the display of the image insertion component 307, which can be but is not limited to a right-click operation or a double-click operation, etc. At the same time, the media editing area 3052 can be adjusted based on the inserted target edited image 308, such as Figure 3b adjusting the relative positions of the target edited image 308 and the edited image 3063, etc.

[0108] Optionally, within a detection time range, the computer device may respond to editing operation instructions for the media editing area, update and display the target edited image based on the editing operation instructions in the media editing area, and after the detection time range has elapsed, obtain the image order information of the target edited image among N edited images. In other words, the computer device will synchronize the updated content in the media editing area to the language editing area within the detection time range. Alternatively, the computer device may respond to editing operation instructions for the media editing area, update and display the target edited image based on the editing operation instructions in the media editing area, and if the duration of the media editing area in an unupdated state is greater than or equal to a synchronization time threshold, obtain the image order information of the target edited image among N edited images. That is, if the duration of the media editing area in an unupdated state after being edited is greater than or equal to the synchronization time threshold, it is considered that the user's update of the media editing area is complete, and the computer device will synchronize the updated content to the language editing area. Alternatively, the computer device can synchronize the media editing area and the language editing area in real time. That is, the computer device responds to the editing operation instructions for the media editing area, updates and displays the target edited image based on the editing operation instructions in the media editing area, obtains the image order information of the target edited image among N edited images, so that as soon as the content in the media editing area changes, the corresponding code of the changed content in the media editing area is echoed in the language editing area, etc., without any restrictions.

[0109] Step S202: Obtain the image order information of the target edited image among the N edited images.

[0110] In this embodiment, the computer device can obtain image order information of the target edited image among N edited images. Specifically, the computer device can obtain image tags corresponding to the N edited images respectively, obtain the target image tag corresponding to the target edited image edited by the editing operation instruction; search for the target image tag from the N image tags, and determine the sequence number of the target image tag among the N image tags as the image order information of the target edited image among the N edited images. Alternatively, the computer device can search for the N edited images based on their display order in the media editing area, and determine the display number of the target edited image found among the N edited images as the image order information of the target edited image among the N edited images.

[0111] Step S203: Obtain the source code data displayed in the language editing area, obtain the image syntax code block from the source code data, and locate the target code position indicated by the image sequence information in the image syntax code block.

[0112] In an embodiment of the present application, a computer device may obtain source code data displayed in a language editing area. The source code data may be code generated based on a second markup language, and the second markup language may be Markdown language. Further, the computer device may obtain image syntax code blocks from the source code data, obtain the number M of image syntax code blocks, where M is a positive integer, and locate the target code position indicated by the image sequence information in the image syntax code blocks according to the association relationship between the M image syntax code blocks and N edited images. In the present application, the image syntax code block may refer to a code statement, which can be considered an executable code statement. That is, M code statements associated with media data (i.e., edited images) obtained from the source code data are denoted as M image syntax code blocks.

[0113] Optionally, the computer device may obtain the image syntax format corresponding to the second markup language, and obtain M image syntax code blocks by obtaining code blocks matching the image syntax format from the source code data. For example, the second markup language is Markdown language, and the computer device obtains the image syntax format corresponding to the second markup language, and obtains the image syntax format as "", etc. Among them, the "[image attribute]" is used to describe the attributes of the corresponding edited image, such as image size, image name, and image transparency, etc., and the "(image address)" is used to describe the storage location or call location of the corresponding edited image, etc. For example, "" in Figure 3 may represent an edited image with an image name of "a dog", an image size of "100px", and a call address of "img / demo-dog.png". When rendering, the computer device may obtain the edited image "demo-dog.png" from the "img / " folder and render the edited image in the media editing area with an image size of 100px. The computer device may search for code blocks matching the image syntax format "" from the source code data to obtain M image syntax code blocks.

[0114] Specifically, the computer device can acquire the number M of image syntax code blocks; M is a positive integer. If M is the same as N, then based on the first display order of the N image syntax code blocks in the language editing area and the second display order of the N edited images in the media editing area, the N image syntax code blocks are associated with the N edited images. Based on the association result, the target code position indicated by the image order information is located in the N image syntax code blocks; one image syntax code block is associated with one edited image. If M is (N-1), and the editing operation instruction is an image insertion instruction, then the first syntax code block and the second syntax code block corresponding to the image order information are searched in the image syntax code blocks, and the area between the first syntax code block and the second syntax code block is determined as the target code position; the M image syntax code blocks include the first syntax code block and the second syntax code block, and the first syntax code block and the second syntax code block are adjacent in the M image syntax code blocks. If M and N are different, and the editing operation instruction is not an image insertion instruction, then the code attribute of each image syntax code block is obtained. Logical parsing is performed on the M image syntax code blocks based on the code attribute, and the target code position indicated by the image order information is located within the parsed image syntax code blocks. Here, "If M and N are different, and the editing operation instruction is not an image insertion instruction" refers to any one of the following three cases: "If M is (N-1), and the editing operation instruction is not an image insertion instruction," or "If M is not N, and not (N-1)," or "M is N, and the editing operation instruction is an image insertion instruction."

[0115] Furthermore, when logically parsing the M image syntax code blocks according to their code attributes and locating the target code position indicated by the image order information within the parsed image syntax code blocks, the computer device can obtain the code display conditions corresponding to the code attributes. If image syntax code block i does not meet the code display conditions corresponding to its code attributes, then image syntax code block i is filtered; if image syntax code block i meets the code display conditions corresponding to its code attributes, then image syntax code block i is recorded as a valid syntax code block. Here, i is a positive integer, less than or equal to M. The computer device can parse the valid syntax code blocks among the M image syntax code blocks and locate the target code position indicated by the image order information within the parsed valid syntax code blocks.

[0116] Specifically, if there are comment syntax code blocks among the M image syntax code blocks with the code attribute of comment code, then the comment syntax code blocks among the M image syntax code blocks are filtered to obtain valid syntax code blocks. The target code position indicated by the image order information is located within the valid syntax code blocks. The display condition for the code corresponding to the comment code attribute is that the code corresponding to the comment code attribute is not rendered. That is, if the code attribute of an image syntax code block is comment code, then that image syntax code block will not be rendered as an image. Therefore, the comment syntax code blocks among the M image syntax code blocks can be filtered. Specifically, the computer device can obtain the comment code format corresponding to the comment code attribute, compare the image syntax code block i with the comment code format, and if the format of image syntax code block i is a comment code format, then the code attribute of image syntax code block i is determined to be a comment code attribute; if the format of image syntax code block i is not a comment code format, then the code attribute of image syntax code block i is determined to be not a comment code attribute. Through the above process, the comment syntax code blocks with the code attribute of comment code are identified among the M image syntax code blocks, and the comment syntax code blocks among the M image syntax code blocks are filtered.

[0117] If among the M image syntax code blocks, there exists a hypertext code block with a code attribute of hypertext code attribute, then the hypertext code block is parsed based on hypertext code logic to obtain the image preview information within it. Based on the image order information and the image preview information, the target code position is located within the parsed image syntax code block. The code display condition corresponding to this hypertext code attribute is the condition indicated by the hypertext code logic. Specifically, the computer device can obtain the hypertext code format corresponding to the hypertext code attribute and compare the image syntax code block i with the hypertext code format. If the format of image syntax code block i is a hypertext code format, then the code attribute of image syntax code block i is determined to be a hypertext code attribute; if the format of image syntax code block i is not a hypertext code format, then the code attribute of image syntax code block i is determined to be not a hypertext code attribute. Through the above process, the hypertext code blocks with a code attribute of hypertext code attribute among the M image syntax code blocks are identified, and these M image syntax code blocks are then parsed.

[0118] The image preview information indicates the number of editable images corresponding to the hypertext syntax code block and their preview states, including both displayed and hidden states. When locating the target code position within the parsed image syntax code block based on the image order information and preview information, the computer device can divide the hypertext syntax code block into P virtual sub-code blocks based on the preview information, obtaining the image preview state corresponding to each virtual sub-code block; P is a positive integer representing the number of editable images corresponding to the hypertext syntax code block; the target virtual sub-code block with the image preview state of "displayed" is searched from the P virtual sub-code blocks. The target code position indicated by the image order information is located within the target virtual sub-code block and within the M image syntax code blocks excluding the hypertext syntax code block. Note that the hypertext syntax code block may contain loop statements, causing one hypertext syntax code block to correspond to one or at least two virtual sub-code blocks. For example, a hypertext syntax code block with pseudocode "for j=1:3" corresponds to three virtual sub-code blocks. The hypertext code logic is derived from the markup language type corresponding to the hypertext code attributes. For example, if the markup language type is HyperText Markup Language (html), then the hypertext code logic refers to the code logic corresponding to the html type; if the markup language type is Cascading Style Sheets (css), then the hypertext code logic refers to the code logic corresponding to the CSS type, and so on. In other words, computer devices can display code generated based on one or at least two markup languages ​​in the language editing area, with the second markup language as the primary language, such as Markdown, and other markup languages ​​used as auxiliary languages, which can be referred to as the first markup language, to improve the code's usability.

[0119] Optionally, the second markup language also includes inline code and quotation code, where the code attribute corresponding to the inline code is a comment code attribute. That is, the computer device can obtain the code format corresponding to the image syntax code block, determine the code type of the image syntax code block based on the code format, and determine the code attribute of the image syntax code block based on the code type. For example, if an image syntax code block is inline code, its code attribute can be determined as a comment code attribute. The reference code includes definition code and definition reference code. The definition code refers to the definition of an edited image. Assuming this edited image is denoted as the first edited image, the definition reference code is used to directly reference the definition code to generate code related to the first edited image. That is, when rendering the edited image, since the definition code is the definition of the first edited image, it will not be rendered. Therefore, if there is an image syntax code block that is a reference code, that is, if there is an image syntax code block whose code attribute is a reference code attribute, the computer device can filter the M image syntax code blocks. Specifically, it filters the image syntax code blocks that correspond to the definition code among the M image syntax code blocks and locates the target code position indicated by the image order information in the filtered image syntax code blocks.

[0120] Step S203: Generate the target statement corresponding to the target editing image based on the editing operation instructions, and display the updated source code data in the language editing area based on the target code location.

[0121] In this embodiment, the computer device can generate a target statement corresponding to the target edited image based on editing operation instructions, and can generate updated source code data based on the target code location and the target statement, displaying the updated source code data in the language editing area; alternatively, it can generate a target statement corresponding to the target edited image based on editing operation instructions, and directly update the target code location of the source code data displayed in the language editing area based on the target statement, so that the computer device displays the updated source code data in the language editing area. That is, the computer device can first update the source code data in the background based on the target statement and the target code location, and then display the updated source code data in the language editing area; or it can directly update and display the source code data displayed in the language editing area based on the target statement and the target code location. The computer device can obtain the hypertext language statement of the target edited image edited by the editing operation instructions, and extract the image attributes of the target edited image from the hypertext language statement; the hypertext language statement is a statement belonging to the first markup language. It obtains the image statement template corresponding to the second markup language, uses the image attributes as parameters of the image statement template, and adds them to the image statement template to obtain the target statement corresponding to the target edited image.

[0122] In extracting image attributes of a target edited image from a hypertext language statement, the computer device can obtain the basic image attributes of the target edited image from the hypertext language statement; these basic image attributes describe the basic information of the target edited image. The computer device then obtains the hypertext code segment to which the hypertext language statement belongs, and from this segment, retrieves the image style attributes of the target edited image. Based on the basic image attributes and the image style attributes, the image attributes of the target edited image are determined. For example, the computer device obtains the hypertext language statement "<imgsrc="dog.jpg"width="249"height="253"style="width:200px"title="a dog"> The process retrieves the basic image attributes of the target image from hypertext language statements. These basic image attributes include, but are not limited to, image address, basic image information (such as image size and image name), and image style attributes. Specifically, the computer device can retrieve the parameter corresponding to the first keyword in the hypertext language statement and determine it as the image address. This first keyword can be "src" or other words used to introduce the image address. The process also retrieves the parameter corresponding to the second keyword in the hypertext language statement and determines it as the image size attribute. This second keyword includes "width" and "height," etc. Furthermore, it retrieves the parameter corresponding to the third keyword in the hypertext language statement and determines it as the image name. This third keyword includes "title," etc. Finally, it retrieves the parameter corresponding to the fourth keyword in the hypertext language statement and determines it as the image name. The image style attribute is defined as the fourth keyword, which includes "style," etc. This image style attribute can include image background color and image transparency, etc. Optionally, the image background color can also correspond to the keyword "bgcolor," and the image transparency can also correspond to the keyword "alpha," etc., without limitation. Further, the computer device can obtain the hypertext code segment to which the hypertext language statement belongs, and obtain the image style attribute of the target edited image from the hypertext code segment. This image style attribute includes, but is not limited to, image alignment attributes (such as left alignment, center alignment, right alignment, or left float alignment, etc.). Optionally, the computer device converts the code of the second markup language into the code of the first markup language, renders the converted first markup language code, and obtains the content displayed in the media editing area. It can be considered that the computer device can directly generate the hypertext language statement of the target edited image edited by the editing operation instructions.

[0123] Further, if the editing operation instruction is an image insertion instruction, insert the target statement into the target code position in the source code data to obtain the updated source code data; if the editing operation instruction is not an image insertion instruction, replace the image syntax code block at the target code position in the source code data with the target statement. Optionally, the computer device may add a first display label to the target edited image in the media editing area; add a second display label to the target statement in the language editing area, where the first display label is used to highlight the target edited image, and the first display label includes but is not limited to a border label, a highlighting label, a background color display label, etc., which are not limited here; the second display label is used to highlight the target statement, and the second display label includes but is not limited to a border label, a highlighting label, a background color display label, etc., which are not limited here. Through the first display label and the second display label, the user can directly see the content updated synchronously in the language editing area and the media editing area, making the editing update of the image more prominent, and the user can conveniently determine whether the updates in the language editing area and the media editing area meet the requirements, thereby improving the efficiency of media editing and the interactivity with the user.

[0124] Optionally, as Figure 3a shown, after obtaining the target edited image 304, the computer device displays the target statement corresponding to the target edited image 304 in the language editing area 3011. The target statement may be "", that is, the editing operation instruction is used to update the image size of the edited image 302 from 100 pixels to 500 pixels.

[0125] Or, as Figure 3b shown, after inserting the target edited image 308, the computer device inserts and displays the target statement at the target code position in the source code data displayed in the language editing area 3051. At the same time, based on the target statement, the code after the target statement is adjusted for position display. At this time, the content displayed in the language editing area 3051 can be considered as the updated source code data, and the updated source code data includes the target statement.

[0126] That is to say, at the display level, the computer device responds to an editing operation instruction for the media editing area, and updates and displays the target edited image edited based on the editing operation instruction in the media editing area. The target statement corresponding to the target edited image is updated and displayed in the language editing area. Specifically, if the editing operation instruction is an image insertion instruction, the computer device inserts and displays the target statement corresponding to the target edited image in the source code data displayed in the language editing area; if the editing operation instruction is not an image insertion instruction, the computer device updates and displays the image syntax code block associated with the target edited image in the language editing area as the target statement corresponding to the target edited image, that is, in the language editing area, the image syntax code block at the target code position in the source code data is updated and displayed as the target statement.

[0127] Furthermore, the computer device can respond to an update operation for the first code statement in the source code data, update the source code data to obtain update marker data; convert the update marker data into data to be rendered, and render a preview interface corresponding to the data to be rendered in the language editing area; the data to be rendered is data belonging to the first markup language. For example, the computer device responds to an update operation for the first code statement in the source code data. Assume that the first code statement is "", and updates the source code data, that is, updates the first code statement in the source code data to "", obtains update marker data, converts the update marker data into data to be rendered, and renders a preview interface corresponding to the data to be rendered in the language editing area; the data to be rendered is data belonging to the first markup language. Or, the computer device can record the updated first code statement as the second code statement, convert the second code statement into the third code statement, locate the image update position corresponding to the first code statement from N edited images, and update and display the edited image at the image update position as the updated edited image. Among them, the third code statement is data belonging to the first markup language, and the updated edited image is obtained by rendering the third code statement.

[0128] In this embodiment, in response to an editing operation command for the media editing area, the target edited image edited based on the editing operation command is updated and displayed in the media editing area. The image order information of the target edited image among N edited images is obtained; N is a positive integer; the media editing area contains N edited images. Source code data displayed in the language editing area is obtained, and image syntax code blocks are extracted from the source code data. The target code position indicated by the image order information is located in the image syntax code block. A target statement corresponding to the target edited image is generated based on the editing operation command. The source code data is updated based on the target code position and the target statement, and the updated source code data is displayed in the language editing area. Under this method, the computer device can simultaneously display a media editing area and a language editing area. The media editing area is used to display the rendered content corresponding to the code displayed in the language editing area, and the language editing area is used to display the code corresponding to the rendered content displayed in the media editing area. This allows the user to preview the rendered content corresponding to the edited code in real time while editing code in the language editing area, enabling the user to adjust the language editing area based on the rendered content, thereby improving the efficiency and effect of media editing. Furthermore, it adds editing functions to the media editing area, allowing users to directly insert images or update already displayed images. The updated image is recorded as the target editing image, and the computer device can echo the updated code corresponding to the target editing image in the language editing area. This makes it easier to edit the required images even when there are many images, improving the synchronous display efficiency of the media editing area and the language editing area, and enhancing the efficiency and effectiveness of media editing.

[0129] Further, see Figure 4 , Figure 4 This is a schematic flowchart of an image insertion method provided in an embodiment of this application. Figure 4 As shown, taking the image insertion command as an example of the editing operation command, the method includes the following steps:

[0130] Step S401: In response to an image insertion command for the media editing area, update and display the target edited image based on the image insertion command in the media editing area.

[0131] Step S402: Obtain the image order information of the target edited image among the N edited images.

[0132] Step S403: Obtain the source code data displayed in the language editing area, obtain the image syntax code block from the source code data, and obtain the number M of the image syntax code block.

[0133] Step S404, is M N-1?

[0134] In this embodiment, when the editing operation instruction is an image insertion instruction, the computer device inserts a new edited image (i.e., a target edited image) into the media editing area. This means that the image syntax code block corresponding to the target edited image inserted by the image insertion instruction does not exist in the language editing area. Therefore, under normal circumstances, the number of image syntax code blocks is one less than the number of edited images displayed in the updated media editing area. If M is (N-1), it indicates that the image syntax code block and the edited image can correspond, and step S405 is executed; if M is not (N-1), it indicates that the image syntax code block and the edited image cannot correspond, and step S406 is executed.

[0135] Step S405: Locate the target code position indicated by the image sequence information in the M image syntax code blocks.

[0136] In this embodiment, the target code position indicated by the image order information is directly located within the M image syntax code blocks. For example, the image order information of the target edited image among the N edited images is k, meaning the target edited image is the kth edited image among the N edited images, where k is a positive integer less than or equal to N. If k is N, the computer device determines the region after the (k-1)th image syntax code block as the target code position; that is, the code inserted at this target code position can be considered the kth image syntax code block. If k is not N, the computer device can search for the (k-1)th and kth image syntax code blocks (i.e., the first and second syntax code blocks) within the M image syntax code blocks, and determine the region between the first and second syntax code blocks as the target code position. Step S407 is then executed based on the target code position.

[0137] Step S406: Logically parse the M image syntax code blocks and locate the target code position indicated by the image order information in the parsed image syntax code blocks.

[0138] In this embodiment of the application, the computer device can perform logical parsing on M image syntax code blocks. The logical parsing process can be found in [reference needed]. Figure 2 Step S202 is shown in the previous section and will not be repeated here. The target code position indicated by the image order information is located within the parsed image syntax code block. At this point, the number of parsed image syntax code blocks is N. The process of locating the target code position indicated by the image order information within the parsed image syntax code block can be found in step S405 and will not be repeated here. Step S407 is then executed based on the target code position.

[0139] Step S407: Generate the target statement corresponding to the target edit image based on the image insertion command, and insert and display the target statement in the source code data displayed in the language editing area based on the target code position.

[0140] In the embodiments of this application, see [reference needed]. Figure 2 The specific description of step S203 is not repeated here.

[0141] This application can be applied to a Markdown editor, which may include an image editing module, an image inverse parsing module, a source code location module, and a syntax parsing engine.

[0142] Further, see Figure 5 , Figure 5 This is a flowchart illustrating the interactive process of updating a media editing area, as provided in an embodiment of this application. Figure 5 As shown, the method includes the following steps:

[0143] Step S501: The user confirms the image to be edited.

[0144] In this embodiment, the user determines the edit image for the media editing area, and the computer device responds to the selection operation of N edit images for the media editing area, and executes step S502 based on the edit image selected by the selection operation.

[0145] In step S502, the computer device echoes the function component through the media editing area.

[0146] In this embodiment, the functional components associated with the edited image selected by the selection operation are echoed in the media editing area.

[0147] Step S503: Edit the image.

[0148] In this embodiment of the application, the user edits the selected image by triggering the functional component.

[0149] Step S504: Generate editing operation instructions.

[0150] In this embodiment of the application, the computer device generates editing operation instructions in response to a trigger operation on a functional component via an image editing module.

[0151] Step S505: The image inverse analysis module obtains the source code data.

[0152] In this embodiment of the application, the computer device obtains the source code data displayed in the language editing area through the image inverse analysis module.

[0153] In step S506, the image inverse analysis module sends source code data to the source code positioning module.

[0154] Step S507: Determine the location of the target code and update the source code data.

[0155] In this embodiment, the computer device obtains the image order information of the target edited image among N edited images through a source code location module, retrieves image syntax code blocks from the source code data, and locates the target code position indicated by the image order information from the image syntax code blocks. Based on the editing operation instructions, a target statement corresponding to the target edited image is generated. The source code data is updated based on the target code position and the target statement, and the updated source code data is displayed in the language editing area.

[0156] Further, please see Figure 6 , Figure 6 This is an interactive diagram of a language editing area update scenario provided in an embodiment of this application. For example... Figure 6 As shown, the method includes the following steps:

[0157] Step S601: The user updates the first code statement.

[0158] In this embodiment, when a user updates the first code data, the computer device responds to the update operation on the first code statement in the source code data by updating the source code data to obtain update marker data. Simultaneously, the computer device can display the updated first code statement in the language editing area; that is, the language editing area displays the update marker data containing the updated first code statement.

[0159] Step S602: Convert the updated source code data into data to be rendered.

[0160] In this embodiment of the application, the computer device obtains the updated source code data (i.e., updated markup data) through the syntax parsing engine, and converts the source code data into data to be rendered, where the data to be rendered refers to data belonging to the first markup language.

[0161] In step S603, the syntax parsing engine renders the preview interface corresponding to the data to be rendered in the media editing area.

[0162] Optionally, the computer device can respond to editing operation instructions for the media editing area, updating the display of the target editing object in the media editing area based on the editing operation instructions. The source code data displayed in the language editing area is also updated, and the updated source code data includes the target statement of the target editing object. The editing operation instructions include object update instructions or object insertion instructions. The target editing object can be the aforementioned edited image, table, or text data, etc., without limitation. Further, for the sake of distinction, the target editing object indicated by the object update instruction can be designated as the first editing object, and the target editing object indicated by the object insertion instruction can be designated as the second editing object.

[0163] Among them, see Figure 7a , Figure 7a This is a schematic flowchart of an object update method provided in an embodiment of this application. Figure 7a As shown, the method includes the following steps:

[0164] Step S701: In response to a selection operation on an editable object in the media editing area, display the functional components associated with the editable object selected in the selection operation in the media editing area.

[0165] In this embodiment, the functional component is used to trigger an object update instruction for the edited object selected in the selection operation. This functional component includes, but is not limited to, a scale adjustment component, an alignment adjustment component (such as a left alignment component, a center alignment component, or a right alignment component), an undo modification component, a redo modification component, and an object movement component. See the above for details. Figure 2 The relevant descriptions shown in step S201 are not repeated here.

[0166] Step S702: In response to a trigger operation for any functional component, update the display of the first edit object edited based on the trigger operation in the media editing area.

[0167] In this embodiment of the application, in response to a trigger operation for any functional component, the first edit object displayed in the media editing area that is edited based on the trigger operation is updated. The first edit object may refer to the edit object obtained after updating based on the trigger operation of the functional component.

[0168] Step S703: Update the source code data displayed in the language editing area.

[0169] In the embodiments of this application, see [reference needed]. Figure 2 The specific descriptions of steps S202 to S204 are shown below.

[0170] Among them, see Figure 7b , Figure 7bThis is a schematic flowchart of an object insertion method provided in an embodiment of this application. Figure 7b As shown, the method includes the following steps:

[0171] Step S711: In response to an object insertion operation targeting the media editing area, display the second editing object inserted as indicated by the object insertion operation in the media editing area.

[0172] In this embodiment, the computer device can directly trigger the object insertion component to perform an object insertion operation on the media editing area; alternatively, it can perform a target triggering operation on the media editing area, display the object insertion component, and then trigger the object insertion component again to perform an object insertion operation on the media editing area. For example, the computer device can respond to a target triggering operation on the media editing area by displaying the object insertion component; in response to a triggering operation on the object insertion component, it can display the second editable object inserted by the object insertion component at the object rendering position triggered by the target triggering operation in the media editing area; the triggering operation on the object insertion component is used to trigger the object insertion operation. The target triggering operation can be a preset operation used to trigger the display of the object insertion component, including but not limited to right-click or double-click operations. Alternatively, the computer device can respond to a triggering operation on the object insertion component by displaying a candidate area, which is an area for inserting editable objects. This candidate area can be a sub-area in the media editing area or a position in the media editing area where editable objects can be inserted; in response to a selection operation on a target area in the candidate area, it can display the second editable object inserted by the triggering operation on the object insertion component in the target area of ​​the media editing area.

[0173] Step S712: Insert the second statement corresponding to the second editing object into the source code data displayed in the language editing area.

[0174] In this embodiment of the application, the source code data displayed in the language editing area refers to the source code data currently displayed in the language editing area when the language editing area is updated.

[0175] In this embodiment, the computer device can update the source code data displayed in the language editing area. The updated source code data includes the target statement corresponding to the target editing object. Optionally, if the editing operation instruction is not an object insertion instruction, the computer device can generate the target statement and update the object syntax code block located at the target code position in the source code data displayed in the language editing area to the target statement. The update of the object syntax code block located at the target code position can be by replacing the object syntax code block at the target code position with the target statement, or by updating the parameters in the object syntax code block at the target code position based on the target statement, etc., without limitation.

[0176] Optionally, the computer device can also respond to an update operation for a third statement in the source code data displayed in the language editing area, display the updated source code data in the language editing area, and update the display of the third editing object indicated by the third statement in the media editing area.

[0177] Through the above process, the language editing area and the media editing area are updated synchronously, adding new practical functions to the Markdown editor, improving its usability and the convenience of media editing.

[0178] Further, please see Figure 8 , Figure 8 This is a schematic diagram of a media editing device provided in an embodiment of this application. The media editing device can be a computer program (including program code, etc.) running on a computer device; for example, the media editing device can be an application software. The device can be used to execute the corresponding steps in the method provided in the embodiments of this application. Figure 8 As shown, the media editing device 800 can be used for Figure 2 Specifically, the computer device in the corresponding embodiment may include: an image display module 11, a sequence acquisition module 12, a code acquisition module 13, a location positioning module 14, a statement generation module 15, and a code display module 16.

[0179] Image display module 11 is used to respond to editing operation commands for the media editing area and update the display of the target edited image in the media editing area based on the editing operation commands;

[0180] Sequential acquisition module 12 is used to acquire the image order information of the target edited image among N edited images; N is a positive integer; the media editing area contains N edited images;

[0181] The code acquisition module 13 is used to acquire the source code data displayed in the language editing area and extract the image syntax code block from the source code data;

[0182] The location module 14 is used to locate the target code position indicated by the image sequence information in the image syntax code block;

[0183] The statement generation module 15 is used to generate the target statement corresponding to the target edit image based on the editing operation instructions;

[0184] The code display module 16 is used to display updated source code data in the language editing area based on the target code location; the updated source code data includes the target statements.

[0185] The image display module 11 includes:

[0186] The component display unit 111 is used to display functional components associated with the selected edit image in the media editing area in response to a selection operation for N edit images in the media editing area.

[0187] The instruction generation unit 112 is used to generate editing operation instructions in response to trigger operations on functional components;

[0188] The image update unit 113 is used to update the edit image selected in the selection operation based on the editing operation instruction to obtain the target edit image, and update and display the target edit image in the media editing area.

[0189] The editing operation command is an image insertion command; the image display module 11 includes:

[0190] The image insertion unit 114 is configured to respond to an image insertion command for a media editing area, determine the image insertion position based on the image insertion command, and display the target edited image indicated by the image insertion command in the area indicated by the image insertion position in the media editing area.

[0191] The sequential acquisition module 12 includes:

[0192] The tag acquisition unit 121 is used to acquire the image tags corresponding to N edited images respectively, and to acquire the target image tag corresponding to the target edited image edited by the editing operation instruction;

[0193] The tag lookup unit 122 is used to find the target image tag from N image tags and determine the sequence number of the target image tag in the N image tags as the image order information of the target edited image in the N edited images.

[0194] The location positioning module 14 includes:

[0195] Quantity acquisition unit 141 is used to acquire the number M of image syntax code blocks; M is a positive integer;

[0196] The first position determination unit 142 is used to, if M and N are the same, associate the N image syntax code blocks with the N edited images according to the first display order of the N image syntax code blocks in the language editing area and the second display order of the N edited images in the media editing area, and locate the target code position indicated by the image order information in the N image syntax code blocks according to the association result; one image syntax code block is associated with one edited image;

[0197] The second position determination unit 143 is further configured to, if M is (N-1) and the editing operation instruction is an image insertion instruction, search for the first syntax code block and the second syntax code block corresponding to the image sequence information in the image syntax code block, and determine the area between the first syntax code block and the second syntax code block as the target code position; the M image syntax code blocks include the first syntax code block and the second syntax code block, and the first syntax code block and the second syntax code block are adjacent in the M image syntax code blocks;

[0198] The third position determination unit 144 is also used to obtain the code attribute of each image syntax code block if M and N are different and the editing operation instruction is not an image insertion instruction, perform logical parsing on the M image syntax code blocks according to the code attribute, and locate the target code position indicated by the image order information in the parsed image syntax code block.

[0199] The third position determination unit 144 includes:

[0200] The annotation filtering subunit 1441 is used to filter the annotation syntax code blocks in the M image syntax code blocks if there are annotation syntax code blocks with the code attribute of annotation code, to obtain valid syntax code blocks, and to locate the target code position indicated by the image order information in the valid syntax code blocks.

[0201] The hypertext parsing subunit 1442 is used to parse the hypertext grammar code block based on the hypertext code logic if there is a hypertext code block among the M image grammar code blocks with the code attribute of hypertext code attribute, and obtain the image preview information in the hypertext grammar code block.

[0202] Preview positioning subunit 1443 is used to locate the target code position in the parsed image syntax code block based on image sequence information and image preview information.

[0203] Among them, the image preview information is used to indicate the number of editable images corresponding to the hypertext syntax code block and the image preview status, including the image display status and the image hidden status;

[0204] The preview positioning subunit 1443 includes:

[0205] The code splitting subunit 144a is used to split the hypertext syntax code block into P virtual sub-code blocks based on image preview information, and obtain the image preview status corresponding to each virtual sub-code block; P is a positive integer, P refers to the number of edit images corresponding to the hypertext syntax code block;

[0206] Code selection subunit 144b is used to find the target virtual subcode block whose image preview state is image display state from P virtual subcode blocks;

[0207] The code positioning subunit 144c is used to locate the target code position indicated by the image order information in the target virtual sub-code block and in the image syntax code blocks other than the hypertext syntax code block among the M image syntax code blocks.

[0208] The statement generation module 15 includes:

[0209] The statement acquisition unit 151 is used to acquire the hypertext language statement of the target image to be edited by the editing operation instruction;

[0210] The attribute extraction unit 152 is used to extract image attributes of the target edited image from hypertext language statements; the hypertext language statements are statements belonging to the first markup language.

[0211] The template adding unit 153 is used to obtain the image statement template corresponding to the second markup language, add the image attributes as parameters of the image statement template to the image statement template, and obtain the target statement corresponding to the target edit image.

[0212] The attribute extraction unit 152 includes:

[0213] The basic extraction subunit 1521 is used to obtain the basic image attributes of the target edited image from hypertext language statements; the basic image attributes are used to describe the basic information of the target edited image;

[0214] The style extraction subunit 1522 is used to obtain the hypertext code segment to which the hypertext language statement belongs, and to obtain the image style attributes of the target edit image from the hypertext code segment;

[0215] The attribute determination subunit 1523 is used to determine the image attributes of the target edit image based on the image's basic attributes and image style attributes.

[0216] The code display module 16 includes:

[0217] The code insertion unit 161 is used to insert the target statement corresponding to the target edited image into the source code data displayed in the language editing area if the editing operation instruction is an image insertion instruction;

[0218] The code replacement unit 162 is used to update the image syntax code block located at the target code position in the source code data to the target statement in the language editing area if the editing operation instruction is not an image insertion instruction.

[0219] The device 800 also includes:

[0220] The source code update module 17 is used to respond to the update operation for the first code statement in the source code data, update the source code data, and obtain update marker data;

[0221] The interface preview module 18 is used to convert the updated markup data into data to be rendered, and to render the preview interface corresponding to the data to be rendered in the language editing area; the data to be rendered is data belonging to the first markup language.

[0222] This application provides a media editing device that responds to editing operation commands for a media editing area. The device updates and displays the target edited image in the media editing area based on the editing operation commands, and acquires the image order information of the target edited image among N edited images; N is a positive integer; the media editing area contains N edited images; it acquires source code data displayed in a language editing area, obtains image syntax code blocks from the source code data, locates the target code position indicated by the image order information in the image syntax code blocks; generates a target statement corresponding to the target edited image based on the editing operation commands, and displays updated source code data, including the target statement, in the language editing area based on the target code position. Under this method, the computer device can simultaneously display a media editing area and a language editing area. The media editing area displays the rendered content corresponding to the code displayed in the language editing area, and the language editing area displays the code corresponding to the rendered content displayed in the media editing area. This allows the user to preview the rendered content corresponding to the edited code in real time while editing code in the language editing area, enabling the user to adjust the language editing area based on the rendered content, thereby improving the efficiency and effect of media editing. Furthermore, it adds editing functions to the media editing area, allowing users to directly insert images or update already displayed images. The updated image is recorded as the target editing image, and the computer device can echo the updated code corresponding to the target editing image in the language editing area. This makes it easier to edit the required images even when there are many images, improving the synchronous display efficiency of the media editing area and the language editing area, and enhancing the efficiency and effectiveness of media editing.

[0223] Among them, see Figure 9 , Figure 9 This application provides another media editing device, which includes a component display module 21, an object display module 22, and a code update module 23. Figure 9 It is aimed at Figure 7a and Figure 7b The apparatus for the method shown.

[0224] Component display module 21 is used to respond to a selection operation on an editing object in a media editing area and display functional components associated with the editing object selected by the selection operation in the media editing area;

[0225] The object display module 22 is configured to respond to a trigger operation for any of the aforementioned functional components and update the display of the first edit object edited based on the trigger operation in the media editing area;

[0226] The code update module 23 is used to update the source code data displayed in the language editing area; the updated source code data includes the first statement corresponding to the first editing object.

[0227] The device 900 also includes:

[0228] The insertion trigger module 24 is used to respond to an object insertion operation in the media editing area and display the second editing object inserted as indicated by the object insertion operation in the media editing area.

[0229] The statement insertion module 25 is used to insert and display the second statement corresponding to the second editing object in the source code data displayed in the language editing area.

[0230] The insertion trigger module 24 includes:

[0231] The region triggering unit 241 is used to respond to a target triggering operation targeting the media editing region and display the object insertion component;

[0232] The position display unit 242 is used to respond to a trigger operation for the object insertion component and display the second edited object inserted by the object insertion component at the object rendering position triggered by the target trigger operation in the media editing area; the trigger operation for the object insertion component is used to trigger the object insertion operation.

[0233] The insertion trigger module 24 includes:

[0234] The region display unit 243 is used to display candidate regions in response to a trigger operation on the object insertion component; the candidate region refers to the region used to insert and edit objects.

[0235] The region selection unit 244 is used to respond to a selection operation on a target region in the candidate region and display the second edit object inserted by the triggering operation on the object insertion component in the target region of the media editing region.

[0236] See Figure 10 , Figure 10 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Figure 10As shown, the computer device in this embodiment may include one or more processors 1001, a memory 1002, and an input / output interface 1003. The processor 1001, memory 1002, and input / output interface 1003 are connected via a bus 1004. The memory 1002 stores a computer program, which includes program instructions. The input / output interface 1003 receives and outputs data, such as for data interaction between modules in the editor to which this application applies, or for data interaction between the computer device and the user. The processor 1001 executes the program instructions stored in the memory 1002.

[0237] The processor 1001 can perform the following operations:

[0238] In response to editing operation commands for the media editing area, update and display the target edited image based on the editing operation commands in the media editing area, and obtain the image order information of the target edited image among N edited images; N is a positive integer; the media editing area contains N edited images;

[0239] Obtain the source code data displayed in the language editing area, extract the image syntax code block from the source code data, and locate the target code position indicated by the image sequence information in the image syntax code block;

[0240] The target statement corresponding to the target edit image is generated based on the editing operation instructions. The updated source code data is displayed in the language editing area based on the target code location. The updated source code data includes the target statement.

[0241] Specifically, in response to editing operation commands for the media editing area, the processor updates and displays the target edited image based on the editing operation commands in the media editing area.

[0242] In response to a selection operation on N editable images in the media editing area, display the functional components associated with the editable image selected by the selection operation in the media editing area;

[0243] In response to a trigger operation on a functional component, an editing operation instruction is generated. Based on the editing operation instruction, the selected editing image is updated to obtain the target editing image, and the target editing image is updated and displayed in the media editing area.

[0244] The editing operation command is an image insertion command; in response to the editing operation command for the media editing area, the processor updates and displays the target edited image based on the editing operation command in the media editing area. This processor is used for:

[0245] In response to an image insertion command for a media editing area, the image insertion position is determined based on the image insertion command, and the target edited image to be inserted as indicated by the image insertion command is displayed in the area indicated by the image insertion position in the media editing area.

[0246] Specifically, the processor is used to obtain the image order information of the target edited image among N edited images.

[0247] Obtain the image labels corresponding to N edited images, and obtain the target image label corresponding to the target edited image edited by the editing operation command;

[0248] Find the target image label from N image labels, and determine the sequence number of the target image label among the N image labels as the image order information of the target edited image among the N edited images.

[0249] Specifically, the processor is used to locate the target code position indicated by the image sequence information within the image syntax code block.

[0250] Get the number M of the image syntax code blocks; M is a positive integer;

[0251] If M and N are the same, then based on the first display order of the N image syntax code blocks in the language editing area and the second display order of the N edited images in the media editing area, the N image syntax code blocks are associated with the N edited images. Based on the association result, the target code position indicated by the image order information is located in the N image syntax code blocks; one image syntax code block is associated with one edited image.

[0252] If M is (N-1) and the editing operation instruction is an image insertion instruction, then the first syntax code block and the second syntax code block corresponding to the image order information are searched in the image syntax code block, and the area between the first syntax code block and the second syntax code block is determined as the target code position; the M image syntax code blocks include the first syntax code block and the second syntax code block, and the first syntax code block and the second syntax code block are adjacent in the M image syntax code blocks.

[0253] If M and N are different, and the editing operation instruction is not an image insertion instruction, then obtain the code attribute of each image syntax code block, perform logical parsing on the M image syntax code blocks according to the code attribute, and locate the target code position indicated by the image order information in the parsed image syntax code blocks.

[0254] Specifically, the processor performs logical parsing on M image syntax code blocks based on code attributes, and locates the target code position indicated by the image order information within the parsed image syntax code blocks. This processor is used for:

[0255] If there is a comment syntax code block with the code attribute of comment code among the M image syntax code blocks, then the comment syntax code blocks in the M image syntax code blocks are filtered to obtain valid syntax code blocks, and the target code position indicated by the image order information is located in the valid syntax code blocks.

[0256] If there is a hypertext code block with a hypertext code attribute among the M image grammar code blocks, then the hypertext code block is parsed based on the hypertext code logic to obtain the image preview information in the hypertext code block. Based on the image order information and the image preview information, the target code position is located in the parsed image grammar code block.

[0257] Among them, the image preview information is used to indicate the number of editable images corresponding to the hypertext syntax code block and the image preview status, including the image display status and the image hidden status;

[0258] Based on image sequence information and image preview information, the processor locates the target code position within the parsed image syntax code block. This processor is used for:

[0259] Based on image preview information, the hypertext syntax code block is split into P virtual sub-code blocks, and the image preview state corresponding to each virtual sub-code block is obtained; P is a positive integer, and P refers to the number of edited images corresponding to the hypertext syntax code block;

[0260] Find the target virtual sub-block whose image preview state is image display state from among P virtual sub-blocks;

[0261] In the target virtual sub-code block and in the image syntax code blocks other than the hypertext syntax code block among the M image syntax code blocks, locate the target code position indicated by the image order information.

[0262] Specifically, the processor generates the target statement corresponding to the target edited image based on the editing operation instructions.

[0263] Obtain the hypertext language statement of the target image to be edited by the editing operation command, and extract the image attributes of the target image from the hypertext language statement; the hypertext language statement is a statement belonging to the first markup language.

[0264] Obtain the image statement template corresponding to the second markup language, add the image attributes as parameters to the image statement template, and obtain the target statement corresponding to the target edit image.

[0265] The processor extracts image attributes of the target edited image from hypertext language statements; this process is used for:

[0266] Extract the basic image attributes of the target image to be edited from hypertext language statements; the basic image attributes are used to describe the basic information of the target image to be edited.

[0267] Get the hypertext code segment to which the hypertext language statement belongs, and get the image style attributes of the target image to be edited from the hypertext code segment;

[0268] Determine the image attributes of the target image to be edited based on the image's basic attributes and image style attributes.

[0269] Based on the target code location, the updated source code data is displayed in the language editing area, including:

[0270] If the editing operation command is an image insertion command, then the target statement corresponding to the target edited image will be inserted into the source code data displayed in the language editing area.

[0271] If the editing operation command is not an image insertion command, then in the language editing area, the image syntax code block located at the target code position in the source code data will be updated and displayed as the target statement.

[0272] The processor is also used for:

[0273] In response to the update operation targeting the first code statement in the source code data, the source code data is updated to obtain the update marker data;

[0274] The updated markup data is converted into data to be rendered, and the preview interface corresponding to the data to be rendered is rendered in the language editing area; the data to be rendered is data belonging to the first markup language.

[0275] Furthermore, the processor 1001 can also perform the following steps:

[0276] In response to a selection operation on an editable object in the media editing area, display the functional components associated with the editable object selected in the media editing area;

[0277] In response to a trigger action on any functional component, update the display in the media editing area to show the first edit object edited based on the trigger action;

[0278] Update the source code data displayed in the language editing area; the updated source code data includes the first statement corresponding to the first editing object.

[0279] In some feasible implementations, the processor 1001 may be a central processing unit (CPU), but it can also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or any conventional processor.

[0280] The memory 1002 may include read-only memory and random access memory, and provides instructions and data to the processor 801 and the input / output interface 1003. A portion of the memory 1002 may also include non-volatile random access memory. For example, the memory 1002 may also store device type information.

[0281] In practice, the computer device can perform actions such as these through its built-in functional modules. Figure 2 For details on the implementation methods provided for each step, please refer to [the relevant documentation / document / etc.]. Figure 2 The implementation methods provided for each step are not elaborated here.

[0282] This application provides a computer device including a processor, an input / output interface, and a memory. The processor retrieves a computer program from the memory and executes it. Figure 2The method described herein involves performing media editing operations at each step. This embodiment of the application implements the following: responding to an editing operation command for the media editing area, updating and displaying the target edited image based on the editing operation command in the media editing area; obtaining the image order information of the target edited image among N edited images; N being a positive integer; the media editing area containing N edited images; obtaining the source code data displayed in the language editing area; obtaining image syntax code blocks from the source code data; locating the target code position indicated by the image order information in the image syntax code blocks; generating the target statement corresponding to the target edited image based on the editing operation command; and displaying the updated source code data in the language editing area based on the target code position; the updated source code data includes the target statement. Under this method, the computer device can simultaneously display a media editing area and a language editing area. The media editing area is used to display the rendered content corresponding to the code displayed in the language editing area, and the language editing area is used to display the code corresponding to the rendered content displayed in the media editing area. This allows the user to preview the rendered content corresponding to the edited code in real time while editing code in the language editing area, enabling the user to adjust the language editing area based on the rendered content, thereby improving the efficiency and effect of media editing. Furthermore, it adds editing functions to the media editing area, allowing users to directly insert images or update already displayed images. The updated image is recorded as the target editing image, and the computer device can echo the updated code corresponding to the target editing image in the language editing area. This makes it easier to edit the required images even when there are many images, improving the synchronous display efficiency of the media editing area and the language editing area, and enhancing the efficiency and effectiveness of media editing.

[0283] This application also provides a computer-readable storage medium storing a computer program adapted to be loaded and executed by a processor. Figure 2 For details on the media editing methods provided for each step, please refer to the [link / document / reference]. Figure 2 The implementation methods provided for each step are not repeated here. Furthermore, the beneficial effects of using the same method are also not repeated. For technical details not disclosed in the computer-readable storage medium embodiments involved in this application, please refer to the description of the method embodiments of this application. As an example, a computer program may be deployed to execute on a single computer device, or on multiple computer devices located in one location, or on multiple computer devices distributed across multiple locations and interconnected via a communication network.

[0284] The computer-readable storage medium can be the media editing apparatus provided in any of the foregoing embodiments or the internal storage unit of the computer device, such as the hard disk or memory of the computer device. The computer-readable storage medium can also be an external storage device of the computer device, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., provided on the computer device. Furthermore, the computer-readable storage medium can include both internal storage units and external storage devices of the computer device. The computer-readable storage medium is used to store the computer program and other programs and data required by the computer device. The computer-readable storage medium can also be used to temporarily store data that has been output or will be output.

[0285] This application also provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform... Figure 2 The method provided among the various optional modes enables the simultaneous display of a media editing area and a language editing area. The media editing area displays the rendered content corresponding to the code displayed in the language editing area, while the language editing area displays the code corresponding to the rendered content displayed in the media editing area. This allows users to preview the rendered content corresponding to the edited code in real time while editing code in the language editing area, enabling adjustments to the language editing area based on the rendered content, thereby improving the efficiency and effectiveness of media editing. Furthermore, it adds editing functionality to the media editing area, allowing users to directly insert images or update already displayed images. The updated image is designated as the target editing image, and the computer device can echo the updated code corresponding to the target editing image in the language editing area. This makes it easier to edit the required images even when there are many images, improving the synchronous display efficiency of the media editing area and the language editing area, and ultimately enhancing the efficiency and effectiveness of media editing.

[0286] The terms "first," "second," etc., in the specification, claims, and drawings of this application are used to distinguish different objects, not to describe a specific order. Furthermore, the term "comprising," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, apparatus, product, or device that includes a series of steps or units is not limited to the listed steps or modules, but may optionally include steps or modules not listed, or may optionally include other step units inherent to these processes, methods, apparatuses, products, or devices.

[0287] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of each example have been generally described in terms of functionality. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this application.

[0288] The methods and related apparatus provided in this application are described with reference to the method flowcharts and / or structural diagrams provided in this application. Specifically, each block of the method flowchart and / or structural diagram, as well as combinations of blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable media editing device to create a machine, such that the instructions, which execute via the processor of the computer or other programmable media editing device, generate instructions for implementing the process... Figure 1 A schematic diagram of one or more processes and / or structures. Figure 1 The computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable media editing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in the process. Figure 1 A schematic diagram of one or more processes and / or structures. Figure 1 The functions specified in one or more boxes. These computer program instructions may also be loaded onto a computer or other programmable media editing device to cause a series of operational steps to be performed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable device for implementing the process. Figure 1 A process or multiple processes and / or structures illustrate the steps of the functions specified in one or more boxes.

[0289] The steps in the method of this application embodiment can be adjusted, combined, or deleted according to actual needs.

[0290] The modules in the device of this application embodiment can be merged, divided, and deleted according to actual needs.

[0291] The above-disclosed embodiments are merely preferred embodiments of this application and should not be construed as limiting the scope of this application. Therefore, any equivalent variations made in accordance with the claims of this application shall still fall within the scope of this application.

Claims

1. A media editing method, characterized by, The method is applied to a Markdown editor, and the method includes: The application editing page displays a media editing area and a language editing area. Source code data is displayed in the language editing area, and an edited image is displayed in the media editing area. The edited image is rendered based on the source code data; the edited image is a type of media data. In response to an editing operation command for the media editing area, the target edited image edited based on the editing operation command is updated and displayed in the media editing area; Obtain the image order information of the target edited image among N edited images; N is a positive integer; the media editing area contains the N edited images; the N edited images refer to the edited images displayed in the media editing area after the update; Obtain the source code data displayed in the language editing area, extract the image syntax code block from the source code data, and locate the target code position indicated by the image sequence information in the image syntax code block; Based on the editing operation instructions, a target statement corresponding to the target edit image is generated, and based on the target code location, updated source code data is displayed in the language editing area; the updated source code data includes the target statement. In response to an update operation on a first code statement in the source code data, the source code data is updated to obtain update marker data; The updated markup data is converted into data to be rendered, and the preview interface corresponding to the data to be rendered is rendered in the media editing area; the data to be rendered is data belonging to the first markup language.

2. The method of claim 1, wherein, The response to an editing operation instruction for the media editing area, updating and displaying the target edited image based on the editing operation instruction in the media editing area, includes: In response to a selection operation on N editable images in the media editing area, a functional component associated with the editable image selected by the selection operation is displayed in the media editing area; In response to a trigger operation on the functional component, an editing operation instruction is generated. Based on the editing operation instruction, the edit image selected by the selection operation is updated to obtain the target edit image. The target edit image is then updated and displayed in the media editing area.

3. The method of claim 1, wherein, The editing operation instruction is an image insertion instruction; the response to the editing operation instruction for the media editing area, updating and displaying the target edited image based on the editing operation instruction in the media editing area, includes: In response to the image insertion command for the media editing area, the image insertion position is determined based on the image insertion command, and the target edited image to be inserted as indicated by the image insertion command is displayed in the area indicated by the image insertion position in the media editing area.

4. The method of claim 1, wherein, The step of obtaining the image order information of the target edited image among N edited images includes: Obtain the image labels corresponding to N edited images, and obtain the target image label corresponding to the target edited image edited by the editing operation instruction; The target image tag is found from N image tags, and the sequence number of the target image tag in the N image tags is determined as the image order information of the target edited image in the N edited images.

5. The method of claim 1, wherein, Locating the target code position indicated by the image sequence information in the image syntax code block includes: Obtain the number M of the image syntax code blocks; M is a positive integer; If M and N are the same, then according to the first display order of the N image syntax code blocks in the language editing area and the second display order of the N edited images in the media editing area, the N image syntax code blocks are associated with the N edited images, and the target code position indicated by the image order information is located in the N image syntax code blocks according to the association result; one image syntax code block is associated with one edited image.

6. The method of claim 1, wherein, Locating the target code position indicated by the image sequence information in the image syntax code block includes: Obtain the number M of the image syntax code blocks; M is a positive integer; If M is (N-1) and the editing operation instruction is an image insertion instruction, then the first syntax code block and the second syntax code block corresponding to the image order information are searched in the image syntax code block, and the area between the first syntax code block and the second syntax code block is determined as the target code position; the M image syntax code blocks include the first syntax code block and the second syntax code block, and the first syntax code block and the second syntax code block are adjacent in the M image syntax code blocks.

7. The method of claim 1, wherein, Locating the target code position indicated by the image sequence information in the image syntax code block includes: Obtain the number M of the image syntax code blocks; M is a positive integer; If M and N are different, and the editing operation instruction is not an image insertion instruction, then the code attribute of each image syntax code block is obtained, and the M image syntax code blocks are logically parsed according to the code attribute. The target code position indicated by the image order information is located in the parsed image syntax code block.

8. The method of claim 7, wherein, The step of logically parsing the M image syntax code blocks according to the code attributes, and locating the target code position indicated by the image order information in the parsed image syntax code blocks, includes: If there is a comment syntax code block with the code attribute of comment code among the M image syntax code blocks, then the comment syntax code block among the M image syntax code blocks is filtered to obtain a valid syntax code block, and the target code position indicated by the image order information is located in the valid syntax code block. If there is a hypertext code block with a hypertext code attribute among the M image syntax code blocks, then the hypertext code block is parsed based on the hypertext code logic to obtain the image preview information in the hypertext code block. Based on the image order information and the image preview information, the target code position is located in the parsed image syntax code block.

9. The method of claim 8, wherein, The image preview information is used to indicate the number of editable images corresponding to the hypertext syntax code block and the image preview status, the image preview status including image display status and image hidden status; The step of locating the target code position in the parsed image syntax code block based on the image sequence information and the image preview information includes: Based on the image preview information, the hypertext syntax code block is split into P virtual sub-code blocks, and the image preview state corresponding to each virtual sub-code block is obtained; P is a positive integer, and P refers to the number of edited images corresponding to the hypertext syntax code block; Find the target virtual sub-code block whose image preview state is the image display state from the P virtual sub-code blocks; In the target virtual sub-code block and in the image syntax code blocks other than the hypertext syntax code block among the M image syntax code blocks, locate the target code position indicated by the image order information.

10. The method of claim 1, wherein, The step of generating the target statement corresponding to the target edited image based on the editing operation instructions includes: Obtain the hypertext language statement of the target edited image to be edited by the editing operation instruction, and extract the image attributes of the target edited image from the hypertext language statement; the hypertext language statement is a statement belonging to a first markup language. Obtain the image statement template corresponding to the second markup language, add the image attributes as parameters of the image statement template to the image statement template, and obtain the target statement corresponding to the target edit image.

11. The method of claim 10, wherein, Extracting the image attributes of the target edited image from the hypertext language statement includes: The basic image attributes of the target edited image are obtained from the hypertext language statements; the basic image attributes are used to describe the basic information of the target edited image. Obtain the hypertext code segment to which the hypertext language statement belongs, and obtain the image style attributes of the target edit image from the hypertext code segment; The image attributes of the target edited image are determined based on the image's basic attributes and image style attributes.

12. The method of claim 1, wherein, The step of displaying updated source code data in the language editing area based on the target code location includes: If the editing operation instruction is an image insertion instruction, then the target statement corresponding to the target edited image is inserted into the source code data displayed in the language editing area; If the editing operation instruction is not the image insertion instruction, then in the language editing area, the image syntax code block located at the target code position in the source code data is updated and displayed as the target statement.

13. A media editing method, characterized by, The method is applied to a Markdown editor, and the method includes: The application editing page displays a media editing area and a language editing area. Source code data is displayed in the language editing area, and an edited image is displayed in the media editing area. The edited image is rendered based on the source code data; the edited image is a type of media data. In response to a selection operation on an editable object in the media editing area, a functional component associated with the editable object selected by the selection operation is displayed in the media editing area. In response to a trigger operation on any of the aforementioned functional components, the first edit object edited based on the trigger operation is updated and displayed in the media editing area; The source code data displayed in the language editing area is updated; the updated source code data includes the first statement corresponding to the first editing object. In response to an update operation on a first code statement in the source code data, the source code data is updated to obtain update marker data; The updated markup data is converted into data to be rendered, and the preview interface corresponding to the data to be rendered is rendered in the media editing area; the data to be rendered is data belonging to the first markup language.

14. The method of claim 13, wherein, The method further includes: In response to an object insertion operation targeting the media editing area, a second edit object inserted as indicated by the object insertion operation is displayed in the media editing area; Insert and display the second statement corresponding to the second edit object in the source code data displayed in the language editing area.

15. A media editing apparatus, characterized by comprising: The device is suitable for a Markdown editor, and the device includes: An image display module is used to display a media editing area and a language editing area in the application editing page. Source code data is displayed in the language editing area, and an edited image is displayed in the media editing area. The edited image is rendered based on the source code data; the edited image is a type of media data. The image display module is also configured to respond to editing operation instructions for the media editing area and update the display of the target edited image based on the editing operation instructions in the media editing area; The sequence acquisition module is used to acquire the image sequence information of the target edited image among N edited images; N is a positive integer; the media editing area contains the N edited images; the N edited images refer to the edited images displayed in the media editing area after the update; The code acquisition module is used to acquire the source code data displayed in the language editing area and to extract image syntax code blocks from the source code data; The location module is used to locate the target code position indicated by the image sequence information in the image syntax code block; The statement generation module is used to generate the target statement corresponding to the target edited image based on the editing operation instructions; A code display module is used to display updated source code data in the language editing area based on the target code location; the updated source code data includes the target statement; The source code update module is used to respond to the update operation for the first code statement in the source code data, update the source code data, and obtain update marker data; The interface preview module is used to convert the updated markup data into data to be rendered, and to render the preview interface corresponding to the data to be rendered in the media editing area; the data to be rendered is data belonging to the first markup language.

16. A media editing apparatus, characterized by comprising: The device is suitable for a Markdown editor, and the device includes: An image display module is used to display a media editing area and a language editing area in the application editing page. Source code data is displayed in the language editing area, and an edited image is displayed in the media editing area. The edited image is rendered based on the source code data; the edited image is a type of media data. A component display module is used to respond to a selection operation on an editing object in the media editing area and display functional components associated with the editing object selected by the selection operation in the media editing area. An object display module is configured to respond to a trigger operation for any of the aforementioned functional components and update the display of a first edit object edited based on the trigger operation in the media editing area; The code update module is used to update the source code data displayed in the language editing area; the updated source code data includes the first statement corresponding to the first editing object; The source code update module is used to respond to the update operation for the first code statement in the source code data, update the source code data, and obtain update marker data; The interface preview module is used to convert the updated markup data into data to be rendered, and to render the preview interface corresponding to the data to be rendered in the media editing area; the data to be rendered is data belonging to the first markup language.

17. A computer device, characterized in that, Includes processor, memory, and input / output interfaces; The processor is connected to the memory and the input / output interface respectively, wherein the input / output interface is used to receive data and output data, the memory is used to store computer programs, and the processor is used to call the computer programs so that the computer device executes the method according to any one of claims 1-12, or executes the method according to any one of claims 13-14.

18. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program adapted to be loaded and executed by a processor to cause a computer device having the processor to perform the method of any one of claims 1-12, or the method of any one of claims 13-14.

19. A computer program product comprising a computer program / instructions, characterized in that, When the computer program / instructions are executed by the processor, they implement the method according to any one of claims 1-12, or perform the method according to claims 13-14.

Images