f-editor v1.0.6

f-editor

一个基于vue的markdown编辑器和渲染器 由mavon-editor 2.7.5版本修改而成。支持服务端渲染。拆分成两个组件:fEditor和fRender。

开始使用

Es6

npm install f-editor  --save // or
yarn add f-editor 

index.js

// 全局注册
    import Vue from 'vue'
    import fMd from 'f-editor'
    import 'f-editor/dist/f-editor.css'
    // use
    Vue.use(fMd)
    new Vue({
        'el': '#app',
        data() {
            return { value: '' }
        }
    })

index.vue

<div>
  <f-editor v-model="value"></f-editor>
  <f-render :value="value"/>
</div>

browser

<div id="app">
  <f-editor v-model="value"></f-editor>
  <f-render :value="value"/>
</div>
<script src="path/to/vue.js"></script>
<script src="path/to/f-editor.umd.js"></script>
<script>
  Vue.use(window['f-editor'])
  new Vue({
    el: '#app',
    data() {
        return { value: '' }
    }
  })
</script>

在nuxt中使用

本插件支持SSR 1. 在工程目录plugins 下新建f-editor.js

import Vue from 'vue'
import fEditor from 'f-editor'
import 'f-editor/dist/f-editor.css'
// use
Vue.use(fEditor)

2. 在nuxt.config.js中添加plugins配置

module.exports = {
  // ...
  plugins: [
    // ...
    { src: '@/plugins/f-editor', ssr: true }
  ],
}

3. 在页面中使用

<template>
  <div>
      <f-editor v-model="content"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: "#### how to use f-editor in nuxt.js"
    };
  }
};
</script>

API文档

props

/*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         bold: true, // 粗体
         italic: true,// 斜体
         header: true,// 标题
    }
    此时, 仅仅显示此三个功能键
 */
sToolbars:{
  underline: true,
  strikethrough: true,
  imagelink: true,
  table: true,
  undo: true,
  save: true,
  preview: true,
  navigation: true
},
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, // 帮助
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  save: true, // 保存（触发events中的save事件）
  navigation: true, // 导航目录
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  subfield: true, // 单双栏模式
  preview: true, // 预览
  }

events 事件绑定

slot插槽

只适用于fEditor

快捷键

只适用于fEditor

图片上传

<template>
  <f-editor @imgAdd="handleImgAdd" v-model="content"></f-editor>
</template>
<script>
  export default {
    data() {
      return {
        content: ''
      }
    },
    methods: {
      handleImgAdd(pos, file, vm) {
        vm.$img2Url(pos, file.miniurl) // 直接上传base64
      }
    }
  }
</script>

常见问题

1. 图片上传问题 如果要使用图片功能，必须要处理imgAdd事件，在获取到图片url时，要调用vm.$img2Url(pos, url)将图片地址插入文档中。
2. 目录中文 要在目录中使用中文，并想作为hash跳转，可使用以下方法

   <template>
     <f-editor :toc-option="tocOption"></f-editor>
   </template>
   <script>
     // 需要先安装uslug依赖
     import uslug from 'uslug'
      export default{
        data() {
          return {
            tocOption: {
              slugify: uslug
            },
          }
        }
      }
   </script>

3. hash跳转触发vue路由切换动画 可以设置forbiddenHash为true，原理是使用scrollIntoView
4. 获取文档目录，请监听toc事件

Markdown 语法拓展

• ftoc
• emoji
• subscript
• superscript
• container
• definition list
• abbreviation
• footnote
• insert
• mark
• todo list
• highlight
• katex
• images preview