fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

mavonEditor
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

GitHub:https://github.com/hinesboy/mavonEditor
网站描述:基于vue的markdown编辑器

mavonEditor:基于 vue 的 Markdown 编辑器,支持所见即所得编辑模式、阅读模式等 


Install mavon-editor (安装)

$ npm install mavon-editor --save

Use (如何引入)

index.js:

// 全局注册
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })

index.html  

<div id="main">
    <mavon-editor v-model="value"/>
</div>

如何在nuxt.js 中使用

首先在工程目录plugins 下新建 vue-mavon-editor.js  

import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';

Vue.use(mavonEditor);

然后在nuxt.config.js 中添加plugins配置

plugins: [
  ...
    { src: '@/plugins/vue-mavon-editor', srr: false }
  ],

最后一步在页面或者组件中引入

<template>
  <div class="mavonEditor">
    <no-ssr>
      <mavon-editor :toolbars="markdownOption" v-model="handbook"/>
    </no-ssr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        ... // 更多配置
      },
      handbook: "#### how to use mavonEditor in nuxt.js"
    };
  }
};
</script>

<style scoped>
.mavonEditor {
  width: 100%;
  height: 100%;
}
</style>


api 文档

props

name 名称type 类型default 默认值describe 描述
valueString初始值
languageStringzh-CN语言选择,暂支持 zh-CN: 中文简体 , en: 英文 , fr: 法语, pt-BR: 葡萄牙语, ru: 俄语, de: 德语, ja: 日语
fontSizeString15px编辑区域文字大小
scrollStyleBooleantrue开启滚动条样式(暂时仅支持chrome)
boxShadowBooleantrue开启边框阴影
subfieldBooleantruetrue: 双栏(编辑预览同屏), false: 单栏(编辑预览分屏)
defaultOpenStringedit: 默认展示编辑区域 , preview: 默认展示预览区域 , 其他 = edit
placeholderString开始编辑...输入框为空时默认提示文本
editableBooleantrue是否允许编辑
codeStyleStringcode-githubmarkdown样式: 默认github, 可选配色方案
toolbarsFlagBooleantrue工具栏是否显示
navigationBooleanfalse默认展示目录
shortCutBooleantrue是否启用快捷键
autofocusBooleantrue自动聚焦到文本框
ishljsBooleantrue代码高亮
imageFilterfunctionnull

图片过滤函数,参数为一个File Object,要求返回一个Boolean, true表示文件合法,false表示文件不合法

imageClickfunctionnull图片点击事件,默认为预览,可覆盖
tabSizeNumber\ttab转化为几个空格,默认为\t
toolbarsObject如下例工具栏

链接: https://fly63.com/nav/2051

more>>
相关栏目
weex
阿里推出的Native框架,支持iOS、安卓、YunOS及Web等多端部署
官网GitHub
Flutter
谷歌推出的跨平台移动UI框架
官网GitHub
framework7
用于开发接近原生iOS或Android系统外观和体验的 hybrid mobile apps 或 web apps
官网GitHub
ionic
ionic是一个用来开发混合手机应用的,开源的,免费的代码库
官网GitHub
uni-app
使用 Vue.js开发跨平台应用的前端框架
官网GitHub
Taro
多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用
官网GitHub
React Belle
一个React组件库
官网GitHub
noUiSlider
一个轻量级的Js范围滑块库
官网GitHub
fair ui
为Flutter设计的动态化框架
官网GitHub
react-native-ui-lib
React Native的UI组件库和工具集
官网GitHub
react-native-sideswipe
简单跨平台的React Native可滑动的组件
点击进入GitHub
weui+
在weui和zepto基础上开发的增强UI组件
官网GitHub
weui
微信官方设计团队为微信内网页和微信小程序量身设计的的基础样式库
官网GitHub
ThorUI
轻量、简洁的移动端组件库
官网GitHub
MUI
最接近原生APP体验的高性能前端框架
官网GitHub
jquery Mobile
是用于创建移动 Web 应用的前端开发框架
官网GitHub

手机预览