Unduh xkeditor - Unduh Kode Sumber xkeditor

XK-editor

Seorang editor yang mendukung teks kaya dan penurunan harga

XK-Editor V2 telah memulai pengembangan dan tidak kompatibel dengan V1, dan V1 akan segera dihentikan dalam pemeliharaan karena ditulis dari awal (untuk beradaptasi dengan editor baru, penulisan ulang akan lebih baik). Versi V2 mengadopsi model WYSIWYG yang mirip dengan Typora, dan juga mendukung model berbasis kolom.

Isi

XK-editor
- Isi
- Perkenalan
- Fitur
- Demo
- Instal Instal
  - Hal -hal yang perlu diperhatikan
  - Instal dari NPM
  - Diperlukan ketergantungan
  - Konfigurasi && Data
- Jalankan blok kode
- Dokumen dok
- Pemeliharaan
- Lisensi
- Render render

Perkenalan

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

XK-Editor mendukung pengeditan dan penurunan harga teks yang kaya, dan dapat ditransfer antara penurunan harga dan HTML untuk memenuhi kebutuhan berbagai orang.

Fitur

[Dua editor] mendukung pengeditan teks yang kaya dan pengeditan penurunan harga
[Dua format pertukaran] mendukung penurunan harga dan pertukaran HTML
[Mode mesin tik] mendukung mode mesin tik, tidak perlu menggunakan roda mouse saat mengedit, dan dapat menyesuaikan posisi penentuan posisi untuk memenuhi kebutuhan berbagai layar dan pengguna
[Tempel pemformatan otomatis] mendukung pemformatan otomatis HTML ke Markdown saat menempelkan HTML
[Upload Otomatis Pasta Gambar] Mendukung Upload Otomatis Tempel Gambar dan Isi Otomatis Tautan
[Embed Running Block] mendukung penyematan blok kode runnable, dan dapat mendukung berbagai bahasa melalui interaksi dengan backend.
[Unduh] Dukungan Ekspor dan Unduh File dalam Markdown dan Format HTML
[Instant Save] Mendukung penghematan instan ke browser tanpa takut fluktuasi jaringan
[Optimalisasi Seluler] Mengoptimalkan pengalaman pengeditan terminal seluler, mendukung pengguliran inersia, dan mematikan pratinjau waktu nyata secara default
[Gulir Ikatan] Mendukung pengikatan gulir dua arah/satu arah, memungkinkan pratinjau untuk mengikuti input
[Tree Toc] Direktori dapat dilipat dan Anda tidak perlu membacanya untuk waktu yang lama untuk menemukannya
[Tema Kustom] Mendukung Tema Kustom, Anda dapat mengubah gaya tampilan dengan mengganti CSS
[Emoji Emoticon] Emotikon yang mendukung sintaks GitHub :smile:
[Daftar Tugas] Mendukung pembuatan daftar tugas
[Formula Tex] Dukungan penyisipan formula KATEX
[FOLCHART/URAEN BAGAN/GANTT BAGI] Mendukung sintaks putri duyung untuk menulis berbagai diagram
[Parase HTML] Mendukung parsing berbagai tag HTML dan mendukung tag penyaringan
[Sintaks ekstensi eksklusif] memiliki beberapa sintaks ekstensi
[Penyelesaian Otomatis] Mendukung Penyelesaian Sintaks Otomatis
[Unggah gambar] Dukungan unggah gambar
Ada juga banyak fungsi magis yang menunggu Anda untuk ditemukan.

Demo

XK-editor

Instal Instal

Hal -hal yang perlu diperhatikan

XK-Editor masih membaik dan API dapat berubah

Mulai dari versi 1.0.8, untuk mengurangi ukuran vendor dan mencegah waktu pemuatan menjadi terlalu lama, XK-editor menggunakan jsDelivr CDN untuk memuat bagian node_modules secara default. Anda perlu menambahkan tag skrip berikut di index.html. Jika Anda tidak berencana untuk memuat metode ini, harap batalkan semua komentar import di file di bawah node_modules/xkeditor/components .

Mulai dari versi 1.4.6, modul diimpor melalui webpack externals secara default, jadi Anda perlu memodifikasi file konfigurasi webpack dan menambahkan konfigurasi yang sesuai, sebagai berikut

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

Instal dari NPM

Anda dapat dengan mudah membawa XK-Editor ke proyek Anda yang ada

Instal XK-Editor

npm i --save xkeditor

Salin file statis XK-Editor ke Direktori Root Proyek

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

Mengimpor komponen XK-Editor

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

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

Diperlukan ketergantungan

 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

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

Jalankan blok kode

Menjalankan blok kode tidak memerlukan backend untuk dijalankan, kecuali untuk JavaScript, dan bahasa lain perlu memiliki backend untuk menjalankan kode. Eksekutor backend dibangun kembali berdasarkan Hakim0/API. Untuk detail bahasa yang didukung, silakan merujuk ke Run-Code. Jika Anda memiliki persyaratan untuk bahasa lain, Anda dapat merujuk ke tutorial untuk membangun kembali.

run-code

Dokumen dok

Wiki

Pemeliharaan

XK-Editor ditulis dan dipelihara dengan bantuan Otstar Lin dan kontributor berikut.

Otstar Lin - Situs Web Pribadi · Blog · GitHub

Lisensi

Sumber terbuka di bawah lisensi Lisensi Apache 2.0.

Render render

Memperluas

xkeditor

XK-editor

Isi

Perkenalan

Fitur

Demo

Instal Instal

Hal -hal yang perlu diperhatikan

Instal dari NPM

Diperlukan ketergantungan

Konfigurasi && Data

Jalankan blok kode

Dokumen dok

Pemeliharaan

Lisensi

Render render

blocksuite

Editor online HTML KindEditor

Editor HTML Daring Asai

Sistem manajemen konten ExmayCMS

Kode sumber obrolan video asing

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

Editor online HTML KindEditor

Editor HTML Daring Asai

Google Dorks

shepherd

mongo express