vditor轻量级md编辑器

vditor一种轻量级的Markdown编辑器

安装vditor
yarn add vditor 或者 npm install vditor --save

使用

<template><div class="editorRef"><div ref="editorRef" class="vditor"></div></div>
</template>
<script >
import { ElMessage } from "element-plus";
import {defineComponent,onMounted,onBeforeUnmount,ref,nextTick,toRefs,reactive,
} from "vue";
import Vditor from "vditor";
import "vditor/dist/index.css";
import { getApiUrlNew } from "@/utils/auth";
import upload from "@/utils/upload";
export default defineComponent({name: "Vditor",filters: {},props: {contentHtml: {type: String,default: "",},},setup(porps, content) {const state = reactive({isMobile: window.innerWidth <= 960,});const editorRef = ref();let instance;// 初始化 方法function init() {instance = new Vditor(editorRef.value, {width: state.isMobile ? "100%" : "100%",minHeight: 700,mode: "sv", //可选模式：sv, ir, wysiwygtoolbarConfig: {pin: true,},theme: "classic", //主题：classic, darkicon: "material", //图标风格：ant, materialtoolbar: ["emoji","headings","bold","italic","strike","link","|","list","ordered-list","check","outdent","indent","|","quote","line","code","inline-code","insert-before","insert-after","|","upload","table","|","undo","redo","|","edit-mode",{name: "more",toolbar: ["both","code-theme","content-theme","export","outline","preview","devtools","info","help",],},],counter: "999999", //允许输入的最大值typewriterMode: true,cache: {enable: false,actions: ["desktop", "tablet", "mobile", "mp-wechat", "zhihu"],delay: 1000,hljs: {enable: true,lineNumber: false,style: "github",},markdown: {autoSpace: false,codeBlockPreview: true,fixTermTypo: false,footnotes: true,linkBase: "",linkPrefix: "",listStyle: false,mark: false,mathBlockPreview: true,paragraphBeginningSpace: false,sanitize: true,toc: false,},math: {engine: "KaTeX",inlineDigit: false,macros: {},},width: "auto",mode: "both",// index: 999999,// outline:{//   enable:true,//   position:'left'// }},preview: {delay: 100,show: !state.isMobile,},after: () => {instance.setValue(porps.contentHtml);},input: (val) => {content.emit("update:contentHtml", val);},// 这里写上传upload: {max: 5 * 1024 * 1024,// linkToImgUrl: '',handler(file) {console.log(file);upload.uploadFile(getApiUrlNew(), file[0]).then((res) => {let type = file[0].type;let name = file[0].name;onloadCallback(res, type, name);});},},});}const onloadCallback = (oEvent, type, name) => {if (oEvent.code != 200) {return ElMessage({type: "error",message: "上传失败,请重新上传",});}let imgMdStr = "";if (type.indexOf("image") > -1) {imgMdStr = `![](${process.env.VUE_APP_BASE_HOST + oEvent.url})`;} else {imgMdStr = `![${name}](${process.env.VUE_APP_BASE_HOST + oEvent.url})`;}if (instance) {instance.insertValue(imgMdStr);}};// 初始化编辑器onMounted(() => {nextTick(() => {init();});});// 销毁onBeforeUnmount(() => {instance.destroy();instance = null;});// 获取编辑器内容function getEditValue() {return instance.getValue();}return {editorRef,...toRefs(state),getEditValue,};},computed: {},components: {},data() {return {};},methods: {},mounted() {},
});
</script>
<style lang="scss" scoped>
</style>

详情可参考文档

vditor轻量级md编辑器相关推荐

Markdown (CSDN) MD编辑器（三）- 图片缩放、指定尺寸、居中、左对齐、右对齐
目录一.csdn的MD编辑器插入图片的方式: 1.1 图片对齐方式 1.2 指定图片尺寸二.内嵌HTML语法实现插入图片三.实例讲解 Markdown是一种轻量级标记语言,排版语法简洁,让人 ...
JQuery轻量级网页编辑器选中即可编辑
目前流行的可视化网页编辑器非常多,像ckeditor.kindeditor.tinyeditor等,虽然功能都非常强大,但是体积都比较庞大,使用起来也不是很方便.今天我们分享一款基于jQuery的轻 ...
CSDN产品公告：APP新增大厂在线刷题功能、博主排名规则更新、MD编辑器优化
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blogdev.blog.csdn.net/article/deta ...
Typora 开始收费, 不妨试试这个开源免费的MD编辑器
相信大家很多人都已经知道了, 最好用最受欢迎的 markdown 编辑器 - Typora, 从 1.0.0 版本已经开始收费, 根据其官网的介绍, 收费方式为买断制, 也就是一次付费永久使用, 价格 ...
轻量级程序编辑器的选择：EmEditor、Editplus等---Web开发系列之工具篇
近一段时间将精力转向了Web开发领域,主要学习了PHP的开发技术,进一步熟悉和研究了JavaScript的应用.而在这一过程中, 陆续试用了不少的开发工具,今天稍作整理做个这方面的总结,也希望能给在工 ...
轻量级程序编辑器的选择：EmEditor、Editplus等---Web开发系列之工具篇（一）
近一段时间将精力转向了Web开发领域,主要学习了PHP的开发技术,进一步熟悉和研究了JavaScript的应用.而在这一过程中, 陆续试用了不少的开发工具,今天稍作整理做个这方面的总结,也希望能给在工 ...
vue 所见即所得_用于Vue.js的轻量级所见即所得编辑器
vue 所见即所得 Vue Wysiwyg (vue wysiwyg) A lightweight WYSIWYG editor for Vue.js 用于Vue.js的轻量级所见即所得编辑器用法 ...
trumbowyg 超级轻量级文本编辑器使用说明
trumbowyg 超级轻量级文本编辑器使用说明最近项目里要用一个富文本编辑器,鉴于项目实际要求,编辑器不能太大,要是轻量级的. 目前文本编辑主流的大致有以下几种: 国产编辑器:百度ueditor, ...
CSDN 简单的MD编辑器-基础知识
学长让我写博客学习c语言,写了几篇,但是总觉得文章界面不好看,然后找到一些资料,那就开始新的界面吧! 开始你的MD编辑器吧!!(妈的编辑器) 复制,直接应用 > 块引用 @[TOC] # ...

vditor轻量级md编辑器

vditor一种轻量级的Markdown编辑器

vditor轻量级md编辑器相关推荐

最新文章

热门文章