当前位置:编程学习 > > 正文

vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)

时间:2022-01-23 02:05:39类别:编程学习

vue怎么操作表格

如何在在Vue3中使用markdown 编辑器组件

安装
  • # 使用 npm
    npm i @kangc/v-md-editor@next -S
    
    # 使用yarn
    yarn add @kangc/v-md-editor@next
    
    
  • 引入组件
  • import { creatApp } 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';
    import '@kangc/v-md-editor/lib/theme/style/github.css';
    
    VMdEditor.use(githubTheme);
    
    const app = creatApp(/*...*/);
    
    app.use(VMdEditor);
    
    
  • 基础用法
  • <template>
      <v-md-editor v-model="text" height="400px"></v-md-editor>
    </template>
    
    <script>
    import { ref } from 'vue';
    
    export default {
      setup () {
        const text = ref('');
        
        return {
          text
        }
      }
    }
    </script>
    
    
  • 保存后的 markdown 或者 html 文本如何渲染在页面上?

    1.渲染保存后的 markdown 文本

    方式一:如果你的项目中引入了编辑器。你可以直接使用编辑器的预览模式来渲染。例如

  • <template>
      <v-md-editor :value="markdown" mode="preview"></v-md-editor>
    </template>
    
    <script>
    import { ref } from 'vue';
    
    export default {
      setup () {
        const markdown = ref('');
        
        return {
          markdown
        }
      }
    }
    </script>
    
    
  • 方式二:如果你的项目不需要编辑功能,只需要渲染 markdown 文本你可以只引入 preview 组件来渲染。例如

  • // main.js
    import { creatApp } from 'vue';
    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';
    import '@kangc/v-md-editor/lib/theme/style/github.css';
    
    VMdPreview.use(githubTheme);
    
    const app = creatApp(/*...*/);
    
    app.use(VMdPreview);
    
    
  • <template>
      <v-md-preview :text="markdown"></v-md-preview>
    </template>
    
    <script>
    import { ref } from 'vue';
    
    export default {
      setup () {
        const markdown = ref('');
        
        return {
          markdown
        }
      }
    }
    </script>
    
    
  • 2.渲染保存后的 html 文本

    如果你的项目不需要编辑功能,只需要渲染 html 你可以只引入 preview-html 组件来渲染。例如:

  • // main.js
    import { creatApp } from 'vue';
    import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
    import '@kangc/v-md-editor/lib/style/preview-html.css';
    
    // 引入使用主题的样式
    import '@kangc/v-md-editor/lib/theme/style/vuepress';
    
    const app = creatApp(/*...*/);
    
    app.use(VMdPreviewHtml);
    
    
  • <template>
      <!-- preview-class 为主题的样式类名,例如vuepress就是vuepress-markdown-body -->
      <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
    </template>
    
    <script>
    import { ref } from 'vue';
    
    export default {
      setup () {
        const html = ref('<li data-v-md-line="1"><h1 align="center">Markdown Editor built on Vue</h1>');
        
        return {
          html
        }
      },
    };
    </script>
    
    
  • 更多高级用法参考官方文档:v-md-editor

    以上就是如何在在Vue3中使用markdown 编辑器组件的详细内容,更多关于Vue3中使用markdown 编辑器组件的资料请关注开心学习网其它相关文章!

    上一篇下一篇

    猜您喜欢

    热门推荐