当前位置: 首页 > 软件库 > Web应用开发 > Vue 组件 >

vue-bl-markdown-editor

基于 markdown-it 高度可扩展的 vue 编辑器组件
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 Vue 组件
软件类型 开源软件
地区 国产
投 递 者 傅正阳
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

vue-bl-markdown-editor,一个基于 markdown-it 高度可扩展的 vue 编辑器组件。

  • 允许提供插槽自定义工具栏
  • 允许通过动态注册组件,允许插入工具栏指定位置
  • 优势: 可完全自定义工具栏功能,markdown-it 插件调用等

演示站

UTOOLS1567330095009.png安装

$ npm install vue-bl-markdown-editor --save

使用

main.js:

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

TODO

  • 基础工具栏
  • 实现撤销恢复功能
  • 兼容手机
  • 样式美化
  • 本项目中打包dev演示页面
  • highlight 样式引用(*)
  • 图片上传回调配置
  • 图片粘贴上传
  • 图片拖拽上传
  • 同步滚动(暂时按滚动条高度计算**)
  • 录音兼容问题(测试 chrome/firefox 正常,edge 申请失败)
  • 必须运行在 https 下 测试可以正常运行
  • 自定义录音工具栏组件(*)
  • 本地图片粘贴上传不支持(待解决)
  • 1、安装mavon-editor npm install mavon-editor --save 2、调用插件 <template> <div> <mavon-editor></mavon-editor> </div> </template> <script> import { mavonEditor } from "mavon-editor"; import "mavon-e

  • 这是最近用Vue写的一个Markeddown编辑器, 主要目的是扩展Vue-Manager的编辑器功能。核心功能引入了Marked插件,将Markedown文档解析为html。样式基本沿用了vm-editor,并增加了多种主题选择的功能。 项目已经打包上传到npm,欢迎使用。 预览地址 luosijie.github.io/vm-markdown… 源码地址 github.com/luosijie

  • 闲暇时间我用Vue框架写了一个博客,编辑器是用的markdown文本的形式,介绍性+描述完全能满足我的需求,但是,如果想在线运行我markdown文本中的Vue组件代码,则无法实现了, 于是我就自己写了一个组件,可以和普通文本显示器一样,显示文本,也可以执行Vue组件代码(只要标注vue-run)。 下面是介绍:   Github代码仓库 https://github.com/zhangKunUs

  • vue markdown vue-markdown编辑器 (vue-markdown-editor) A markdown editor built on Vue. 在Vue上构建的降价编辑器。 View Demo 查看演示 View Github 查看Github 安装 (Install) # use npm npm i @kangc/v-md-editor -S # use yarn yar

  • 关于vue3 引入markDown 因为vue3暂时不支持*mavon-editor,所以推荐使用v-md-editor: install # use npm npm i @kangc/v-md-editor -S # use yarn yarn add @kangc/v-md-editor 在main.js或者新建markDown.js引入v-md-editor import VueMark

  • <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>Notebook</title> <!--图标和样式表--> <link

  • 在线示例地址 GitHub :github.com/zhaoxuhui11… 1.简介 一款使用marked和highlight.js开发的一款markdown编辑器,目前只支持在vue项目中使用。 编辑器涵盖了常用的markdown编辑器功能,工具栏可自定义配置,也可进行二次开发。 效果 2.安装 npm i -S vue-meditor 或 直接复制对应的组件到项目目录内 (推荐) 复制代

  • vue使用markdown 优雅的Markdown编辑器 (Elegant Markdown Editor) Features 特征 It just suits, show editor or preview or both just as you wish. Focus mode, writing without distractions. Exportable, from Markdown t

 相关资料
  • markdown-it-vue 是一个丰富的 markdown Vue 组件, 支持以下特性: markdown 语法 GFM TOC GFM style emoji mermaid charts Echarts Subscript/Superscript AsciiMath Alter(自定义提示信息) .... 在线演示:http://www.aqcoder.com/markdown/ 效果图如下:

  • 本来使用 simplemde-markdown-editor 作为 markdown 编辑器,但这个库很久不更新和维护了,而且还有 xss 风险。所以在 版本之后使用 tui.editor作为新的编辑器,接下来所有的文档都是基于 tui.editor 它的。更多内容。 Props Name Type Default Description value String " " This prop ca

  • YDoc 使用了开源工具 markdown-it 解析 markdown,可以使用 markdown-it 已有的插件或开发新的插件定制功能,具体可参考 markdown-it 开发文档。 YDoc 配置 markdown-it 插件 在 ydoc.js 配置文件增加 markdownIt 配置项 { markdownIt: function() { md.use(plugin1)

  • Header Anchors 所有标题将自动添加anchor链接,Anchor的渲染可以使用markdown.anchor 选项来配置。 链接 内部链接 内部链接将会转化成路由链接用于SPA导航。同时,每一个文件夹下的 index.md 文件都会被自动编译为 index.html,对应的链接将被视为 /。 以下列目录结构为例: . ├─ index.md ├─ foo │ ├─ index.md

  • 前端/vue生态下,还有比 markdown-it 更好用的 markdown 组件吗? 我的需求:我要给我的页面添加很多的「说明」,让使用者可以知道每个功能是干嘛的。这些「说明」可能嵌入到任何页面,也可能是一个专用页面,比如 FAQ 页面 我现在在一个 vue3 项目下使用 markdown-it 组件来实现上面的需求,但是有很多很多的问题 我希望 markdown-it 可以渲染成和 gith

  • markdown-it 是 Markdown 解析器,100% CommonMark 支持,易扩展,语法插件支持,速度非常快,默认保存。 简单示例  // node.js, "classic" way:var MarkdownIt = require('markdown-it'),    md = new MarkdownIt();var result = md.render('# markdow