### Installing Vue Markdown Editor with npm

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/README.md

This snippet demonstrates how to install the `@kangc/v-md-editor` package using npm. The `@next` tag ensures the installation of the latest development version.

```bash
npm i @kangc/v-md-editor@next -S
```

--------------------------------

### Installing Vue Markdown Editor with npm/yarn

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/quick-start.md

These commands demonstrate how to install the `@kangc/v-md-editor` library using either npm or yarn package managers. The `-S` flag for npm saves the package as a production dependency.

```bash
# use npm
npm i @kangc/v-md-editor -S

# use yarn
yarn add @kangc/v-md-editor
```

--------------------------------

### Initializing Vue.js Application on Window Load (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/dev/test-cdn.html

This JavaScript snippet initializes a new Vue.js instance when the window has finished loading. It targets the HTML element with the ID 'app' and logs the Vue instance to the console, demonstrating a basic setup for a Vue application.

```JavaScript
window.onload = function () { const vm = new Vue({ el: '#app', }); console.log(vm); };
```

--------------------------------

### Installing Vue Markdown Editor with Yarn

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/README.md

This snippet demonstrates how to install the `@kangc/v-md-editor` package using Yarn. The `@next` tag ensures the installation of the latest development version.

```bash
yarn add @kangc/v-md-editor@next
```

--------------------------------

### Importing and Registering Tip Plugin in JavaScript

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/tip.md

This snippet demonstrates how to import the `VueMarkdownEditor` and the `createTipPlugin` from the `@kangc/v-md-editor` library, then registers the Tip plugin with the editor instance. This setup is required before using the Tip functionality in the Vue Markdown Editor.

```JavaScript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createTipPlugin from '@kangc/v-md-editor/lib/plugins/tip/index';

VueMarkdownEditor.use(createTipPlugin());
```

--------------------------------

### Configuring Vue Markdown Editor with Custom Block Types (HTML/JS)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/theme/vuepress.md

This example demonstrates how to integrate the v-md-editor component into a Vue template, configuring its left-toolbar to include a 'tip' button. It also shows how to define various custom block types like 'tip', 'warning', and 'danger' within the markdown content, including examples with custom titles.

```html
<template>
  <v-md-editor v-model="text" left-toolbar="undo redo | tip" height="500px" />
</template>
```

```javascript
<script>
  const text = `::: tip
  你可以点击 toolbar 中的 tip 来快速插入
:::

::: warning
  这是一段警告
:::

::: danger
这是一个危险警告
:::

::: tip 自定义标题
  你也可以自定义块中的标题
:::

::: danger STOP
  危险区域，禁止通行
:::
`;

  export default {
    data() {
      return {
        text,
      };
    },
  };
</script>
```

--------------------------------

### Initializing Vue Markdown Editor in a Vue 3 Application

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/README.md

This snippet shows the basic setup for integrating the Vue Markdown Editor into a Vue 3 application. It imports the necessary components and styles, applies the `vuepressTheme`, and registers the editor globally with the Vue app.

```javascript
import { createApp } from 'vue';
import App from 'App.vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

VueMarkdownEditor.use(vuepressTheme);

createApp(App).use(VueMarkdownEditor);
```

--------------------------------

### Implementing VuePress Theme Tips in Vue Markdown Editor

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/theme/vuepress.md

This snippet demonstrates how to integrate the VuePress theme with `v-md-editor` to utilize its built-in tip functionality. It shows how to configure the `left-toolbar` property to include 'tip' for quick insertion and provides examples of different tip types (tip, warning, danger) within the markdown content.

```html
<template>
  <v-md-editor v-model="text" left-toolbar="undo redo | tip" height="500px" />
</template>
```

```javascript
<script>
  const text = `::: tip 
  You can click on the tip in the toolbar to quickly insert
:::

::: warning
  This is a warning
:::

::: danger
  This is a danger warning
:::

::: tip Custom title
  You can also customize the title
:::

::: danger STOP
  Hazardous areas, no traffic
:::
`;

  export default {
    data() {
      return {
        text,
      };
    },
  };
</script>
```

--------------------------------

### Embedding Extended Github Theme Component in Vue

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/theme/github.md

This HTML snippet demonstrates how to embed the `extend-github-theme` component within a `ClientOnly` wrapper. This component likely showcases the `VueMarkdownEditor` after it has been configured with extended language support, such as JSON highlighting, as described in the preceding JavaScript example.

```HTML
<ClientOnly>
  <extend-github-theme />
</ClientOnly>
```

--------------------------------

### Basic Usage of Vue Markdown Editor Component

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/quick-start.md

This Vue Single File Component example demonstrates the basic usage of the `<v-md-editor>` component. It binds the editor's content to a `text` data property using `v-model` and sets a fixed height of `400px` for the editor.

```vue
<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
```

--------------------------------

### Using VMdPreview Component in Vue Template

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/examples/preview-demo.md

This example illustrates the basic usage of the `v-md-preview` component within a Vue template. It shows how to declare a `text` data property in the component's script section and bind it to the `v-md-preview` component using the `:text` prop, which will display the Markdown content.

```vue
<template>
  <v-md-preview :text="text"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
```

--------------------------------

### Extending VuePress Theme with Additional Prism Languages (JS)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/theme/vuepress.md

This snippet illustrates how to extend the VueMarkdownEditor's VuePress theme to support additional code highlighting languages. It shows the necessary imports for the editor and theme, along with an example of importing a specific Prism.js language package (e.g., prism-json) to enable highlighting for that language. It's crucial to import language packages after the theme.

```javascript
import VueMarkdownEditor from '@kangc/v-md-editor';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
// 直接按需引入 prism 的语言包即可，此处以 json 为例
import 'prismjs/components/prism-json';

VueMarkdownEditor.use(vuepressTheme);
```

--------------------------------

### Using Vue Markdown Editor with Katex Plugin in Vue.js

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/katex.md

This Vue component demonstrates how to integrate the `v-md-editor` into a Vue application and bind its content to a data property. The example shows a basic setup for displaying a Katex formula within the editor.

```vue
<template>
  <v-md-editor v-model="text" height="500px" />
</template>

<script>
export default {
  data() {
    return {
      text: '$$sum_{i=1}^n a_i=0$$',
    };
  },
};
</script>
```

--------------------------------

### Inserting Content into Vue Markdown Editor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/api.md

This JavaScript example demonstrates the usage of the `editor.insert` method to programmatically insert text into the editor. It shows how to wrap selected content with markdown syntax (e.g., bold) or insert default text if nothing is selected, returning an object with the `text` to insert and the `selected` portion.

```js
editor.insert((selected) => {
  const prefix = '**';
  const suffix = '**';
  const content = selected || '粗体';

  return {
    text: `${prefix}${content}${suffix}`,
    selected: content,
  };
});
```

--------------------------------

### Importing and Registering Highlight Lines Plugin in Vue Markdown Editor

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/highlight-lines.md

This snippet demonstrates how to import the Vue Markdown Editor and its highlight lines plugin, then register the plugin for use within the editor instance. This setup is essential for enabling line highlighting capabilities.

```JavaScript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index';

VueMarkdownEditor.use(createHighlightLinesPlugin());
```

--------------------------------

### Using Vue Markdown Editor with Katex - Vue.js

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/katex.md

This Vue component example demonstrates the practical usage of the `v-md-editor` with Katex enabled. It binds the editor's content to a `text` data property, showcasing how to display and edit mathematical expressions within the editor.

```vue
<template>
  <v-md-editor v-model="text" height="500px" />
</template>

<script>
export default {
  data() {
    return {
      text: '$$sum_{i=1}^n a_i=0$$',
    };
  },
};
</script>
```

--------------------------------

### Basic Usage of VMdEditor Component (Vue)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/examples/codemirror-editor.md

This example shows the basic integration of the `v-md-editor` component within a Vue single-file component. It binds the editor's content to a `text` data property using `v-model` and sets a fixed height of `400px`. The `text` property in the `data` function serves as the two-way binding for the editor's content.

```vue
<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
```

--------------------------------

### Ensuring Promise Support with Polyfill (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/dev/test-cdn.html

This snippet checks for the existence of `window.Promise` and, if not found, dynamically injects a script to load a Promise polyfill (`pinkie.min.js`). This ensures older browsers have Promise functionality available.

```JavaScript
window.Promise || document.write('<script src="//img.yzcdn.cn/huiyi/build/h5/js/pinkie.min.js"><\\/script>');
```

--------------------------------

### Importing VMdPreview and GitHub Theme in JavaScript

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/examples/preview-demo.md

This snippet demonstrates how to import the `VMdPreview` component and the `githubTheme` from `@kangc/v-md-editor`. It then applies the GitHub theme to the preview component and registers `VMdPreview` globally with Vue, making it available throughout the application.

```js
import Vue from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';

VMdPreview.use(githubTheme);

Vue.use(VMdPreview);
```

--------------------------------

### Initializing Vue Markdown Preview Component

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/question.md

This JavaScript snippet shows how to globally register the `VMdPreview` component and its associated styles and themes (e.g., GitHub theme) in a Vue application. This is necessary when only markdown rendering is required without the full editor functionality.

```js
// main.js
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// Introduce the theme you use. Take the github theme as an example here
import githubTheme from '@kangc/v-md-editor/lib/theme/github';

VMdPreview.use(githubTheme);
Vue.use(VMdPreview);
```

--------------------------------

### Importing and Registering VMdEditor with GitHub Theme (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/examples/codemirror-editor.md

This snippet demonstrates how to import the `v-md-editor` CodeMirror component and its associated styles, apply the GitHub theme, and register it globally with Vue. It requires `vue` and `@kangc/v-md-editor` packages. The `VMdEditor.use(githubTheme)` line applies the visual styling, and `Vue.use(VMdEditor)` makes the component available application-wide.

```js
import Vue from 'vue';
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';

VMdEditor.use(githubTheme);

Vue.use(VMdEditor);
```

--------------------------------

### Introducing Katex Resources from CDN - HTML

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/katex.md

This snippet demonstrates how to include the necessary Katex CSS stylesheet and JavaScript library from a CDN. These resources are fundamental prerequisites for enabling Katex's mathematical rendering capabilities in a web application.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
```

--------------------------------

### Customizing Vue Markdown Editor Theme with Highlight.js

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/question.md

This JavaScript configuration demonstrates how to set up a custom theme for Vue Markdown Editor using `highlight.js` for code highlighting. It shows how to import the base editor styles, create an `hljs` theme, extend it to register specific languages (e.g., JSON), and apply it to the editor.

```js
// main.js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import createHljsTheme from '@kangc/v-md-editor/lib/theme/hljs';
// 按需引入 highlightjs 的语言包，此处以 json 为例
import json from 'highlight.js/lib/languages/json';

const hljsTheme = createHljsTheme();
hljsTheme.extend((md, hljs) => {
  // md为 markdown-it 实例，可以在此处进行修改配置,并使用 plugin 进行语法扩展
  // md.set(option).use(plugin);

  // 注册语言包
  hljs.registerLanguage('json', json);
});
VueMarkdownEditor.theme(hljsTheme);

Vue.use(VueMarkdownEditor);
```

--------------------------------

### Importing and Registering Vue Markdown Preview Component

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/question.md

This JavaScript snippet shows how to import and globally register the `VMdPreview` component, along with its styles and a theme (e.g., GitHub theme), for rendering markdown without the full editor functionality. This is ideal for read-only markdown display.

```js
// main.js
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// 引入你所使用的主题 此处以 github 主题为例
import githubTheme from '@kangc/v-md-editor/lib/theme/github';

VMdPreview.use(githubTheme);
Vue.use(VMdPreview);
```

--------------------------------

### Importing VMdPreview Component in Vue.js

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/examples/preview-demo.md

This snippet demonstrates how to import and register the `VMdPreview` component and its associated GitHub theme in a Vue.js application. It requires `@kangc/v-md-editor/lib/preview` and `@kangc/v-md-editor/lib/theme/github.js` as dependencies. The `VMdPreview` component is then globally registered for use throughout the application.

```javascript
import Vue from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';

VMdPreview.use(githubTheme);

Vue.use(VMdPreview);
```

--------------------------------

### Including Katex Resources via CDN in HTML

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/katex.md

This HTML snippet demonstrates how to include the necessary Katex CSS stylesheet and JavaScript library from a CDN. These resources are prerequisites for rendering mathematical formulas using Katex within the editor.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" />
<script src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>
```

--------------------------------

### Global Registration and Theme Configuration for Vue Markdown Editor

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/quick-start.md

This JavaScript snippet shows how to globally register the `VueMarkdownEditor` plugin with Vue. It imports the core component, its base styles, and a specific `vuepress` theme, then applies the theme before registering the editor as a Vue plugin.

```js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';

VueMarkdownEditor.use(vuepressTheme);

Vue.use(VueMarkdownEditor);
```

--------------------------------

### Importing Tip Plugin into Vue Markdown Editor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/tip.md

This snippet demonstrates how to import and register the 'tip' plugin with Vue Markdown Editor. It requires importing the main editor component and the `createTipPlugin` function, then using `VueMarkdownEditor.use()` to activate the plugin globally.

```JavaScript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createTipPlugin from '@kangc/v-md-editor/lib/plugins/tip/index';

VueMarkdownEditor.use(createTipPlugin());
```

--------------------------------

### Customizing Vue Markdown Editor Theme with Highlight.js

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/question.md

This JavaScript configuration demonstrates how to customize the Vue Markdown Editor's theme using `highlight.js` for code highlighting. It shows how to import the base editor style, create a `highlight.js` theme, extend it to register specific language packs (e.g., JSON), and apply it to the editor.

```js
// main.js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import createHljsTheme from '@kangc/v-md-editor/lib/theme/hljs';
// Introduce highlightjs language packs as needed, here is json as an example
import json from 'highlight.js/lib/languages/json';

const hljsTheme = createHljsTheme();
hljsTheme.extend((md, hljs) => {
  // md is a markdown-it instance, you can modify the configuration here, and use plugin for syntax expansion
  // md.set(option).use(plugin);

  // Register Language Pack
  hljs.registerLanguage('json', json);
});
VueMarkdownEditor.theme(hljsTheme);

Vue.use(VueMarkdownEditor);
```

--------------------------------

### Importing Vue Markdown Editor with GitHub Theme (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/examples/base-editor.md

This snippet demonstrates how to import the Vue Markdown Editor (VMdEditor) along with its base styles and the GitHub theme. It then registers the GitHub theme with the editor and makes the VMdEditor globally available for use in Vue applications.

```js
import Vue from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';

VMdEditor.use(githubTheme);

Vue.use(VMdEditor);
```

--------------------------------

### Importing Katex Plugin for Vue Markdown Editor - JavaScript

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/katex.md

This JavaScript snippet illustrates how to import the main Vue Markdown Editor and its specific Katex plugin. It then registers the Katex plugin with the editor instance, activating the mathematical expression rendering feature.

```javascript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn';

VueMarkdownEditor.use(createKatexPlugin());
```

--------------------------------

### Integrating Katex Plugin with Vue Markdown Editor in JavaScript

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/katex.md

This JavaScript snippet illustrates how to import the Vue Markdown Editor and its Katex plugin, then register the plugin with the editor instance. This step activates Katex rendering functionality within the editor.

```javascript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn';

VueMarkdownEditor.use(createKatexPlugin());
```

--------------------------------

### Extending Highlight.js Language Support in Vue Markdown Editor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/theme/github.md

This snippet demonstrates how to extend the `highlight.js` language support in the Vue Markdown Editor's GitHub theme. It shows importing the `json` language package and registering it with `highlight.js` within the `extend` function of the `githubTheme` configuration, allowing the editor to highlight JSON code blocks.

```JavaScript
import VueMarkdownEditor from '@kangc/v-md-editor';
// 按需引入 highlightjs 的语言包，此处以 json 为例
import json from 'highlight.js/lib/languages/json';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';

VueMarkdownEditor.use(githubTheme, {
  extend(md, hljs) {
    // md为 markdown-it 实例，可以在此处进行修改配置,并使用 plugin 进行语法扩展
    // md.set(option).use(plugin);
    // 注册语言包
    hljs.registerLanguage('json', json);
  }
});
```

--------------------------------

### Customizing Vue Markdown Editor Theme with Prism.js

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/question.md

This JavaScript configuration illustrates how to integrate `prism.js` for code highlighting with a custom theme in Vue Markdown Editor. It involves importing the base editor styles, creating a `prism` theme, and directly importing required Prism.js language components (e.g., JSON) for syntax highlighting.

```js
// main.js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import creatPrismTheme from '@kangc/v-md-editor/lib/theme/prism';
// 直接按需引入 prism 的语言包即可，此处以 json 为例
import 'prismjs/components/prism-json';

const prismTheme = creatPrismTheme();
prismTheme.extend((md) => {
  // md为 markdown-it 实例，可以在此处进行修改配置,并使用 plugin 进行语法扩展
  // md.set(option).use(plugin);
});
VueMarkdownEditor.theme(prismTheme);

Vue.use(VueMarkdownEditor);
```

--------------------------------

### Using Vue Markdown Preview Component to Render Text

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/question.md

This Vue component snippet demonstrates how to use the `v-md-preview` component to display markdown text. It takes a `text` prop, which should contain the markdown string to be rendered, providing a lightweight solution for markdown display.

```vue
<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      markdown: '### 标题',
    };
  },
};
</script>
```

--------------------------------

### Extending Language Highlighting for VuePress Theme

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/theme/vuepress.md

This JavaScript snippet illustrates how to extend the default language highlighting support of the VuePress theme for `v-md-editor`. It shows how to import additional Prism language packs, such as 'prism-json', and apply them after the theme is introduced to enable highlighting for more code types.

```javascript
import VueMarkdownEditor from '@kangc/v-md-editor';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
// Introduce prism language packs as needed, here is json as an example
import 'prismjs/components/prism-json';

VueMarkdownEditor.use(vuepressTheme);
```

--------------------------------

### Importing and Registering Copy Code Plugin (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/copy-code.md

This snippet demonstrates how to import the `VueMarkdownEditor` and the `createCopyCodePlugin` from the `@kangc/v-md-editor` library. It then registers the copy code plugin with the `VueMarkdownEditor` instance using `VueMarkdownEditor.use()`, enabling the copy functionality for code blocks.

```javascript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';

VueMarkdownEditor.use(createCopyCodePlugin());
```

--------------------------------

### Customizing Vue Markdown Editor Theme with Prism.js

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/question.md

This JavaScript configuration illustrates how to customize the Vue Markdown Editor's theme using `prism.js` for code highlighting. It involves importing the base editor style, creating a `prism.js` theme, and registering necessary language packs (e.g., JSON) before applying the theme to the editor.

```js
// main.js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import creatPrismTheme from '@kangc/v-md-editor/lib/theme/prism';
// Introduce prism language packs as needed, here is json as an example
import 'prismjs/components/prism-json';

const prismTheme = creatPrismTheme();
prismTheme.extend((md) => {
  // md is a markdown-it instance, you can modify the configuration here, and use plugin for syntax expansion
  // md.set(option).use(plugin);
});
VueMarkdownEditor.theme(prismTheme);

Vue.use(VueMarkdownEditor);
```

--------------------------------

### Ensuring Promise Support in JavaScript

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/dev/index.html

This JavaScript snippet checks for the global `Promise` object. If `Promise` is not available, it dynamically writes a `<script>` tag to the document to load `pinkie.min.js`, a Promise polyfill. This ensures that modern JavaScript features relying on Promises are available, even in older browser environments, which is crucial for the Vue Markdown Editor's operation.

```JavaScript
window.Promise || document.write('<script src=\"//img.yzcdn.cn/huiyi/build/h5/js/pinkie.min.js\">\\/script>');
```

--------------------------------

### Configuring Codemirror in Vue Markdown Editor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/api.md

This JavaScript snippet illustrates how the `codemirrorConfig` prop is utilized to pass custom configuration options directly to the underlying Codemirror editor instance. It demonstrates setting properties like `tabSize`, `lineNumbers`, `styleActiveLine`, `mode`, `lineWrapping`, and `scrollbarStyle`.

```js
new Codemirror(this.$refs.codemirrorEditor, {
  tabSize: 2,
  lineNumbers: true,
  styleActiveLine: true,
  ...this.codemirrorConfig,
  value: this.text,
  mode: 'markdown',
  lineWrapping: 'wrap',
  scrollbarStyle: 'overlay',
  dragDrop: false,
});
```

--------------------------------

### Importing and Using Line Number Plugin for Vue Markdown Editor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/line-number.md

This snippet demonstrates how to import the `VueMarkdownEditor` and the `createLineNumbertPlugin` from the `@kangc/v-md-editor` package. It then shows how to register the line number plugin with the `VueMarkdownEditor` instance using the `use()` method, enabling line number display for code blocks.

```JavaScript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';

VueMarkdownEditor.use(createLineNumbertPlugin());
```

--------------------------------

### Importing and Registering Highlight Lines Plugin in Vue Markdown Editor

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/highlight-lines.md

This snippet demonstrates how to import the `VueMarkdownEditor` and `createHighlightLinesPlugin` modules, then register the highlight lines plugin with the editor instance. This enables the line highlighting feature for code blocks within the Vue Markdown Editor.

```JavaScript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index';

VueMarkdownEditor.use(createHighlightLinesPlugin());
```

--------------------------------

### Using Tip Plugin in Vue Template

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/tip.md

This Vue component snippet shows how to integrate the `v-md-editor` into a template, enabling the 'tip' functionality in the toolbar. It binds the editor's content to a `text` data property and sets a fixed height. The `left-toolbar` attribute includes 'tip' to make the plugin accessible.

```Vue
<template>
  <v-md-editor v-model="text" left-toolbar="undo redo | tip" height="500px" />
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
```

--------------------------------

### Importing and Registering TodoList Plugin in Vue Markdown Editor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/todo-list.md

This snippet demonstrates how to import the `createTodoListPlugin` from `@kangc/v-md-editor` and register it with the `VueMarkdownEditor` instance. This step is essential to enable the todo-list functionality within the editor.

```js
import VueMarkdownEditor from '@kangc/v-md-editor';
import createTodoListPlugin from '@kangc/v-md-editor/lib/plugins/todo-list/index';

VueMarkdownEditor.use(createTodoListPlugin());
```

--------------------------------

### Extending Vue Markdown Editor with JSON Language Highlighting

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/theme/github.md

This JavaScript snippet shows how to extend the `VueMarkdownEditor` to support additional language highlighting, specifically for JSON. It imports the `json` language pack from `highlight.js` and registers it with the `hljs` instance within the `extend` function of the `githubTheme` plugin. This allows the editor to correctly highlight JSON code blocks.

```JavaScript
import VueMarkdownEditor from '@kangc/v-md-editor';
// Introduce highlightjs language packs as needed, here is json as an example
import json from 'highlight.js/lib/languages/json';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';

VueMarkdownEditor.use(githubTheme, {
  extend(md, hljs) {
    // md is a markdown-it instance, you can modify the configuration here, and use plugin for syntax expansion
    // md.set(option).use(plugin);
    // Register Language Pack
    hljs.registerLanguage('json', json);
  }
});
```

--------------------------------

### Importing and Registering Copy Code Plugin in JavaScript

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/copy-code.md

This snippet demonstrates how to import the `createCopyCodePlugin` from `@kangc/v-md-editor` and register it with `VueMarkdownEditor`. This step is essential to enable the copy code functionality within the editor.

```javascript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';

VueMarkdownEditor.use(createCopyCodePlugin());
```

--------------------------------

### Importing and Registering TodoList Plugin for Vue Markdown Editor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/todo-list.md

This JavaScript snippet demonstrates how to import the VueMarkdownEditor and the createTodoListPlugin. It then registers the TodoList plugin with the editor instance using VueMarkdownEditor.use(), making its features available. The createTodoListPlugin function can optionally accept an options object, such as { color: '#3eaf7c' }, to customize the checkbox appearance.

```JavaScript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createTodoListPlugin from '@kangc/v-md-editor/lib/plugins/todo-list/index';

VueMarkdownEditor.use(createTodoListPlugin());
```

--------------------------------

### Importing Line Number Plugin for VueMarkdownEditor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/line-number.md

This snippet demonstrates how to import the VueMarkdownEditor and its dedicated line-number plugin, then register the plugin using VueMarkdownEditor.use(). This enables line numbering functionality within the editor.

```javascript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';

VueMarkdownEditor.use(createLineNumbertPlugin());
```

--------------------------------

### Programmatically Converting Markdown to HTML with XSS Filtering

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/question.md

This JavaScript snippet demonstrates how to programmatically convert a markdown string into HTML using the `markdownParser.render` method available through the editor's `themeConfig`. It also shows how to apply XSS filtering using the `xss.process` utility for security.

```js
import VueMarkdownEditor, { xss } from '@kangc/v-md-editor';

// 调用方法将 markdown 转换成 html 并使用 xss 过滤
const html = xss.process(VueMarkdownEditor.themeConfig.markdownParser.render('### 标题'));
```

--------------------------------

### Using Tip Plugin in Vue Markdown Editor Template (Vue)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/tip.md

This Vue component snippet illustrates how to integrate the `v-md-editor` component and enable the 'tip' functionality in its toolbar. The `left-toolbar` prop is configured to include 'tip', allowing users to insert tip messages directly from the editor's interface. The `v-model` binds the editor content to a `text` data property.

```Vue
<template>
  <v-md-editor v-model="text" left-toolbar="undo redo | tip" height="500px" />
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
```

--------------------------------

### Using Vue Markdown Editor with Copy Code Plugin in Vue

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/copy-code.md

This Vue component demonstrates the usage of the `v-md-editor` with the copy code plugin enabled. It shows how to bind content using `v-model`, set a fixed height, and handle the `copy-code-success` event, which provides the copied code as an argument.

```vue
<template>
  <v-md-editor v-model="text" height="500px" @copy-code-success="handleCopyCodeSuccess" />
</template>

<script>
export default {
  data() {
    return {
      text: ````js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';

VueMarkdownEditor.use(vuepressTheme);

Vue.use(VueMarkdownEditor);
````
`,
    };
  },
  methods: {
    handleCopyCodeSuccess(code) {
      console.log(code);
    },
  },
};
</script>
```

--------------------------------

### Rendering Markdown in Vue with Standalone Preview Component

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/question.md

This Vue component uses the `v-md-preview` component to render markdown text. It's ideal for projects that only need to display markdown content without editing capabilities, relying on the `VMdPreview` component initialized globally.

```vue
<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      markdown: '### title',
    };
  },
};
</script>
```

--------------------------------

### Rendering Markdown in Vue with Editor Preview Mode

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/question.md

This Vue component demonstrates how to render markdown text directly within the `v-md-editor` component by setting its `mode` to 'preview'. It's suitable when an editor is already integrated into the project.

```vue
<template>
  <v-md-editor :value="markdown" mode="preview"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      markdown: '### title',
    };
  },
};
</script>
```

--------------------------------

### Implementing Custom Anchors for Vue Markdown Editor

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/senior/anchor.md

This Vue component demonstrates how to create a custom anchor navigation for a `v-md-editor` in preview mode. It dynamically extracts headings from the rendered markdown, generates a clickable list, and provides a method to scroll the editor's preview area to the selected heading. It relies on the `v-md-editor`'s internal structure and `data-v-md-line` attributes for accurate scrolling.

```Vue
<template>
  <div>
    <div
      v-for="anchor in titles"
      :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
      @click="handleAnchorClick(anchor)"
    >
      <a style="cursor: pointer">{{ anchor.title }}</a>
    </div>
    <v-md-editor v-model="text" mode="preview" ref="editor" />
  </div>
</template>

<script>
const text = `\n# heading 1\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\n\n## heading 2\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\n\n### heading 3\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\n\n## heading 2\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\n\n### heading 3\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\ncontentcontentcontent\n`;

export default {
  data() {
    return {
      text,
      titles: [],
    };
  },
  mounted() {
    const anchors = this.$refs.editor.$el.querySelectorAll(
      '.v-md-editor-preview h1,h2,h3,h4,h5,h6'
    );
    const titles = Array.from(anchors).filter((title) => !!title.innerText.trim());

    if (!titles.length) {
      this.titles = [];
      return;
    }

    const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort();

    this.titles = titles.map((el) => ({
      title: el.innerText,
      lineIndex: el.getAttribute('data-v-md-line'),
      indent: hTags.indexOf(el.tagName),
    }));
  },
  methods: {
    handleAnchorClick(anchor) {
      const { editor } = this.$refs;
      const { lineIndex } = anchor;

      const heading = editor.$el.querySelector(
        `.v-md-editor-preview [data-v-md-line="${lineIndex}"]`
      );

      if (heading) {
        editor.previewScrollToTarget({
          target: heading,
          scrollContainer: window,
          top: 60,
        });
      }
    },
  },
};
</script>
```

--------------------------------

### Handling Image Uploads in Vue Markdown Editor

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/senior/upload-image.md

This Vue component demonstrates how to integrate image upload functionality into the v-md-editor. It configures the editor to enable the image menu and provides a handleUploadImage method to intercept the upload event, allowing custom logic for file server interaction and inserting the image URL into the editor.

```Vue
<template>
  <v-md-editor
    v-model="text"
    left-toolbar="undo redo | image"
    :disabled-menus="[]"
    @upload-image="handleUploadImage"
    height="500px"
  />
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    handleUploadImage(event, insertImage, files) {
      // Get the files and upload them to the file server, then insert the corresponding content into the editor
      console.log(files);

      // Here is just an example
      insertImage({
        url:
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
        desc: 'desc',
      });
    },
  },
};
</script>
```

--------------------------------

### Using VMdPreview Component in Vue Template

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/examples/preview-demo.md

This snippet illustrates how to integrate the `v-md-preview` component into a Vue template. It binds the markdown content to the `text` prop, which is defined in the component's data. The component will render the markdown string provided by the `text` data property.

```vue
<template>
  <v-md-preview :text="text"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
```

--------------------------------

### Converting Markdown to HTML with Vue Markdown Editor

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/question.md

This JavaScript snippet shows how to programmatically convert markdown text to HTML using the `render` method of the `markdownParser` from the Vue Markdown Editor's theme configuration. It also demonstrates applying XSS filtering to the generated HTML for security.

```js
import VueMarkdownEditor, { xss } from '@kangc/v-md-editor';

// Call method to convert markdown to html and use xss filtering
const html = xss.process(VueMarkdownEditor.themeConfig.markdownParser.render('### 标题'));
```

--------------------------------

### Importing and Registering Emoji Plugin in JavaScript

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/emoji.md

This snippet demonstrates how to import the VueMarkdownEditor and the createEmojiPlugin from the @kangc/v-md-editor library. It then registers the emoji plugin with the VueMarkdownEditor instance, making emoji functionality available globally for all editor instances.

```javascript
import VueMarkdownEditor from '@kangc/v-md-editor';
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';

VueMarkdownEditor.use(createEmojiPlugin());
```

--------------------------------

### Vue Markdown Editor Component with Copy Code Event (Vue)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/copy-code.md

This Vue component demonstrates the usage of the `v-md-editor` component, binding its content to a `text` data property and setting its height. It also shows how to handle the `copy-code-success` event, which is triggered when a code block is successfully copied, logging the copied code to the console.

```vue
<template>
  <v-md-editor v-model="text" height="500px" @copy-code-success="handleCopyCodeSuccess" />
</template>

<script>
export default {
  data() {
    return {
      text: `\`\`\`js
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';

VueMarkdownEditor.use(vuepressTheme);

Vue.use(VueMarkdownEditor);
\`\`\`
`,
    };
  },
  methods: {
    handleCopyCodeSuccess(code) {
      console.log(code);
    },
  },
};
</script>
```

--------------------------------

### Customizing Toolbar in Vue Markdown Editor (Vue.js)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/api.md

This snippet demonstrates how to extend the default toolbar of the Vue Markdown Editor by defining custom buttons using the `toolbar` prop. It shows how to specify an icon, title, and an `action` function that interacts with the editor instance.

```vue
<template>
  <v-md-editor left-toolbar="undo redo | customToolbar" :toolbar="toolbar" />
</template>

<script>
export default {
  data() {
    return {
      toolbar: {
        customToolbar: {
          icon: 'icon class',
          title: 'title',
          action(editor) {},
        },
      },
    };
  },
};
</script>
```

--------------------------------

### Client-Side Rendering of Image Size Component - Vue

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/senior/image-size.md

This snippet demonstrates the usage of the `image-size` component, enclosed within a `<ClientOnly>` wrapper. The `<ClientOnly>` component ensures that its slot content, in this case, the `image-size` component, is rendered exclusively on the client side, preventing server-side rendering issues for browser-dependent components.

```Vue
<ClientOnly>\n  <image-size />\n</ClientOnly>
```

--------------------------------

### Integrating TodoList Feature in Vue Markdown Editor Component (Vue.js)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/todo-list.md

This Vue.js snippet illustrates the usage of the v-md-editor component within a template. It binds the editor's content to a text data property and enables the TodoList feature by including todo-list in the left-toolbar configuration. The initial text value demonstrates the markdown syntax for a completed task.

```Vue.js
<template>
  <v-md-editor v-model="text" left-toolbar="undo redo | todo-list" height="500px" />
</template>

<script>
export default {
  data() {
    return {
      text: '- [x] Task',
    };
  },
};
</script>
```

--------------------------------

### Using Emoji Plugin in Vue Template and Script

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/plugins/emoji.md

This snippet illustrates how to integrate the v-md-editor component into a Vue template, enabling the emoji toolbar option by including 'emoji' in the 'left-toolbar' prop. It also shows how to initialize the editor's content with an emoji shortcode using a data property.

```vue
<template>
  <v-md-editor v-model="text" left-toolbar="undo redo | emoji" height="500px" />
</template>

<script>
export default {
  data() {
    return {
      text: ':grinning:',
    };
  },
};
</script>
```

--------------------------------

### Using TodoList Plugin in Vue Markdown Editor Component (Vue)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/plugins/todo-list.md

This Vue component snippet illustrates how to integrate the `v-md-editor` with the `todo-list` plugin enabled. It shows how to bind the editor's content to a `text` data property and configure the toolbar to include the `todo-list` button. The initial `text` value demonstrates a checked task list item.

```vue
<template>
  <v-md-editor v-model="text" left-toolbar="undo redo | todo-list" height="500px" />
</template>

<script>
export default {
  data() {
    return {
      text: '- [x] 任务列表',
    };
  },
};
</script>
```

--------------------------------

### Extending XSS Whitelist in VMdEditor (JavaScript)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/zh/senior/xss-extend.md

This snippet demonstrates how to extend the XSS whitelist for the VMdEditor component using its `xss.extend` method. It modifies the default `whiteList` to include custom tags or attributes, preventing them from being sanitized. The configuration options are based on the 'xss' npm package.

```JavaScript
import VMdEditor from '@kangc/v-md-editor';

VMdEditor.xss.extend({
  // 扩展白名单
  whiteList: {
    source: [],
  },
});
```

--------------------------------

### Using Vue Markdown Editor Component (Vue)

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/examples/base-editor.md

This Vue snippet illustrates the basic usage of the v-md-editor component within a Vue template. It binds the editor's content to a 'text' data property using v-model and sets a fixed height for the editor.

```vue
<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>
```

--------------------------------

### Defining Custom Toolbars in Vue Markdown Editor

Source: https://github.com/code-farmer-i/vue-markdown-editor/blob/master/docs/senior/toolbar.md

This Vue component demonstrates how to define and integrate custom toolbar buttons into the `v-md-editor`. It showcases three types of custom toolbars: a basic button that inserts formatted text, a dropdown menu with multiple actions, and a panel-style menu displaying a grid of items. The `toolbar` prop is used to pass the custom toolbar definitions, and `left-toolbar` specifies their placement.

```Vue
<template>
  <v-md-editor
    v-model="text"
    left-toolbar="undo redo | customToolbar1 customToolbar2 customToolbar3"
    :toolbar="toolbar"
    height="500px"
  />
</template>

<script>
export default {
  data() {
    this.toolbar = {
      customToolbar1: {
        title: 'base',
        icon: 'v-md-icon-tip',
        action(editor) {
          editor.insert(function (selected) {
            const prefix = '(((';
            const suffix = ')))';
            const placeholder = 'placeholder';
            const content = selected || placeholder;

            return {
              text: `${prefix}${content}${suffix}`,
              selected: content,
            };
          });
        },
      },
      customToolbar2: {
        title: 'menu',
        icon: 'v-md-icon-tip',
        menus: [
          {
            name: 'menu1',
            text: 'menu1',
            action() {
              console.log('click menu1');
            },
          },
          {
            name: 'menu2',
            text: 'menu2',
            action() {
              console.log('click menu2');
            },
          },
        ],
      },
      customToolbar3: {
        title: 'panel',
        icon: 'v-md-icon-tip',
        menus: {
          mode: 'panel',
          itemWidth: '56px',
          rowNum: 5,
          items: [
            {
              text: 'item1',
            },
            {
              text: 'item2',
            },
            {
              text: 'item3',
            },
            {
              text: 'item4',
            },
            {
              text: 'item5',
            },
            {
              text: 'item6',
            },
            {
              text: 'item7',
            },
            {
              text: 'item8',
            },
          ],
        },
      },
    };

    return {
      text: '',
    };
  },
};
</script>
```