XK-Editor - 一个支持富文本和Markdown的编辑器

Otstar Lin

xkeditor01

前言

这个项目原本是为了升级 XK-Note 而创造的,后来因为功能的不断完善,逐渐的改成了可复用的组件。XK-Note 原本是使用 Editor.md 的编辑器,使用起来也很不错,但是总有一些不如意的地方,于是便打算自己造个编辑器。

XK-Editor 基于 Vue 是因为双向绑定这个特性,同时也是模板语法,便于开发,之所以采用 ACE 编辑器其实是当时觉得 CodeMirror 太丑了,实际开发中 ACE 实在太难弄了,文档跟不存在一样,只能阅读源码来实现一些不常见的功能,同时也修补了 Editor.md 中一些不如意的地方,比如没有打字机模式,每次写到屏幕下方的时候总是要重新滚动,代码高亮不够漂亮,没有自动补全等等。。。又引入了 Tiny MCE 使得编辑器拥有了富文本编辑的功能。

简介 Introduction

XK-Editor=Vue2.0+Ace+TinyMCE;

XK-Editor 支持富文本编辑和 Markdown ,同时可以在 Markdown 和 HTML 互转,满足各种人的需求。

特性 Feature

  • [两种编辑器] 支持富文本编辑和 Markdown 编辑
  • [两种格式互转] 支持 Markdown 和 HTML 互转
  • [打字机模式] 支持打字机模式,编辑时无需使用鼠标滚轮,并可调节定位位置,满足各种屏幕和使用者的需求
  • [粘贴自动格式化] 支持在粘贴 HTML 时自动将 HTML 格式化为 Markdown
  • [图片粘贴自动上传] 支持粘贴图片自动上传,并自动填充链接
  • [嵌入运行块] 支持嵌入可运行的代码块,通过与后端交互可以支持多种语言
  • [下载] 支持导出下载 Markdown 和 HTML 格式的文件
  • [即时保存] 支持即时保存到浏览器,无惧网络波动
  • [移动端优化] 优化移动端的编辑体验,支持惯性滚动,并默认关闭实时预览
  • [滚动绑定] 支持双向/单向滚动绑定,使预览能够跟随输入
  • [树形 TOC] 目录可折叠,不用再翻阅很久来定位
  • [自定义主题] 支持自定义主题,可以通过替换 CSS 来更换显示样式
  • [Emoji 表情] 支持 Github 语法的表情 :smile:
  • [Task lists] 支持创建 Task 列表
  • [TeX 公式] 支持插入 KaTex 公式
  • [流程图/时序图/甘特图] 支持 mermaid 语法编写各种图
  • [解析 HTML] 支持解析各种 HTML 标签,并支持过滤标签
  • [独有的扩展语法] 拥有一些扩展语法
  • [自动补全] 支持语法自动补全
  • [图片上传] 支持图片上传
  • 还有多种神奇的功能等待你的发掘。

演示 Demo

XK-Editor

安装 Install

注意事项

XK-Editor 还在不断的改进中 API 可能会更改

从 Version 1.0.8 开始,为了减小 Vendor 体积,防止加载时间过长,XK-Editor 默认使用 jsDelivr CDN 加载部分 node_modules 需要在 index.html 中添加以下 script 标签,若您不打算使用该方式加载,请将 node_modules/xkeditor/components 下的文件中所有的 import 注释取消。

从 Version 1.4.6 开始,模块默认通过 webpack externals 方式导入,所以您需要修改 webpack 的配置文件,添加对应的配置,如下

从 NPM 安装

你可以轻松将 XK-Editor 引入你现有的项目

  • 安装 XK-Editor
  • 将 XK-Editor static 文件复制到项目根目录
  • 导入 XK-Editor 组件
  • 使用 XK-Editor 组件

所需依赖

config && data

运行代码块

运行代码块除 javascript 不需要使用后端,其他语言都需要有后端负责执行代码。 后端执行器基于 judge0/api 重新 build 而来,支持的语言详见 run-code,若您有其他语言的需求,您可以自行参照教程重新 build

run-code

文档 Doc

Wiki

Github

求 star = ̄ ω  ̄=

维护者 Maintainer

XK-Editor 由 Otstar Lin 和下列 贡献者 的帮助下撰写和维护。

Otstar Lin -Personal Website·Blog·Github

许可证 License

lincense

根据 Apache License 2.0 许可证开源。

渲染 Render

xkeditor01.png

xkeditor02.png

结语

首先感谢你能看到最后,同时感谢你对该项目的兴趣。 该项目虽然不大,大部分核心的部件也是使用现成的组件,但是对我来说也是一次良好的经验,也是我第一个完整的前端项目,所以难免会有 Bug,若您在使用遇到了问题,请及时联系我进行修复,或者到 Github 上提交 issue,我会尽快的处理,另外若您有其他好的建议或者有希望增加的功能,请联系我进行添加或者提交 Pull Request。

Coding 最大的乐趣,不在 Coding,而在 Creating。 --- Otstar Lin