How to insert images, videos, and code blocks in the content editor to enrich the display?

In today's content-driven era, a great article is not just a pile of words, but needs to be illustrated with pictures and graphics, combined with dynamic elements, and even clearly presented with code, in order to better attract readers' attention and convey effective information.The Anqi CMS is well aware of this, therefore it has integrated a variety of practical functions into the content editor, allowing content creators to easily insert images, videos, and code blocks, making the content display more rich and vivid.

Next, we will delve into how to skillfully use these tools in the Anqi CMS content editor to bring new vitality to your articles.

Insert beautiful images to enhance visual appeal

Pictures are the soul window of articles, they can directly express information, break the boredom of long texts, and effectively guide the reader's vision.Inserting images in the AnQi CMS content editor is very convenient.

When you enter the "Content Management" "Publish Document" interface or edit content in the "Page Resources" "Page Management", you will see a feature-rich visual editor.On the toolbar of the editor, you will find an intuitive 'image insert' icon (usually a mountain or sun pattern).Click this icon, the system will pop up a window for you to choose whether to upload a new image or select from the existing image resource library.

If you choose to upload a new image, you can directly select a file from your local device.It is worth mentioning that AnQi CMS has done a lot of optimization work in image processing.After uploading, the system will automatically process the image based on the global settings on the backend, such as intelligently compressing large images to reduce file size, converting them to a WebP format more suitable for web browsing, or generating thumbnail images of different sizes according to presets.These automated processes can ensure that images load quickly on the front-end page without slowing down the website speed, while also ensuring the display quality of the images.If the content contains external image links, the system can also intelligently download them to the local and manage them, which is very convenient for unifying content resources.In addition, you can also use the built-in watermark feature of the system to add a unique identifier to the image, effectively protecting the original content.

It is more convenient to select an existing image, you can directly choose from the previously uploaded image library, quickly find the required image through classification, search, and other methods, and insert it into any position in the article.

Embed exciting videos, enrich content interaction

The charm of video lies in its dynamics and information carrying capacity, a well-made video often conveys complex concepts more efficiently than text and can greatly enhance the user's stay time on the page.The AnQi CMS content editor also supports easy video insertion features.

In the toolbar of the editor, you will find a 'video insert' icon (usually in the shape of a play button).Click it, a text box will pop up. You can choose to directly paste the sharing link of mainstream video platforms (such as YouTube, Bilibili, etc.).The editor will intelligently recognize links and automatically generate embedded codes, presenting the video directly in the article.For locally stored video files, you can also insert them by uploading.

It should be noted that although the system supports local video uploads, for the sake of ensuring the website's access speed and user experience, especially when the video file is large, it is usually recommended to host the video on professional video platforms.These platforms have strong bandwidth and distribution capabilities, which can ensure smooth video playback and also effectively reduce the load on your server.By simply embedding a link, your content can easily combine text, images, and audio-visual elements, greatly enhancing interactivity and attractiveness.

Insert code blocks, clearly display technical content

For technical articles, tutorials, or content that requires displaying specific code examples, clear and beautiful code blocks are indispensable.The Anqi CMS content editor provides a dedicated 'code insertion' feature to ensure that code is presented in a professional and readable manner.

In the editor toolbar, you will find a 'code insertion' icon (usually</>The symbol). Click it, and a code input box will pop up, and it usually provides options to choose programming languages.Here, you can choose from various languages such as C++, Java, Python, JavaScript, and more.Select the correct language and paste your code, the editor will automatically highlight its syntax.Syntax highlighting allows different types of code elements (such as keywords, variables, strings, etc.) to be displayed in different colors, greatly enhancing the readability of the code.

If you are accustomed to using a Markdown editor, Anqi CMS also supports it perfectly.You can enable the Markdown editor in the background under "Global Settings" -> "Content Settings".Enable this and the code block will be wrapped in triple backticks (), followed by the language specification, for example\``javascript`, same can achieve syntax highlighting.Further, for some specific scenarios, such as displaying mathematical formulas or flowcharts, with the Markdown editor enabled, by introducing the corresponding third-party front-end plugins (such as MathJax and Mermaid), you can even directly write and render complex mathematical formulas and dynamic flowcharts in Markdown, making your technical content more professional and intuitive.

Summary: Make the content more attractive

The Anqi CMS content editor is not only powerful but also designed with the convenience of users in mind.Whether it is inserting images, embedding videos, or adding code blocks, it provides an intuitive and easy-to-use interface and intelligent background processing to help you easily create high-quality, multimedia, and well-structured content.Fully utilize these features, making your website content more attractive and better serving your readers and business goals.

Frequently Asked Questions (FAQ)

1. Why doesn't the front page show the latest image I uploaded, or is the image displayed unclear?

This is usually caused by browser cache. You can try clearing the browser cache or force refresh the page (on Windows system usually press Ctrl+F5, on macOS system press Cmd+Shift+R).If the image is not clear, it may be because the "Auto-compress large images" feature is enabled in the "Content Settings" of the background, and the compression width is set too low.You can adjust the compression width or turn off this feature and use 'Batch regenerate thumbnails' to update the images.

2. After embedding a video in the article, I found that the page loading speed has slowed down. What methods can be used to solve this?

Locally uploaded large video files may indeed affect page loading speed.Suggest you upload the video to a professional third-party video platform (such as Bilibili, YouTube, etc.), and then paste the sharing link of the video into the content editor of AnQi CMS, and display it through the embedded way.This can take advantage of the powerful distribution capabilities and bandwidth of the video platform, effectively reducing the load on your server, thereby significantly improving page loading speed and video playback smoothness.

3. How did I insert a code block, but the code is not highlighted, what's the matter?

Please check if you have selected the correct programming language when inserting a code block.Code highlighting usually requires specifying the language type. If you are using a Markdown editor, please confirm that the Markdown editor has been enabled in the "Global Settings" -> "Content Settings" of the Anqi CMS backend.For more advanced Markdown rendering such as mathematical formulas and flowcharts, it is necessary to ensure that the corresponding JavaScript libraries (such as MathJax and Mermaid) are correctly included in your front-end template.