当前位置：首页 > 软件库 > 应用工具 > 文档/文本编辑 >

vue-simplemde

📝 Vue SimpleMDE - use simplemde with vue.js

授权协议 MIT License

开发语言 C/C++

所属分类应用工具、文档/文本编辑

软件类型开源软件

地区不详

投递者宁侯林

操作系统跨平台

开源组织无

适用人群未知

软件概览

Vue-SimpleMDE

Markdown Editor component for Vue.js. Support only vue2.x.

Use Setup

No longer support Vue1.x, you can modify to use

Install

npm install vue-simplemde --save

Use

Internal reference in a single component

<template>
  <vue-simplemde v-model="content" ref="markdownEditor" />
</template>

<script>
  import VueSimplemde from 'vue-simplemde'

  export default {
    components: {
      VueSimplemde
    }
  }
</script>

<style>
  @import '~simplemde/dist/simplemde.min.css';
</style>

Global reference

import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'

Vue.component('vue-simplemde', VueSimplemde)

Props

property	type	default	describe
value	String	None	Initial value, v-model binding can be used
name	String	None	The name of the control.
preview-class	String	None	Custom preview style class
autoinit	Boolean	true	Automatic initialization
highlight	Boolean	false	Is it open to highlight
sanitize	Boolean	false	HTML that does not render input after opening
configs	Object	{}	SimpleMDE's config
previewRender	Function	-	configs.previewRender

Events

event	describe	arguments
input	Triggered when the Input value changes	value
blur	Triggered when the Input loses focus	value
initialized	Triggered when initialization is complete	simplemde

Methods

this.$refs.markdownEditor.simplemde.togglePreview();

Markdown style

e.g. use Github's markdown style

github-markdown-css

install

$ npm install --save github-markdown-css

use

<template>
  <vue-simplemde preview-class="markdown-body" />
</template>

<style>
  @import '~simplemde/dist/simplemde.min.css';
  @import '~github-markdown-css';
</style>

Highlight

install

$ npm install --save highlight.js

use

<template>
  <vue-simplemde :highlight="true" />
</template>

<script>
  import hljs from 'highlight.js';

  window.hljs = hljs;
</script>

<style>
  @import '~simplemde/dist/simplemde.min.css';
  @import '~highlight.js/styles/atom-one-dark.css';
  /* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */
</style>

Editor Theme (simplemde-theme-base)

e.g. use simplemde-theme-base theme

install

$ npm install --save simplemde-theme-base

use

<style>
  @import '~simplemde-theme-base/dist/simplemde-theme-base.min.css';
  /* no need import simplemde.min.css */
</style>

e.g.

Dark Theme

Configuration

SimpleMD's config

Examples

Dependencies

SimpleMDE

Licence

vue-simplemde is open source and released under the MIT Licence.

使用案例

vue插件总结——走过路过不要错过总有你能用的上的

UI组件框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而
基于vue-simplemde实现图片拖拽、粘贴功能的一些思考

前言项目使用的是vue框架，需要一个markdown的编辑框，就在npm上找了一下，发现simplemde挺不错的，由于我比较懒，就顺便在npm又搜了一下，找到了vue-simplemde这个package，那就开始使用它吧。但是这个vue-simplemde不支持图片拖拽上传、粘贴上传，也不能说是因为这个vue-simplemde，因为vue-simplemde只是对simplemde的基础
用 vue-router 实现 tab 标签页（单页面）

vue-router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把各个组件渲染到正确的地方。首先，.vue中的内容非常简单，<router-link>创建标签，并指定路径，<router-view>渲染路由匹配到的组件。 <template> <div id="a
VUE插件总结——总有你能用上的插件

框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue
vue 富文本编辑器 Vue-SimpleMDE

安装： npm install vue-simplemde --save vue页面使用： <template> <vue-simplemde v-model="content" ref="markdownEditor" /> </template> <script> import VueSimplemde from 'vue-simplemde'// 引入文本编辑器 import '
Vue-SimpleMDE：Vue.js的Markdown编辑器组件

Vue-SimpleMDE (Vue-SimpleMDE) Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0. Vue.js的Markdown编辑器组件。同时支持vue1.0和vue2.0。翻译自: https://vuejsexamples.com/vue-simplemde-markdown-editor-

vue-simplemde

Vue-SimpleMDE

Use Setup

Install

Use

Props

Events

Methods

Markdown style

install

use

Highlight

install

use

Editor Theme (simplemde-theme-base)

install

use

e.g.

Configuration

Examples

Dependencies

Licence

同类工具

相关阅读

相关文章

相关问答

相关文档