大佬教程收集整理的这篇文章主要介绍了VueJs(16)---Nuxt引入mavon-editor插件实现markdown功能,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
说明
@H_860_7@mavon-editor是一款基于Vue的markdown编辑器,因为当前项目是采用Nuxt,所以这里所展示的教程是针对Nuxt引入mavon-editor插件,如果你只是采用了
Vue,没有用Nuxt框架,那么你可以看mavon-editor官方文档,有详细说明,其实它们只有在引入mavon-editor方式有细微差别,使用都是一样的。mavonEditor官方地址
通过命令安装插件
npm install mavon-editor --save
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import "mavon-editor/dist/css/index.css";
Vue.use(mavonEditor)
plugins: [
'~/plugins//vueMarkdown.js',
],
这三步也是Nuxt新增插件的标准3步曲了。既然插件已经添加完成,那么接下来就是使用了,使用应该包含两部分:1)编辑markdown文档并保存。2)回显markdown数据。
<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>
页面展示效果如下
我们可以看到我们已经可以正常使用markdown编辑器了,说明当前插件安装成功,可以用。
上一步是已经可以编辑,但我们还需要将我们编辑好已经存在数据库的数据,回显在页面。
<no-ssr>
<mavon-editor
v-highlight
class="md"
:value="content"
:subfield = "false"
:defaultOpen = "'preview'"
:toolbarsFlag = "false"
:editable="false"
:scrollStyle="true"
></mavon-editor>
</no-ssr>
属性解释
:value="content":引入要转换的内容
:subfield = "false":开启单栏模式
:defaultOpen = "'preview'":默认展示预览区域
:toolbarsFlag = "false":关闭工具栏
:editable="false":不允许编辑
scrollStyle="true":开启滚动条样式(暂时仅支持chromE)
这样一来整个编辑回显的效果这里都展示出来了。
上面展示的时候确实已经可以正常回显markdown文档,但还不美观,我们想要的就是只要是代码都能高亮的显示出来,你可以用highlight.js插件,但我在使用中并没有达到我
自己喜欢的样式,所以我这边自己修改了部分css样式。这里把css样式展示如下。
.markdown-body .lang- {
display: block;
overflow: auto;
padding: 1.3em 2em !important;
font-size: 16px !important;
BACkground: #272822 !important;
color: #FFF;
max-height: 700px;
}
.markdown-body .hljs {
display: block;
overflow: auto;
padding: 1.3em 2em !important;
font-size: 16px !important;
BACkground: #272822 !important;
color: #FFF;
max-height: 700px;
}
.hljs,
.hljs-tag,
.hljs-subst {
color: #f8f8f2 !important;
}
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2 !important;
}
.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff !important;
}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-SELEctor-class {
color: #a6e22e !important;
}
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-keyword,
.hljs-SELEctor-tag,
.hljs-name,
.hljs-attr {
color: #f92672 !important;
}
.hljs-symbol,
.hljs-attribute {
color: #66d9ef !important;
}
.hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2 !important;
}
.hljs-String,
.hljs-type,
.hljs-built_in,
.hljs-builTin-name,
.hljs-SELEctor-id,
.hljs-SELEctor-attr,
.hljs-SELEctor-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74 !important;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #75715e !important;
}
然后我们再来看页面展示效果
是不是明显感觉代码已经高亮,整体看去的视觉效果比上面的要好多了。
总结
这里有关编辑保存与后台接口交互的逻辑没有粘贴出来,还有如果使用markdown编辑器上传图片这里也没有说明,具体的可以看下官方文档。
少说多做,句句都会得到别人的重视;多说少做,句句都会受到别人的忽视。(16)
以上是大佬教程为你收集整理的VueJs(16)---Nuxt引入mavon-editor插件实现markdown功能全部内容,希望文章能够帮你解决VueJs(16)---Nuxt引入mavon-editor插件实现markdown功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。