先说下选择Markdown编辑器的原因,我们进行平台开发,需要很多的操作手册和API文档,要在网站中展示出来就需要是HTML格式的文件,但是由于内容很多,不可能全部由技术人员进行文档的编写,如果是只有文档操作经验的人来做就会出现很麻烦的情况。

  最初,我们先用试着用word来写,再转换成HTML文件保存,但是这样存在几个问题:1、转换出来的文件标签和样式十分的杂乱和冗余,有太多无用的标签,后期要修改样式也十分不容易;2、图片无法保存,在word文档中插入的图片路径是固定的物理路径,或是与文档一起存储的,当文档转换成HTML文件并放在网站服务器上使用时,图片的路径就发生了变化,如果再去调整图片就十分麻烦;3、关于图片还有种解决的办法,word可以保存为htm格式,这种格式是将图片和文字一同保存在一个文件的方法,但是最后的结果是只有IE可以识别这种格式,在Chrome里都是乱码,所以最后同样作罢。

  在一些编写API文档的专门网站中,我偶然看到markdown编辑器,向经理提了一下,他说之前就考虑这个,所以就由我来开发(好大一个坑)。

  网上找到的开源markdown编辑器中,我第一个看中的是Editor.md,发现用的人很多,相关的帖子也不少,所以最开始是用这个开发的,最初在单独的网页上实现也很快,但是拿到框架里就出现了一些兼容性问题很难解决,并且需要引用很多文件,与我们的需求相比,它太臃肿了,功能不够简洁,而且,最关键的问题是,我找到GitHub上发现,这个编辑器已经有两三年没有更新了,很多问题都没有好的解决方法,所以现在的用户也不多,网上有的都是遗存的帖子,之前没有注意到发帖时间。。。

  然后就继续寻找,后面的详细过程记不太清楚了,总之是发现现在需要用markdown编辑器开发者几乎都是自己开发,而我又不具备这种能力,最终是找到了markdown plus这个比较轻量级的编辑器,开发者最初也是遇到和我一样的问题,从开始用Editor.md到最后自己开发,所以他在开发过程中尽力使代码简洁,并且最近几个月还在更新,在这个过程中还推出了Windows版和Mac版,十分推荐。另外CSDN上的markdown编辑器中标注使用的StackEdit也非常好用,有独立的网页版本,同时代码也是开源的,不过我还不太会用,下一节就是具体记录相关的踩坑过程,使用Git、yarn之类的工具的情况。

  在查找这些相关资料和编辑器的过程中,我能学到很多细微的知识,虽然花了很多时间,走了很多弯路,但也开始慢慢地掌握程序员学习进步的基本,希望以后能更有效率地开发。

Markdown编辑器开发记录(一):开发的初衷和初期踩的坑的更多相关文章

  1. Markdown编辑器开发记录(二):Markdown编辑器的使用与开发入门

    Markdown编辑器的使用与开发入门 在部门做技术分享的时候简单整理了一下手里的资料 1 是什么 1.1 Markdown是一种轻量级标记语言 Markdown是一种轻量级标记语言,创始人为约翰·格 ...

  2. [ionic3.x开发记录]ios下页面过渡效果不出现的小坑

    如果内容没有被<ion-content></ion-content>或者<ion-header></ion-header>标签包裹,页面过渡的时候是没有 ...

  3. Linux编辑器篇-分享10个最好的Markdown编辑器

    在这篇文章中,兄弟连Linux培训会分享一些可以在 Linux 上安装使用的最好的 Markdown 编辑器.虽然你在 Linux 平台上能找到非常多的 的 Markdown 编辑器,但是在这里我们将 ...

  4. MVC开发Markdown编辑器(2)

    MVC开发Markdown编辑器(2) MVC Markdown 实时预览 我希望实现一个在线实时预览的Markdown编辑器,左边是编辑处,右边是实时预览界面. 准备工作 引入相关js和css 这里 ...

  5. MVC开发Markdown编辑器(1)

    MVC markdown MVC开发Markdown编辑器(1) 前言 安装 解析 结束语 前言 想在近段时间通过mvc开发个人博客,编辑器希望是markdown风格的,这样写文字会很方便.首先先解决 ...

  6. 用nw.js开发markdown编辑器-已完成功能介绍

    这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/10/29/hexomd-introduction   文章目录 1. 功能列表 ...

  7. 自己动手开发更好用的markdown编辑器-04(实时预览)

    这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/25/hexomd-04/   程序打包   文章目录 1. 打开新窗口 ...

  8. 原创|我是如何从零学习开发一款跨平台桌面软件的(Markdown编辑器)

    原始冲动 最近一直在学习 Electron 开发桌面应用程序,目的是想做一个桌面编辑器,虽然一直在使用Typore这款神器,但无奈Typore太过国际化,在国内水土不服,无法满足我的一些需求. 比如实 ...

  9. 我是如何从零学习开发一款跨平台桌面软件的(Markdown编辑器)

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 原始冲动 最近一 ...

随机推荐

  1. SpringBoot系列——WebSocket

    关于websocket的介绍与实现,我之前写过一篇博客,记录了用springboot-websocket实现了私聊.群聊的简单实例,这里就只提供一个入口,不再重复的写了,WebSocket+Java ...

  2. python安装第三方库的最简单方式

    一.准备工作 (只做一次准备工作,以后都会很方便) 1. 安装pip (1)下载pip到D:\download pip下载地址:https://pypi.python.org/pypi/pip#dow ...

  3. C#文件操作。

    文件操作常用相关类: File: 操作文件,静态类,对文件整体操作. Directory:操作目录(文件夹),静态类. FileInfo:文件类,用来描述一个文件对象,获取指定目录下的所有文件时,返回 ...

  4. 【转载】C#生成图片的缩略图

    图片处理是C#程序开发中时常会涉及到的一个业务,除了图像的上传.保存以及下载等功能外,根据上传的图片生成一个缩略图也是常见业务,在C#语言中,可以通过Image类提供的相关方法对图片进行操作,如指定宽 ...

  5. 结构型---外观模式(Facade Pattern)

    定义 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直接通 ...

  6. C#中设置窗口在最前显示而其他窗口不能使用

    对程序中的一个Form1处理,让其在打开的情况下,其他窗体都无法使用,全部焦点都在他身上. 1.这种方法最简单,直接调用窗体的模态对话框函数显示窗体 Form1.ShowDialog(): 2.设置窗 ...

  7. Docker 系列七(Dubbo 微服务部署实践).

    一.前言 之前我们公司部署服务,就是大家都懂的那一套(安装JDK.Tomcat —> 编译好文件或者打war包上传 —> 启动Tomcat),这种部署方式一直持续了很久,带来的问题也很多: ...

  8. LNMP 一键安装 yum install php-mcrypt libmcrypt libmcrypt-devel

    centos源不能安装libmcrypt-devel,由于版权的原因没有自带mcrypt的包 有两种方法解决,一种是使用第三方源,这样还可以使用yum来安装,简单方便,坏处是第三方源多少有中不可靠的感 ...

  9. blfs(systemv版本与systemd版本均适用)学习笔记-从主机挂载lfs的方法

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 运行以下命令,挂载并进入lfs分区即可 su export LFS=/mnt/lfs mount -v -t ext4 /dev ...

  10. element vue Array数组和Map对象的添加与删除

    使用场景: 一个后台系统中, 管理员要配置自定义字段后台要生成id和title,其他角色要使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title都是无法固定的,因此页面显示的ti ...