# 运营用加强 Markdown 编辑器

- Link: https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/
- Published: 2017-02-06T03:38:59+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#)

 * [初衷](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e5%88%9d%e8%a1%b7)
 * [特性](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e7%89%b9%e6%80%a7)
 * [Demo](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#demo)
 * [功能说明](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e5%8a%9f%e8%83%bd%e8%af%b4%e6%98%8e)
       * [插入新窗口打开连接](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e6%8f%92%e5%85%a5%e6%96%b0%e7%aa%97%e5%8f%a3%e6%89%93%e5%bc%80%e8%bf%9e%e6%8e%a5)
       * [插入含连接的图片](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e6%8f%92%e5%85%a5%e5%90%ab%e8%bf%9e%e6%8e%a5%e7%9a%84%e5%9b%be%e7%89%87)
       * [插入含描述的图片](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e6%8f%92%e5%85%a5%e5%90%ab%e6%8f%8f%e8%bf%b0%e7%9a%84%e5%9b%be%e7%89%87)
       * [选中文字标红](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e9%80%89%e4%b8%ad%e6%96%87%e5%ad%97%e6%a0%87%e7%ba%a2)
       * [快速打开图床](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e5%bf%ab%e9%80%9f%e6%89%93%e5%bc%80%e5%9b%be%e5%ba%8a)
 * [源码地址](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e6%ba%90%e7%a0%81%e5%9c%b0%e5%9d%80)
 * [涉及技术](https://www.ixiqin.com/2017/02/06/operating-with-strengthening-the-markdown-editor/#%e6%b6%89%e5%8f%8a%e6%8a%80%e6%9c%af)

## 初衷

我一个朋友需要参与公司针对 V2ex 的运营，而 V2ex 如果想要发富文本，就需要 markdown
语法，对于他一个长期担任运营岗的人来说，Markdown让他十分困扰。虽然有很多不错的编辑
器，但是由于他会有一些特殊的需求，所以还是十分不舒服。因此我便打算帮他做一个运营
用的插件，帮他完成他所需要的特殊功能

## 特性

 * 满足运营者常用功能需求(H1-H6)
 * 提供插入新窗口打开连接的功能
 * 提供插入含连接的图片的功能
 * 插入含描述的图片
 * 选中文字标红
 * 快速打开图床

## Demo

http://co.ixiqin.com

## 功能说明

#### 插入新窗口打开连接

可以在打开的对话框中输入标题和连接。自动生成一个基于HTML的新页面打开连接
 **需要
注意的是，此连接的会生成在文章尾部，需要自行复制到适当位置。**

#### 插入含连接的图片

可以在打开的对话框中输入连接、标题、图片地址、图片描述生成对应代码。
 **需要注意
的是，此连接的会生成在文章尾部，需要自行复制到适当位置。**

#### 插入含描述的图片

可以在打开的对话框中输入图片地址、图片描述生成对应代码。
 **需要注意的是，此连接
的会生成在文章尾部，需要自行复制到适当位置。**

#### 选中文字标红

选择要标红的文字，点击特色功能区的按钮，即可对指定文字进行标红处理。

#### 快速打开图床

编辑器未做图片上传，故而提供了一个图床的地址，可以将图片上传到sm.ms，复制其生成的
图片的连接，使用菜单栏中的工具添加即可。

## 源码地址

https://github.com/bestony/CoEditor

## 涉及技术

前端开发、`JavaScript`、`Editor.md`