码迷，mamicode.com
首页 > 其他好文 > 详细

vue使用markdown编辑与展示

时间：2020-09-10 22:42:53      阅读：46      评论：0      收藏：0      [点我收藏+]

标签：mod   保存   目录   import   marked   delete   ado   bottom   mit   

1.Vue显示markdown的html页面

1.1 mark编辑

  • 下载包

    npm install mavon-editor --save

  • 使用在main.js中 引入

    import mavonEditor from ‘mavon-editor‘
import ‘mavon-editor/dist/css/index.css‘
Vue.use(mavonEditor)

  • 在子组建使用

    • html中

      <FormItem>
            <mavon-editor :style="{ zIndex: ‘0‘,width:‘54rem‘}" ref="md" :toolbars="markdownOption" v-model="formInline.content" @imgAdd="imgAdd" @imgDel="imgDel"/>
          </FormItem>
# 这里绑定imgAdd为添加图片，为访问后台，添加图片，后台返回对应url
# imgDel为删除图片，回掉函数去访问后台删除对应函数。

    • js中

    // data 中添加markdown要求功能
markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        /* 1.3.5 */
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true // 导航目录
      },
// methods中定义方法
imgAdd (pos, $file) {
			// $file 为文件
      // pos 为插入图片索引位置，这里把图片路径放在一个list中也就是img_file
      console.log($file)
      // 第一步.将图片上传到服务器.
      var formdata = new FormData()
      formdata.append(‘image‘, $file)
      this.img_file[pos] = $file
      console.log(this.$http.defaults.baseURL + ‘/upload/content/picture‘)
      axios({
        // 请求地址
        url: this.$http.defaults.baseURL + ‘/upload/content/picture‘,
        method: ‘post‘,
        data: formdata,
        headers: { ‘Content-Type‘: ‘multipart/form-data‘ }
      }).then((data) => {
        // console.log(JSON.stringify(url))
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1.  通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         * 3. 由于vue运行访问的路径只能在static下，so，我就把图片保存到它这里了
         */
        this.$refs.md.$img2Url(pos, data.data.result.urlpath)
      })
    },
// 这里是做一个列表删除。
imgDel (pos) {
      delete this.img_file[pos]
    },

1.2 markdown实现html显示

  • 导包

    npm install highlight.js --save
npm install marked --save

  • main.js引入

    // 代码高亮
import hljs from ‘highlight.js‘
Vue.directive(‘highlight‘, (el) => {
  let blocks = el.querySelectorAll(‘pre code‘)
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})

  • 组建中使用

    <div class="passage">
			// v-highlight 代码高亮， 绑定 content
      <div v-highlight v-html="content" class="content"></div>
    </div>
<script>
import marked from ‘marked‘
...
// 通过marked将返回Markdown文本转换html
this.content = marked(mkdContent)
</script>

  • 下面是markdown的css样式

    <style>
h1, h2, h3, h4 {
  color: #111111;
  font-weight: 400;
  margin-top: 1em;
}

h1, h2, h3, h4, h5 {
  font-family: Georgia, Palatino, serif;
}
h1, h2, h3, h4, h5, p , dl{
  margin-bottom: 16px;
  padding: 0;
}
h1 {
  font-size: 48px;
  line-height: 54px;
}
h2 {
  font-size: 36px;
  line-height: 42px;
}
h1, h2 {
  border-bottom: 1px solid #EFEAEA;
  padding-bottom: 10px;
}
h3 {
  font-size: 24px;
  line-height: 30px;
}
h4 {
  font-size: 21px;
  line-height: 26px;
}
h5 {
  font-size: 18px;
  list-style: 23px;
}
a {
  color: #0099ff;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
a:hover {
  text-decoration: none;
  color: #ff6600;
}
a:visited {
  /*color: purple;*/
}
ul, ol {
  padding: 0;
  padding-left: 24px;
  margin: 0;
}
li {
  line-height: 24px;
}
p, ul, ol {
  font-size: 16px;
  line-height: 24px;
}

ol ol, ul ol {
  list-style-type: lower-roman;
}

/*pre {
    padding: 0px 24px;
    max-width: 800px;
    white-space: pre-wrap;
}
code {
    font-family: Consolas, Monaco, Andale Mono, monospace;
    line-height: 1.5;
    font-size: 13px;
}*/

code, pre {
  border-radius: 3px;
  background-color:#f7f7f7;
  color: inherit;
}

code {
  font-family: Consolas, Monaco, Andale Mono, monospace;
  margin: 0 2px;
}

pre {
  line-height: 1.7em;
  overflow: auto;
  padding: 6px 10px;
  border-left: 5px solid #6CE26C;
  background: #cacaca;
  width: 49rem;
}

pre > code {
  border: 0;
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  font-size: .85em;
  white-space: pre;
  background: 0 0;

}

code {
  color: #666555;
}
/** markdown preview plus 对于代码块的处理有些问题, 所以使用统一的颜色 */
/*code .keyword {
  color: #8959a8;
}

code .number {
  color: #f5871f;
}

code .comment {
  color: #998
}*/

aside {
  display: block;
  float: right;
  width: 390px;
}
blockquote {
  border-left:.5em solid #eee;
  padding: 0 0 0 2em;
  margin-left:0;
}
blockquote  cite {
  font-size:14px;
  line-height:20px;
  color:#bfbfbf;
}
blockquote cite:before {
  content: ‘\2014 \00A0‘;
}

blockquote p {
  color: #666;
}
hr {
  text-align: left;
  color: #999;
  height: 2px;
  padding: 0;
  margin: 16px 0;
  background-color: #e7e7e7;
  border: 0 none;
}

dl {
  padding: 0;
}

dl dt {
  padding: 10px 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

dd {
  margin-left: 0;
}

/* Code below this line is copyright Twitter Inc. */

button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle;
}
button, input {
  line-height: normal;
  *overflow: visible;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
input[type=checkbox], input[type=radio] {
  cursor: pointer;
}
/* override default chrome & firefox settings */
input:not([type="image"]), textarea {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
label,
input,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: normal;
  margin-bottom: 18px;
}
input[type=checkbox], input[type=radio] {
  cursor: pointer;
  margin-bottom: 0;
}
input[type=text],
input[type=password],
textarea,
select {
  display: inline-block;
  width: 210px;
  padding: 4px;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  height: 18px;
  color: #808080;
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
select, input[type=file] {
  height: 27px;
  line-height: 27px;
}
textarea {
  height: auto;
}
/* grey out placeholders */
:-moz-placeholder {
  color: #bfbfbf;
}
::-webkit-input-placeholder {
  color: #bfbfbf;
}
input[type=text],
input[type=password],
select,
textarea {
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
/* buttons */
button {
  display: inline-block;
  padding: 4px 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border: 1px solid #004b9a;
  border-bottom-color: #003f81;
  -webkit-transition: 0.1s linear all;
  -moz-transition: 0.1s linear all;
  transition: 0.1s linear all;
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
button:hover {
  color: #fff;
  background-position: 0 -15px;
  text-decoration: none;
}
button:active {
  -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
table {
  *border-collapse: collapse; /* IE7 and lower */
  border-spacing: 0;
  width: 51rem;
}
table {
  border: solid #ccc 1px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  /*-webkit-box-shadow: 0 1px 1px #ccc;
  -moz-box-shadow: 0 1px 1px #ccc;
  box-shadow: 0 1px 1px #ccc;   */
}
table tr:hover {
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
table td, .table th {
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}

table th {
  background-color: #dce9f9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
  background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
  background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
  /*-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;*/
  border-top: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  padding: 5px;
}

table td:first-child, table th:first-child {
  border-left: none;
}

table th:first-child {
  -moz-border-radius: 6px 0 0 0;
  -webkit-border-radius: 6px 0 0 0;
  border-radius: 6px 0 0 0;
}
table th:last-child {
  -moz-border-radius: 0 6px 0 0;
  -webkit-border-radius: 0 6px 0 0;
  border-radius: 0 6px 0 0;
}
table th:only-child{
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 6px;
  -webkit-border-radius: 0 0 0 6px;
  border-radius: 0 0 0 6px;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 6px 0;
  -webkit-border-radius: 0 0 6px 0;
  border-radius: 0 0 6px 0;
}
.passage {
  padding-left: 4rem;
  width: 59rem;
}
.article-title {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 2em;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  text-align: left;
  color: #000;
  border: 0px;
  font-weight: bold;
  float: left;
  line-height: 1.5;
  width: 100%;
  padding-left: 5px;
}
/*.v-enter{*/
/*  opacity: 0*/
/*}*/
/*.v-enter-active{*/
/*  transition: opacity 3s;*/
/*}*/
/*!* 隐藏动画效果 *!*/
/*.v-leave-to{*/
/*  opacity: 0;*/
/*}*/
/*.v-leave-active {*/
/*  transition: opacity 3s;*/
/*}*/
.v-enter,.v-leave-to{
  transform: translateX(150px);
}
/*入场(离场)动画的时间段   */
.v-enter-active,.v-leave-active{
  transition: all 0.8s ease;

}
.my-enter,.my-leave-to{
  transform: translateY(70px);
}
.my-enter-active,.my-leave-active{
  transition: all 0.8s ease;

}
</style>

vue使用markdown编辑与展示

标签：mod   保存   目录   import   marked   delete   ado   bottom   mit   

原文地址：https://www.cnblogs.com/xujunkai/p/13583978.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！