XK-Editor

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

Version Author Lincense

简介 Introduction

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

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

特性 Feature


[TOC]

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

字符效果和横线等


~删除线~ 斜体字 粗体 粗体 粗斜体

上标:X2,下标:O2

特有语法

[这是带有CSS的文字]{color:blue}

[这是带有CSS的文字]{background:#ddd|span}

[这是带有CSS的文字]{text-align:center}

引用 Blockquotes

引用文本 Blockquotes

中间可以书写其他普通文本

引用:如果想要插入空白换行即<br />标签,在插入处先键入两个以上的空格然后回车即可,普通链接

普通链接

普通链接带标题

锚点链接

行内代码 Inline code

执行命令:npm install marked

缩进风格

即缩进四个空格,也做为实现类似 <pre> 预格式化文本 ( Preformatted Text ) 的功能。

预格式化文本:

| First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell |

JS代码

importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn@3.6.3/workbox/workbox-sw.js'); workbox.setConfig({ modulePathPrefix:'https://cdn.jsdelivr.net/npm/workbox-cdn@3.6.3/workbox/' }); if (workbox) { console.log(`Yay! Workbox is loaded ?`); } else { console.log(`Boo! Workbox didn't load ?`); }

HTML 代码 HTML codes

<!DOCTYPE html> <html> <head> <mate charest="utf-8" /> <title>Hello world!</title> </head> <body> <h1>Hello world!</h1> </body> </html>

图片 Images



列表 Lists

无序列表 Unordered Lists1

无序列表 Unordered Lists2

有序列表 Ordered Lists

  1. 第一行
  2. 第二行
  3. 第三行

GFM task list


绘制表格 Tables

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell
Function name Description
help() Display the help window.
destroy() Destroy your computer!
Left-Aligned Center Aligned Right Aligned
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1

Emoji表情 :smiley:

:smiley:

科学公式 TeX(KaTeX)

E=mc2E=mc^2

x>yx > y

(sqrt3x1+(1+x)2)(\\sqrt{3x-1}+(1+x)^2)

sin(alpha)theta=sum_i=0n(xi+cos(f))\\sin(\\alpha)^{\\theta}=\\sum\_{i=0}^{n}(x^i + \\cos(f))

\\sin(\\alpha)^{\\theta}=\\sum\_{i=0}^{n}(x^i + \\cos(f))

流程图

A-->B; A-->C; B-->D; C-->D;

时序图

participant Alice participant Bob Alice->John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail... John-->Alice: Great! John->Bob: How about you? Bob-->John: Jolly good!

甘特图

dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d