xkeditor Download - xkeditor Source code download

XK-Editor

An editor that supports rich text and Markdown

XK-Editor v2 has begun development and is not compatible with v1, and v1 will be stopped in maintenance soon since it is written from scratch (to adapt to the new editor, rewriting will be better). The v2 version adopts a WYSIWYG model similar to Typora, and also supports a column-based model.

XK-Editor
- Contents
- Introduction
- Features
- Demo
- Install Install
  - Things to note
  - Install from NPM
  - Dependency required
  - config && data
- Run code blocks
- Document Doc
- Maintainer
- License
- Render Render

Introduction

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

XK-Editor supports rich text editing and Markdown, and can be transferred between Markdown and HTML to meet the needs of various people.

Features

[Two Editors] Supports rich text editing and Markdown editing
[Two formats interchange] Supports Markdown and HTML interchange
[Typewriter mode] Supports typewriter mode, no need to use the mouse wheel when editing, and can adjust the positioning position to meet the needs of various screens and users
[Paste automatic formatting] Supports automatic formatting of HTML to Markdown when pasting HTML
[Automatic upload of picture paste] Supports automatic upload of pictures paste and automatic fill in links
[Embed Running Block] Supports embedding runnable code blocks, and can support multiple languages through interaction with the backend.
[Download] Support export and download files in Markdown and HTML formats
[Instant Save] Support instant saving to the browser without fear of network fluctuations
[Mobile Optimization] Optimize the editing experience of the mobile terminal, supports inertial scrolling, and turn off real-time preview by default
[Scroll Binding] Supports two-way/one-way scroll binding, allowing previews to follow input
[Tree TOC] The directory is foldable and you don't have to read it for a long time to locate it
[Custom Theme] Supports custom themes, you can change the display style by replacing CSS
[Emoji emoticon] Emoticons that support Github syntax :smile:
[Task lists] Support creation of Task lists
[TeX formula] Support insertion of KaTex formulas
[Flowchart/Sequence Chart/Gantt Chart] Supports mermaid syntax to write various diagrams
[Parase HTML] Support parsing various HTML tags and supports filtering tags
[Exclusive Extension Syntax] Have some Extension Syntax
[Auto Completion] Supports automatic syntax completion
[Picture Upload] Support image upload
There are also many magical functions waiting for you to discover.

Demo

XK-Editor

Install Install

Things to note

XK-Editor is still improving and the API may change

Starting from Version 1.0.8, in order to reduce the size of the Vendor and prevent the loading time from being too long, XK-Editor uses jsDelivr CDN to load part node_modules by default. You need to add the following script tag in index.html. If you do not plan to load this method, please cancel all import comments in the file under node_modules/xkeditor/components .

Starting from Version 1.4.6, the module is imported through webpack externals by default, so you need to modify the webpack configuration file and add the corresponding configuration, as follows

 <!-- ACE Editor -->
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/ace.min.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/ext-language_tools.js " > </ script >
<!-- Marked -->
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/lib/marked.min.js " > </ script >
<!-- Turndown -->
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/turndown.min.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/turndown-plugin-gfm.min.js " > </ script >
<!-- Preitter -->
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/standalone.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/parser-markdown.js " > </ script >
<!-- Prism.js -->
< script src =" /static/prism.js " > </ script >
< link rel =" stylesheet " href =" /static/prism-okaidia.css " />
< link rel =" stylesheet " href =" /static/prism-line-numbers.css " />
< link rel =" stylesheet " href =" /static/prism-toolbar.css " />
<!-- Katex -->
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js " > </ script >
< link
  rel =" stylesheet "
  href =" https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css "
/>
<!-- Mermaid -->
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js " > </ script >
<!-- Emoji-js -->
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/lib/emoji.min.js " > </ script >
<!-- TinyMCE -->
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/tinymce.min.js " > </ script >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/themes/silver/theme.min.js " > </ script >
< script src =" https://cdn.jsdelivr.net/combine/npm/[email protected]/plugins/print/plugin.min.js,npm/[email protected]/plugins/preview/plugin.min.js,npm/[email protected]/plugins/fullpage/plugin.min.js,npm/[email protected]/plugins/fullscreen/plugin.min.js,npm/[email protected]/plugins/searchreplace/plugin.min.js,npm/[email protected]/plugins/autolink/plugin.min.js,npm/[email protected]/plugins/directionality/plugin.min.js,npm/[email protected]/plugins/code/plugin.min.js,npm/[email protected]/plugins/visualblocks/plugin.min.js,npm/[email protected]/plugins/visualchars/plugin.min.js,npm/[email protected]/plugins/image/plugin.min.js,npm/[email protected]/plugins/link/plugin.min.js,npm/[email protected]/plugins/media/plugin.min.js,npm/[email protected]/plugins/template/plugin.min.js,npm/[email protected]/plugins/codesample/plugin.min.js,npm/[email protected]/plugins/table/plugin.min.js,npm/[email protected]/plugins/charmap/plugin.min.js,npm/[email protected]/plugins/hr/plugin.min.js,npm/[email protected]/plugins/pagebreak/plugin.min.js,npm/[email protected]/plugins/nonbreaking/plugin.min.js,npm/[email protected]/plugins/anchor/plugin.min.js,npm/[email protected]/plugins/toc/plugin.min.js,npm/[email protected]/plugins/insertdatetime/plugin.min.js,npm/[email protected]/plugins/advlist/plugin.min.js,npm/[email protected]/plugins/lists/plugin.min.js,npm/[email protected]/plugins/wordcount/plugin.min.js,npm/[email protected]/plugins/imagetools/plugin.min.js,npm/[email protected]/plugins/textpattern/plugin.min.js " > </ script >

 module . exports = {
  externals : {
    "ace-builds" : "ace" ,
    marked : "marked" ,
    turndown : "TurndownService" ,
    "turndown-plugin-gfm" : "turndownPluginGfm" ,
    prismjs : "Prism" ,
    "emoji-js" : "EmojiConvertor" ,
    "tinymce/tinymce" : "tinyMCE" ,
    mermaid : "mermaid" ,
    katex : "katex" ,
    "katex/dist/contrib/auto-render" : "renderMathInElement"
  }
} ;

Install from NPM

You can easily bring XK-Editor to your existing projects

Install XK-Editor

npm i --save xkeditor

Copy the XK-Editor static file to the project root directory

cp -r ./node_modules/xkeditor/public/static ./

Importing XK-Editor Components

 import XK_Editor from "xkeditor" ;
export default {
  components : {
    "xk-editor" : XK_Editor
  }
} ;

Using XK-Editor Components

 < xk-editor :config =" config " v-model =" content " :data.sync =" data " />
<!-- config(Object) 是下方 config 内容，该参数是单向的，Editor 内部的设置变动不会同步到父组件 -->
<!-- v-model(String) 对应 Markdown 内容，该参数是双向的，由于 ACE 和 TinyMCE 编辑器的限制，当该参数被外部修改的时候，即与内部 Markdown 内容不一致时，会触发 ACE 编辑器和 TinyMCE 的 setValue，此时光标将会重置。 -->
<!-- data(Object) 是 XK-Editor 扩展的数据内容，用来存储一些非 Markdown 的数据，该参数是双向的 -->

Dependency required

 ace-builds
@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons
@fortawesome/vue-fontawesome
@tinymce/tinymce-vue
axios
emoji-js
katex
marked
mermaid
prismjs
tinymce
turndown
turndown-plugin-gfm

config && data

 var config = {
  // 该设置为 TinyMCE 的设置，详情见 TinyMCE 编辑器的文档
  tinymceSetting : {
    language_url : "/static/tinymce/langs/zh_CN.js" ,
    language : "zh_CN" ,
    skin_url : "/static/tinymce/skins/ui/oxide" ,
    body_class : "markdown-body" ,
    content_css : "/static/github-markdown.css" ,
    plugins :
      "print preview fullpage searchreplace autolink directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern" ,
    toolbar :
      "formatselect | fontsizeselect | bold italic underline strikethrough blockquote forecolor backcolor prismjs | link image media pageembed | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | tex-$ tex-math flow seq gantt mermaid | removeformat code toMarkdownEditor | undo redo" ,
    image_advtab : true ,
    importcss_append : true ,
    height : "100%" ,
    template_cdate_format : "[CDATE: %m/%d/%Y : %H:%M:%S]" ,
    template_mdate_format : "[MDATE: %m/%d/%Y : %H:%M:%S]" ,
    image_caption : true ,
    spellchecker_dialog : true ,
    spellchecker_whitelist : [ "Ephox" , "Moxiecode" ]
  } ,
  // 该设置为 ACE 编辑器的设置，详情见 ACE 编辑器文档
  aceSetting : {
    // toolbar 为 XK-Editor 扩展的字段，语法和 tinymce 的 toolbar 字段一致
    toolbar :
      "h1 h2 h3 h4 h5 h6 | bold italic underline strikethrough quote mark code | sup sub tex-$ tex-math | flow seq gantt mermaid | ul ol minus table time | link image video graff | toLine search toc typewriter switchPreview fullPreview fullScreen toHtmlEditor toTinyMCE format empty setting | undo redo | setLocalStorage getLocalStorage removeLocalStorage | help info | pasteFormat" ,
    minLines : 10 ,
    fontSize : "17px" ,
    theme : "ace/theme/solarized_light" ,
    mode : "ace/mode/markdown" ,
    tabSize : 4 ,
    wrap : true ,
    enableSnippets : true ,
    enableLiveAutocompletion : true ,
    enableBasicAutocompletion : true ,
    value : "# XK-Editor"
  } ,
  // XK-Editor 相关设置
  xkSetting : {
    // 暂时无用
    apiBaseUrl : "" ,
    // 预览的 CSS 文件，类似于主题
    previewCss : "/static/github-markdown.css" ,
    // 预览的 class
    previewClass : "markdown-body" ,
    // 延迟渲染时间 (ms)，由于性能因素 XK-Editor 限制该选项不能低于 500ms
    delayToHtml : 500 ,
    // 滚动绑定，(left,right,both)
    scrollBind : "both" ,
    // 图片上传的地址
    imgUpload : "http://example.com/upload.php" ,
    // 滚动模式，默认使用 JavaScript 的方式来滚动，防止与 Hash Router 冲突
    scrollMode : "javascript" ,
    // 粘贴格式化
    pasteFormat : true ,
    // 粘贴自动上传(仅对复制图像时有效，混合内容无效，需要设置图片上传地址)
    pasteImageUpload : true ,
    // 是否开启 TinyMCE 编辑器
    enableTinyMCE : true ,
    // run-code 的地址
    judge0API : "https://example.com" ,
    // run-code 语言列表
    runCodeLangList : {
      c : 1 ,
      cpp : 2 ,
      bash : 3 ,
      csharp : 4 ,
      go : 5 ,
      java : 6 ,
      node : 7 ,
      php : 8 ,
      python : 9 ,
      python2 : 10 ,
      ruby : 11 ,
      rust : 12 ,
      scala : 13 ,
      typescript : 14
    }
  }
} ;
var data = {
  graff : {
    // SVG Hash
    "6b3117" :
      // viewBox|SVG innerHTML
      '8.399999618530273 9 423.9984436035156 154|<path d="M 290.4,100 L 293.4,104 L 304.4,112 L 326.4,123 L 345.4,131 L 360.4,136 L 378.4,140 L 395.4,145 L 405.4,148 L 415.4,152 L 420.4,152 L 421.4,153 L 422.4,153" fill="none" stroke="#6190e8" stroke-width="2"></path><rect x="18.4" y="19" fill="none" stroke="#6190e8" stroke-width="2" width="131" height="69" d="M 18.4 19 h 131 v 69 h -131 Z"></rect>'
  }
}

Run code blocks

Running code blocks does not require the backend to run, except for javascript, and other languages need to have a backend to execute the code. The backend executor is rebuild based on judge0/api. For details of supported languages, please refer to run-code. If you have any requirements for other languages, you can refer to the tutorial to rebuild.

run-code

Document Doc

Wiki

Maintainer

XK-Editor is written and maintained with the help of Otstar Lin and the following contributors.

Otstar Lin - Personal Website · Blog · Github

License

Open source under the Apache License 2.0 license.

Render Render

Expand

xkeditor

XK-Editor

Contents

Introduction

Features

Demo

Install Install

Things to note

Install from NPM

Dependency required

config && data

Run code blocks

Document Doc

Maintainer

License

Render Render

blocksuite

KindEditor HTML online editor

Asai Online HTML Editor

ExmayCMS content management system

Foreign video chat source code

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTML online editor

Asai Online HTML Editor

Google Dorks

shepherd

mongo express