Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
1,需求
一直在找一个好用的富文本编辑器,但是发现现在富文本已经不流行了,现在流行md
所以找md编辑器
找到一个好用的:mavon-editor
github:https://github.com/hinesboy/mavonEditor
2,配置
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
//编辑器
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
3,使用
home.vue
<template>
<div class="home">
<mavon-editor
ref="md"
placeholder="请输入文档内容..."
:boxShadow="false"
style="z-index:1;border: 1px solid #d9d9d9;height:50vh"
v-model="content"
:toolbars="toolbars"
/>
</div>
</template>
<script>
export default {
name: "home",
components: {},
data() {
return {
content: "",
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/* 1.3.5 */
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: false, // 保存（触发events中的save事件）
/* 1.4.2 */
navigation: true, // 导航目录
/* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/* 2.2.1 */
subfield: true, // 单双栏模式
preview: true // 预览
}
};
},
methods: {
// 上传图片方法
$imgAdd(pos, $file) {
console.log(pos, $file);
}
}
};
</script>
3,效果
4,展示模式
我们需要展示md怎么办?
<mavon-editor
:value="itemDes"
defaultOpen="preview"
:boxShadow="false"
style="z-index:1;height:50vh"
:editable="false"
:subfield="false"
:toolbarsFlag="false"
>
</mavon-editor>效果:
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/193123.html原文链接：https://javaforall.net
