Markdown.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132
  1. <template>
  2. <div>
  3. <div class="crumbs">
  4. <el-breadcrumb separator="/">
  5. <el-breadcrumb-item>
  6. <i class="el-icon-lx-calendar"></i> 表单
  7. </el-breadcrumb-item>
  8. <el-breadcrumb-item>markdown编辑器</el-breadcrumb-item>
  9. </el-breadcrumb>
  10. </div>
  11. <div class="container">
  12. <div class="plugins-tips">
  13. md-editor-v3:vue3版本的 markdown 编辑器,配置丰富,请详看文档。
  14. 访问地址:
  15. <a href="https://imzbf.github.io/md-editor-v3/index" target="_blank">md-editor-v3</a>
  16. </div>
  17. <md-editor class="mgb20" v-model="text" @on-upload-img="onUploadImg"/>
  18. <el-button type="primary">提交</el-button>
  19. </div>
  20. </div>
  21. </template>
  22. <script setup>
  23. import { ref} from "vue";
  24. import MdEditor from 'md-editor-v3';
  25. import 'md-editor-v3/lib/style.css';
  26. const text = ref('Hello Editor!');
  27. const onUploadImg = (files)=>{
  28. console.log(files)
  29. }
  30. </script>