Content Editor #

The content editor allows you to create and manage content for your application. There are two types of tools available in the content editor:

• Canvas - The canvas allows you to create and edit content for your application. You can add text, images, videos, links, tables, lists, and more to your content. You can also add custom components to your content.
• Custom Code - The custom code allows you to add custom code to your content. You can add Vue.js code, HTML code, and CSS code to your content.

Getting Started #

Before you begin, make sure you have completed the following:

• Create Menu - Create a menu for your content.
• Assign Menu to Side Menu - Assign the menu to side menu.

To ensure that the menu is available. In Content Editor, you can view the list of menus that you have created.

Custom Code #

Custom Code allows you to add custom code to your content. You can add Vue.js code, HTML code, and CSS code to your content. You can also add custom components to your content.

Advantages of Custom Code #

• You can customize the look and feel of your content.
• There are a build in code editor that allows you to write code easily.
• Code formatter is available to format your code.
• Full screen mode is available to maximize your code editor. Focus on code editor and press F11 to enter full screen mode.
• Linter is available to check your code for errors. This will help you to write clean code and avoid errors.

Disadvantages of Custom Code #

• You need to know how to write code to use this feature.
• There is no preview mode available. You need to save the code to see the result.
• Time consuming to write code.

Adding Custom Code #

To add custom code, follow these steps:

1. Navigate to the Content Editor page
2. Select the menu that you want to add custom code to
3. Click the Code Icon button
4. Enter the code in the text editor
5. There are some shortcuts available in the code editor:
   • F11 - Enter full screen mode
6. You can set different theme for the code editor. Click the dropdown menu at the top left of the code editor to select the theme
7. Format your code by clicking the Format Code button at the top right of the code editor
8. Click the Save button to save the code

Example of Custom Code #

Below is an example of custom code:

<template>
    <div>
        <h1>Custom Code</h1>
        <p>This is an example of custom code.</p>
    </div>
</template>

<script setup>
    // Add your Vue.js code here
</script>

<style scoped>
    /* Add your CSS code here */
</style>

Alternatives to Custom Code #

• Canvas

Canvas #

Coming soon...