Téléchargement xkeditor - Téléchargement du code source xkeditor

XK-Editor

Un éditeur qui prend en charge le texte riche et la marque

XK-Editor V2 a commencé le développement et n'est pas compatible avec V1, et V1 sera bientôt arrêté en maintenance car il est écrit à partir de zéro (pour s'adapter au nouvel éditeur, la réécriture sera meilleure). La version V2 adopte un modèle WYSIWYG similaire à Typora et prend également en charge un modèle basé sur une colonne.

Contenu

XK-Editor
- Contenu
- Introduction
- Caractéristiques
- Démo
- Installation d'installation
  - Choses à noter
  - Installer à partir de NPM
  - Dépendance requise
  - Données de configuration
- Exécuter les blocs de code
- Documenter le doc
- Maintienneur
- Licence
- Rendre

Introduction

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

L'éditeur de XK prend en charge le riche édition de texte et la marque, et peut être transféré entre Markdown et HTML pour répondre aux besoins de diverses personnes.

Caractéristiques

[Deux éditeurs] prend en charge l'édition de texte riche et l'édition de marque
[Deux formats Interchange] prend en charge Markdown et HTML Interchange
[Mode de machine à écrire] prend en charge le mode de machine à écrire, pas besoin d'utiliser la roue de la souris lors de l'édition et peut ajuster la position de positionnement pour répondre aux besoins de divers écrans et utilisateurs
[Coller Formatage automatique] prend en charge la mise en forme automatique de HTML à Markdown lors de la collation de HTML
[Le téléchargement automatique de la pâte d'images] prend en charge le téléchargement automatique de pâte d'images et les liens de remplissage automatique
[Embed Running Block] prend en charge l'intégration de blocs de code exécutables et peut prendre en charge plusieurs langues via une interaction avec le backend.
[Télécharger] Prise en charge des fichiers d'exportation et de téléchargement dans les formats Markdown et HTML
[Save instantanée] Prise en charge de l'épargne instantanée au navigateur sans crainte de fluctuations de réseau
[Optimisation mobile] Optimiser l'expérience d'édition du terminal mobile, prend en charge le défilement inertielle et désactiver l'aperçu en temps réel par défaut
[Scroll Binding] prend en charge la liaison de défilement bidirectionnelle / unidirectionnelle, permettant aux aperçus de suivre l'entrée
[Arbre toc] Le répertoire est pliable et vous n'avez pas à le lire pendant longtemps pour le localiser
[Thème personnalisé] prend en charge les thèmes personnalisés, vous pouvez modifier le style d'affichage en remplaçant CSS
[Emoji Emoticon] émoticônes qui soutiennent la syntaxe GitHub :smile:
[Listes de tâches] Prise en charge la création de listes de tâches
[Formule Tex] Soutenir l'insertion des formules Katex
[Organigramme / graphique de séquence / Gantt Tableau] prend en charge la syntaxe de sirène pour écrire divers diagrammes
[Parase HTML] Prise en charge de l'analyse de diverses balises HTML et prend en charge les balises de filtrage
[Syntaxe d'extension exclusive] Avoir une syntaxe d'extension
[Auto Achtetion] prend en charge l'achèvement de la syntaxe automatique
[Téléchargement d'image] Prise en charge du téléchargement d'image
Il existe également de nombreuses fonctions magiques qui vous attendent.

Démo

XK-Editor

Installation d'installation

Choses à noter

XK-Editor s'améliore toujours et l'API peut changer

À partir de la version 1.0.8, afin de réduire la taille du fournisseur et d'empêcher le temps de chargement d'être trop long, XK-Editor utilise jsDelivr CDN pour charger la pièce node_modules par défaut. Vous devez ajouter la balise de script suivante dans index.html. Si vous ne prévoyez pas de charger cette méthode, veuillez annuler tous les commentaires import dans le fichier sous node_modules/xkeditor/components .

À partir de la version 1.4.6, le module est importé via webpack externals par défaut, vous devez donc modifier le fichier de configuration webpack et ajouter la configuration correspondante, comme suit

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

Installer à partir de NPM

Vous pouvez facilement apporter XK-Editor à vos projets existants

Installer XK-Editor

npm i --save xkeditor

Copiez le fichier statique de l'éditeur XK dans le répertoire racine du projet

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

Importation de composants de l'éditeur XK

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

En utilisant des composants de l'éditeur XK

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

Dépendance requise

 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

Données de configuration

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

Exécuter les blocs de code

Les blocs de code en cours d'exécution ne nécessitent pas que le backend s'exécute, à l'exception de JavaScript, et d'autres langues doivent avoir un backend pour exécuter le code. L'exécuteur backend est reconstruit sur la base du juge0 / API. Pour plus de détails sur les langues prises en charge, veuillez vous référer au code de course. Si vous avez des exigences pour d'autres langues, vous pouvez vous référer au tutoriel pour reconstruire.

code de course

Documenter le doc

Wiki

Maintienneur

L'éditeur XK est écrit et entretenu à l'aide d'Otstar Lin et des contributeurs suivants.

Otstar Lin - Site Web personnel · Blog · GitHub

Licence

Open source sous la licence Apache Licence 2.0.

Rendre

Développer

xkeditor

XK-Editor

Contenu

Introduction

Caractéristiques

Démo

Installation d'installation

Choses à noter

Installer à partir de NPM

Dépendance requise

Données de configuration

Exécuter les blocs de code

Documenter le doc

Maintienneur

Licence

Rendre

blocksuite

KindEditor Éditeur HTML en ligne

Éditeur HTML en ligne Asai

Système de gestion de contenu ExmayCMS

Code source du chat vidéo étranger

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor Éditeur HTML en ligne

Éditeur HTML en ligne Asai

Google Dorks

shepherd

mongo express