文档章节

markdown编辑器——MintMarkdown

水牛叔叔
 水牛叔叔
发布于 2015/03/23 06:36
字数 892
阅读 259
收藏 1

简介

特点

MintMarkdown是一款轻巧的富文本编辑器。工具栏和编辑区域可分开,方便与多种布局融合。采用marked将markdown语法转换成html。预览效果采用highlight代码块语法高亮。

MintMarkdown非常简单,开发者友好,易于扩展

网站:http://mint-ui.wemakers.net/

下载:http://git.oschina.net/895925636/mint-ui

为什么要开发这个插件

原因主要是因为作者在用其他编辑器编写博客时,每插入一张图片就要上传一次,而且图片不小心被删除了就找不回来了,得重新上传。所以我希望能有个能管理当前博客所有图片的编辑器,我可以在博客中随时插入和删除图片,但是我找了很久都没找着。所以就自己开发了一个。

用法

引入依赖

<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../MintDialog/MintDialog.min.js"></script>
<script src="MintMarkdown.js"></script>

编写html

<div class="toolbar"></div>
<div class="editor">my markdown</div>

创建编辑器

var tools = ["undo", "redo", "|", "insertImg", "preview", "leftRight", "rightLeft"];
var buttonSetting = {
        insertImg : {
            uploadUrl : "docadmin/imgs", //上传文件的url
            loadUrl : "docadmin/imgs",    //获取图片的url
            deleteUrl : "docadmin/imgs/delete",
            /*
             * 根据loadUrl获取到数据后交给此函数处理,请返回文件的路径和文件名对象数组
             * 如:[{
             *         name : "img.jpg",
             *         src : "http://localhost/imgs/img.jpg"
             * }]
             */
            imgDataFilter : function(data){
                var d = [];
                $.each(data.data, function(i, t){
                    d.push({
                        name : t.name,
                        src : "static/doc/"+t.fileName,
                        id : t.id
                    });
                });
                return d;
            }
        }
    };

var previewOn = true;
var editor = new MintMarkdown(".toolbar", ".editor", tools, buttonSetting, previewOn);
var html = editor.html();
var text = editor.text();
editor.text("新内容");

初始化参数

toolsbarSelector

选择器字符串,必选,指定工具栏所在的位置

editorbodySelector

选择器字符串,必选,指定编辑区域所在的位置

tools

非必选,定制工具栏按钮,目前的按钮包括

按钮名 功能
undo 向后撤销一步
redo 重做
insertImg 插入图片。上传图片功能是用html5 api实现的,所有该按钮要在支持html5的浏览器上使用
preview 开启预览模式
leftRight 预览模式下,左右布局,markdown编辑区在左,预览区在右
rightLeft 预览模式下,右左布局,预览区在左,markdown编辑区在右

buttonSetting

对个别按钮的额外设置,参数的结构为

{
     "buttonName" : {...}
}

目前只有insertImg按钮需要额外设置,内容如下

设置项 类型 描述
uploadUrl string 上传文件的url
loadUrl string 获取已有图片url
deleteUrl string 删除图片的url
imgDataFilter(loadImgdata) function 回调函数。根据loadUrl获取到数据后交给此回调函数处理,请返回包含文件的路径和文件名对象数组如:[{name : "img.jpg",src : "http://localhost/imgs/img.jpg"}]

previewOn

编辑器初始化时是否开启预览模式,boolean类型,默认为true

api

本插件只有两个接口。

接口名 参数 描述
text([text]) string,参数可选 当有参数时,表示设置编辑器的新内容,当没有参数时表示获取编辑器的编辑结果
getCatalogue() 获取当前编辑结果的目录,只获取所有的“h”标签,每个标签都有一个“for”属性,该属性的值就是文章中标题的“id”属性值。

© 著作权归作者所有

水牛叔叔

水牛叔叔

粉丝 140
博文 80
码字总数 36149
作品 2
珠海
程序员
私信 提问
我的Markdown的利器——Markdown Here、有道云笔记、iPic

Markdown逐渐成为大家文章编辑的首选,这里推荐两个比较冷门的Markdown工具。 用什么当做Markdown的主力工具? 网上有很多人推荐的Markdown的工具包括专业的Markdown工具,如Mou,macdown等,...

it米粉
2016/09/30
0
0
4 个 Markdown 开源编辑器

如果你正在寻找一种简便的方法去格式化 Markdown 文本,那么这些编辑器可能会满足你的需求。 我的文章、散文、博客等等基本上都是在文本编辑器上使用 Markdown 写作的。当然,我不是唯一使用...

作者: Scott Nesbitt
2018/12/07
0
0
研究 Stackoverflow 上所用的编辑器

最近在做 oschina 讨论区的改版准备工作,对 Stackoverflow 网站(以下简称SO)研究得稍微多一点,发现 SO 所用的编辑器很特别,一种半所见即所得的内容编辑器,通过一些控制字符来进行格式处...

红薯
2011/04/01
2.4K
4
如何用Markdown轻松排版知乎专栏文章?

免费、便捷、高效的知乎专栏Markdown排版技巧。希望读过本文,可以让你的写作过程也变得更愉悦。 痛点 从前,写作时的排版是件辛苦事。不论你把排版环节放在写作中还是写作后,总会在心里清楚...

王树义
2017/09/08
0
0
基于 Qt 的开源笔记软件 VNote 1.11.1 小更新发布

新年伊始,VNote发布小更新v1.11.1。顾名思义,这次更新将会很“小”,主要是修复已知问题。当然,这次更新也有值得大家浪费带宽下载的地方: 1. 更好的中文支持 这一次基本所有界面都已经支...

tamlok
2018/01/05
3.8K
19

没有更多内容

加载失败,请刷新页面

加载更多

老也有错?35岁程序员是一道坎,横亘在每个技术职场人的心中

随着互联网的高速发展变革,大龄恐惧症越来越多地在技术圈被人讨论。很多程序员在工作5-10年以后,都会开始思考5年、10年甚至更久以后的自己,会是怎样一种生活工作状态,以及是否会被时代抛...

我最喜欢三大框架
31分钟前
2
0
今日头条算法原理详解全集,值得收藏!

今天,算法分发已经是信息平台、搜索引擎、浏览器、社交软件等几乎所有软件的标配,但同时,算法也开始面临质疑、挑战和误解。今日头条的推荐算法,从 2012 年 9月第一版开发运行至今,已经经...

骚年锦时
44分钟前
4
0
零拷贝:用户态视角

在Linux系统越来越多的人听说过所谓的零拷贝技术,但是我经常遇到很多对这个名词没有完全理解的人。因此,我决定写一些文章,深挖这个问题,希望能揭开这个有用的特性。在这篇文章,我们从用...

凌渡
56分钟前
1
0
以太坊中文文档翻译-区块

本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读。 区块(Blocks) 区块相关的 API,接口的参数说明请参考Etherscan API 约定, 文档中不单独...

Tiny熊
今天
2
0
Linux 内核的一个问题

是virtio 驱动,但是没有启动 virtio-mmio virtio-mmio.0: Failed to enable 64-bit or 32-bit DMA. Trying to continue, but this might not work.....[ 1.047924] md: ... autorun......

MtrS
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部