Vue使用Vditor编辑器

1、安装

2、使用

3、获取编辑内容

1、安装

npm install vditor --save

2、使用

<template><div id="vditor" name="description" ></div>
</template>
<script>
import Vditor from "vditor";
import "vditor/src/assets/scss/index.scss";
export default {data(){return{editor:""}},mounted(){this.contentEditor = new Vditor("vditor",{height:360,toolbarConfig:{pin:true},cache:{enable:false},after:()=>{this.editor.setValue("hello,Vditor")}})}
}
</script>

3、获取编辑内容

this.editor.getValue();     //获取 Markdown 内容
this.editor.getHTML();      //获取 HTML 内容

Vue使用Vditor编辑器相关推荐

Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
Vue引入 mavon-editor 编辑器的详细步骤
Vue引入 mavon-editor 编辑器的详细步骤一.编辑器的引入如果你的项目之前没有安装过该编辑器,那就得先安装编辑器在自己的项目的根目录执行下列命令: npm install mavon ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
vue中使用图像编辑器tui-image-editor(一)
vue中使用图像编辑器tui-image-editor(一) 场景:需要对图片进行旋转.缩放.裁剪.涂鸦.标注.添加文本等. 效果-图1 1.基本介绍官网:https://ui.toast.com/ ...
vue中使用图像编辑器tui-image-editor(二)——应用示例
vue中使用图像编辑器tui-image-editor(二)--应用示例效果代码 mark.vue <template><div class="drawing-cont ...
Vue中富文本编辑器的使用
基于 Vue 的富文本编辑器有很多,例如官方就收录推荐了一些: https://github.com/vuejs/awesome-vue#rich-text-editing . 这里我们以 eleme ...
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...
Vue实现副本编辑器
入口文件: main.js // 导入富文本编辑器 import VueQuillEditor from 'vue-quill-editor' // 导入富文本编辑器对应的样式 import 'qui ...

Vue使用Vditor编辑器

1、安装

2、使用

3、获取编辑内容

Vue使用Vditor编辑器相关推荐

最新文章

热门文章