xkeditor下載xkeditor源代碼下載

XK-Editor

一個支持富文本和Markdown 的編輯器

XK-Editor v2 已經開始開發，由於是從頭寫起的（為了適應新的編輯器，重寫會好一點），所以與v1 不兼容，v1 將在不久後停止維護。 v2 版本採用了類似於Typora 的所見即所得的模式，同時也支持分欄的模式。

目錄Contents

XK-Editor
- 目錄Contents
- 簡介Introduction
- 特性Feature
- 演示Demo
- 安裝Install
  - 注意事項
  - 從NPM 安裝
  - 所需依賴
  - config && data
- 運行代碼塊
- 文檔Doc
- 維護者Maintainer
- 許可證License
- 渲染Render

簡介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的配置文件，添加對應的配置，如下

 <!-- 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"
  }
} ;

從NPM 安裝

你可以輕鬆將XK-Editor 引入你現有的項目

安裝XK-Editor

npm i --save xkeditor

將XK-Editor static 文件複製到項目根目錄

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

導入XK-Editor 組件

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

使用XK-Editor 組件

 < 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 的数据，该参数是双向的 -->

所需依賴

 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>'
  }
}

運行代碼塊

運行代碼塊除javascript 不需要使用後端，其他語言都需要有後端負責執行代碼。後端執行器基於judge0/api 重新build 而來，支持的語言詳見run-code ，若您有其他語言的需求，您可以自行參照教程重新build

run-code

文檔Doc

Wiki

維護者Maintainer

XK-Editor 由Otstar Lin 和下列貢獻者的幫助下撰寫和維護。

Otstar Lin - Personal Website · Blog · Github

許可證License

根據Apache License 2.0 許可證開源。

渲染Render

展開

xkeditor

XK-Editor

目錄Contents

簡介Introduction

特性Feature

演示Demo

安裝Install

注意事項

從NPM 安裝

所需依賴

config && data

運行代碼塊

文檔Doc

維護者Maintainer

許可證License

渲染Render

blocksuite

KindEditor HTML線上編輯器

阿賽線上HTML編輯器

億美內容管理系統ExmayCMS

國外視屏聊天源碼

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTML線上編輯器

阿賽線上HTML編輯器

Google Dorks

shepherd

mongo express