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)

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

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

1. 在页面中使用

<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

name 名称	type 类型	default默认值	applicable component适用组件	describe 描述
value	String		fEditor, fRender	初始值
useToc	Boolean	true	fEditor, fRender	是否使用ftoc
tocOption	Object	{}	fEditor, fRender	前提是设置useToc为true,目录设置，参考ftoc，注意tocCallback已被占用，如有需要，请监听toc事件
forbiddenHash	Boolean	true	fEditor, fRender	使用禁用hash跳转，避免触发vue路由切换动画
maxLength	Number, null	true	fEditor	输入长度限制
language	String	zh-CN	fEditor	语言选择，暂支持 zh-CN: 中文简体 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语
fontSize	String	14px	fEditor	编辑区域文字大小
scrollStyle	Boolean	true	fEditor, fRender	开启滚动条样式(暂时仅支持chrome)
boxShadow	Boolean	true	fEditor	开启边框阴影
subfield	Boolean	true	fEditor	true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
defaultOpen	String		fEditor	edit： 默认展示编辑区域 ， preview： 默认展示预览区域 , 其他 = edit
placeholder	String	开始编辑...	fEditor	输入框为空时默认提示文本
editable	Boolean	true	fEditor	是否允许编辑
codeStyle	String	code-github	fEditor, fRender	markdown样式： 默认github, 可选配色方案
toolbarsFlag	Boolean	true	fEditor	工具栏是否显示
navigation	Boolean	false	fEditor	默认展示目录
shortCut	Boolean	true	fEditor	是否启用快捷键
autofocus	Boolean	true	fEditor	自动聚焦到文本框
ishljs	Boolean	true	fEditor, fRender	代码高亮
imageFilter	function	null	fEditor	图片过滤函数，参数为一个File Object，要求返回一个Boolean, true表示文件合法，false表示文件不合法
imageClick	function	null	fEditor, fRender	图片点击事件，默认为预览，可覆盖
tabSize	Number	\t	fEditor	tab转化为几个空格，默认为\t
toolbars	Object	如下例	fEditor	工具栏
sToolbars	Object	如下例	fEditor	小屏幕时的工具栏

/*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         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 事件绑定

name 方法名	params 参数	applicable component适用组件	describe 描述
toc	String: tocHtml	fEditor, fRender	生成目录时触发，参数为生成目录的html，参数修改参考tocOption选项
input	String: value	fEditor	编辑区内容发生改变时触发，参数为编辑区内容
render	String: value	fEditor, fRender	markdown渲染时触发， 参数为渲染结果
save	String: value , String: render	fEditor	ctrl + s 的回调事件(保存按键,同样触发该回调)
fullScreen	Boolean: status , String: value	fEditor	切换全屏编辑的回调事件(boolean: 全屏开启状态)
readModel	Boolean: status , String: value	fEditor	切换沉浸式阅读的回调事件(boolean: 阅读开启状态)
htmlCode	Boolean: status , String: value	fEditor	查看html源码的回调事件(boolean: 源码开启状态)
subfieldToggle	Boolean: status , String: value	fEditor	切换单双栏编辑的回调事件(boolean: 双栏开启状态)
previewToggle	Boolean: status , String: value	fEditor	切换预览编辑的回调事件(boolean: 预览开启状态)
helpToggle	Boolean: status , String: value	fEditor	查看帮助的回调事件(boolean: 帮助开启状态)
navigationToggle	Boolean: status , String: value	fEditor	切换导航目录的回调事件(boolean: 导航开启状态)
imgAdd	String: filename, File: imgfile, VueInstance: $vm	fEditor	图片文件添加回调事件(filename: 写在md中的文件名, File: File Object, $vm 编辑器实例)

slot插槽

只适用于fEditor

name 插槽名称	describe 描述
left-toolbar-before	左侧工具栏前方
left-toolbar-after	左侧工具栏后方
right-toolbar-before	右侧工具栏前方
right-toolbar-after	右侧工具栏后方

快捷键

只适用于fEditor

key	keycode	功能
F8	119	开启/关闭导航
F9	120	预览/编辑切换
F10	121	开启/关闭全屏
F11	122	开启/关闭阅读模式
F12	123	单栏/双栏切换
TAB	9	缩进
CTRL + S	17 + 83	触发保存
CTRL + D	17 + 68	删除选中行
CTRL + Z	17 + 90	上一步
CTRL + Y	17 + 89	下一步
CTRL + BreakSpace	17 + 8	清空编辑
CTRL + B	17 + 66	加粗
CTRL + I	17 + 73	斜体
CTRL + H	17 + 72	# 标题
CTRL + 1	17 + 97 or 49	# 标题
CTRL + 2	17 + 98 or 50	## 标题
CTRL + 3	17 + 99 or 51	### 标题
CTRL + 4	17 + 100 or 52	#### 标题
CTRL + 5	17 + 101 or 53	##### 标题
CTRL + 6	17 + 102 or 54	###### 标题
CTRL + U	17 + 85	++下划线++
CTRL + M	17 + 77	==标记==
CTRL + Q	17 + 81	> 引用
CTRL + O	17 + 79	1. 有序列表
CTRL + L	17 + 76	[链接]()
CTRL + ALT + S	17 + 18 + 83	^上角标^
CTRL + ALT + U	17 + 18 + 85	- 无序列表
CTRL + ALT + C	17 + 18 + 67	``` 代码块
CTRL + ALT + L	17 + 18 + 76	![图片链接]()
CTRL + ALT + T	17 + 18 + 84	表格
CTRL + SHIFT + S	17 + 16 + 83	~下角标~
CTRL + SHIFT + D	17 + 16 + 68	中划线
CTRL + SHIFT + C	17 + 16 + 67	居中
CTRL + SHIFT + L	17 + 16 + 76	居左
CTRL + SHIFT + R	17 + 16 + 82	居右
SHIFT + TAB	16 + 9	取消缩进

图片上传

<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