vue3中 v-md-editor 编辑器的基本使用分享

本文详细介绍了如何在Vue3项目中安装和使用v-md-editor编辑器,包括编辑器和预览器的配置、自定义主题、上传图片功能以及预览操作。同时提供了代码示例展示编辑器和预览组件的使用,帮助开发者快速掌握这一Markdown编辑器的集成和应用。
摘要由CSDN通过智能技术生成

vue3中 v-md-editor 编辑器的基本使用分享

  1. 安装 (2.3.15以上)
# npm
npm install @kangc/v-md-editor -S
# yarn
yarn add @kangc/v-md-editor@next
  1. 全局引用(main.js)
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';
import Prism from 'prismjs';
// 这是预览时引用的
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';
// highlightjs
import hljs from 'highlight.js';
//预览的主题
VMdPreview.use(githubTheme, {
  Hljs: hljs,
});
//编辑器的主题
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});
//注册
app.use(VMdPreview);
app.use(VueMarkdownEditor);
  1. 使用 (编辑器)
<v-md-editor
  v-model="form.artContent" //绑定的值
  :autofocus="true" //自动选中
  height="400px" //高(必须)
  width="100%"  //宽
  ref="editor"
  :left-toolbar="leftBar" //左侧工具
  :right-toolbar="rightBar" //右侧工具
  :disabled-menus="[]" //禁用菜单
  @upload-image="handleUploadImage" //上传图片的事件
  ></v-md-editor>
  
 import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
 export default defineComponent({
	setup() {
		//左侧工具栏
		const leftBar = ref('undo redo clear h bold italic strikethrough quote ul ol table hr link image code');
		//右侧工具栏
		const rightBar = ref('preview sync-scroll fullscreen');
		
		//Alt + a 实现上传图片
		const handleUploadImage = async (event, insertImage, files) => {
	      // 拿到 files 之后上传到文件服务器,然后向编辑框中插入对应的内容
	      const formData = new FormData();
	      formData.append('file', files[0]);
	      //你自己的上传文件接口
	      let res = await FileApi.commonUpload('N', formData);
	      insertImage({
	      	//state.filePreviewUrl 是我本地的预览接口 你可以换成自己的也可以用上传接口给你反的url
	        url: state.filePreviewUrl + res.data.fileId,
	        desc: res.data.fileOriginName
	      });
	    };
		return { leftBar, rightBar, handleUploadImage  }
	}
})
  1. 实现的效果
    在这里插入图片描述
  2. 预览操作
//预览
<v-md-preview :text="text" ref="preview" @image-click="imgClick" id="preview"></v-md-preview>
//锚点跳转
<div class="navigation">
   <div class="navigation-content" id="permiss">
       <div v-for="(anchor, index) in titles" :key="index + 'art'" :style="{ padding: `10px 0 10px ${anchor.indent * 10}px` }">
            <a style="cursor: pointer; color: black; margin-left: 20px" @click="handleAnchorClick(anchor, index, anchor.indent)">{{
              anchor.title
            }}</a>
       </div>
    </div>
 </div>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
export default defineComponent({
	setup() {
		//值
		const text = ref(null);
		// 预览组件的引用
    	const preview = ref(null);
		//锚点数组
		const titles = ref([]);
		//图片点击
		const imgClick = (url, index) => {
			console.log(url, index);
		};
		//获取锚点数组 获取完接口后调用
		const getTitle = () => {
	      nextTick(() => {
	      //获取所有的标题
	        const anchors = preview.value.$el.querySelectorAll('h1,h2,h3,h4,h5,h6');
	        const titles = Array.from(anchors).filter(title => !!title.innerText.trim());
	        if (!titles.length) {
	          titles.value = [];
	          return;
	        }
	
	        const hTags = Array.from(new Set(titles.map(title => title.tagName))).sort();
			//给每一个加样式
	        titles.value = titles.map(el => ({
	          title: el.innerText,
	          lineIndex: el.getAttribute('data-v-md-line'),
	          indent: hTags.indexOf(el.tagName)
	        }));
	
	        nextTick(() => {
	          //改变样式
	          let arr = document.getElementById('permiss').getElementsByTagName('a');
	          let div = document.getElementById('permiss').getElementsByTagName('div');
	          for (let i = 0; i < arr.length; i++) {
	            if (i == 0) {
	              arr[i].style.color = 'var(--primary-color)';
	              arr[i].style.marginLeft = '20px';
	              div[i].style.borderLeft = '1px solid var(--primary-color)';
	              div[i].style.padding = `10px 0 10px ${data.titles[0].indent * 10}px`;
	            } else {
	              arr[i].style.color = 'black';
	              div[i].style.borderLeft = '1px solid #eee';
	            }
	          }
	        });
	      });
	    };
		return { text, imgClick,titles  }
	}
})

6.预览的效果图
在这里插入图片描述

  1. 官网分享
https://ckang1229.gitee.io/vue-markdown-editor/zh/question.html#%E5%9C%A8-vite-%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%8A%A5%E9%94%99-%E6%97%A0%E6%B3%95%E6%AD%A3%E5%B8%B8%E8%BF%90%E8%A1%8C
  • 3
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
Vue 3 按需引入 v-md-editor 编辑器,你可以按照以下步骤进行操作: 1. 首先,安装 v-md-editor 包及其相关依赖: ``` npm install v-md-editor @kangc/v-md-editor @kangc/v-md-editor/lib/theme/style/vuepress.css ``` 2. 在你的 Vue 3 项目,创建一个名为 `vmdeditor.js` 的文件,用于配置按需引入: ```javascript // vmdeditor.js import { createApp } from 'vue' import VMdEditor 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 { Vditor, CodeMirror, Prism, TextArea } from '@kangc/v-md-editor/lib/codemirror-editor' // 注册编辑器组件 VMdEditor.use(vuepressTheme, { Prism, CodeMirror, TextArea }) // 创建 Vue 应用实例 const app = createApp({}) app.use(VMdEditor) app.mount('#app') ``` 3. 在你的 Vue 3 项目的入口文件(通常是 `main.js`)引入 `vmdeditor.js` 文件: ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import './vmdeditor.js' // 引入 vmdeditor.js 文件 createApp(App).mount('#app') ``` 4. 现在,你可以在 Vue 组件使用 v-md-editor 编辑器组件了。例如,在 `App.vue` 组件使用 Vditor 编辑器: ```vue <template> <v-md-editor> <Vditor v-model="content" /> </v-md-editor> </template> <script> export default { data() { return { content: '' } } } </script> ``` 通过以上步骤,你可以按需引入 v-md-editor 编辑器,并在 Vue 3 项目使用。记得根据你的需求选择合适的编辑器组件进行引入和使用
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值