vue项目引入vue-markdown-editor问题

是赵敢敢啊 2022-10-11 19:48:44

 我按照https://ckang1229.gitee.io/vue-markdown-editor/zh/examples/codemirror-editor.html#%E5%BC%95%E5%85%A5官网的指引在vue项目中引入这个组件,但是当我运行起来的时候着实是有点奇怪,因为这个引入的md编辑器他写东西是居中对齐的,目前我还不知道怎么解决,运行效果如图所示,他的字是在中间写的,我不知道怎么才能给他改成左对齐

 main.js如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
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';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';

VMdEditor.Codemirror = Codemirror;

VMdEditor.use(githubTheme, {
  Hljs: hljs,
});

Vue.use(VMdEditor);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

- 页面配置如下

<template>
  <v-md-editor v-model="text" height="400px" />
</template>
<script>
  export default {
    data(){
      return{
        text: ''
      }
    }
  }
</script>

 

...全文
207 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
CSDN-Ada助手 2023-01-13
  • 打赏
  • 举报
回复
您可以前往 CSDN问答-前端 发布问题, 以便更快地解决您的疑问

1,937

社区成员

发帖
与我相关
我的任务
社区描述
Vue是一套用于构建用户界面的渐进式JavaScript框架。我们更加关注于spa单页面应用、uni-app、vue3、微前端、基于vue的低码平台。
前端 技术论坛(原bbs)
社区管理员
  • community_283
  • 槿畔
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

亲爱的CSDN小伙伴你们好,我是一个全新的社区,成立之初请CSDN的小伙伴们帮忙推广一下我们VUE社区,欢迎大家来这里讨论VUE相关问题哦~

另外对社区做出重大贡献者,可以联系版主授予称号~

试试用AI创作助手写篇文章吧