Descarga xkeditor - Descargar el código fuente de xkeditor

Xk-editor

Un editor que admite texto rico y markdown

XK-Editor V2 ha comenzado el desarrollo y no es compatible con V1, y V1 se detendrá pronto en mantenimiento ya que está escrito desde cero (para adaptarse al nuevo editor, la reescritura será mejor). La versión V2 adopta un modelo WYSIWYG similar a Typora, y también admite un modelo basado en columnas.

Contenido

Xk-editor
- Contenido
- Introducción
- Características
- Manifestación
- Instalar instalación
  - Cosas a tener en cuenta
  - Instalar desde NPM
  - Se requiere dependencia
  - config && data
- Ejecutar bloques de código
- Documento Doc
- Mantenedor
- Licencia
- Render renderizado

Introducción

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

XK-Editor admite la edición de texto rica y Markdown, y puede transferirse entre Markdown y HTML para satisfacer las necesidades de varias personas.

Características

[Dos editores] admite la edición de texto rica y la edición de Markdown
[Intercambio de dos formatos] admite el intercambio de Markdown y HTML
[Modo de máquina de escribir] admite el modo de máquina de escribir, no es necesario usar la rueda del mouse al editar, y puede ajustar la posición de posicionamiento para satisfacer las necesidades de varias pantallas y usuarios
[Pegar formateo automático] admite el formateo automático de HTML a Markdown al pegar HTML
[Carga automática de pasta de imágenes] admite la carga automática de imágenes Pegar y relleno automático de enlaces
[Incrustar el bloque de ejecución] admite la incrustación de bloques de código ejecutables y puede admitir múltiples idiomas a través de la interacción con el backend.
[Descargar] admite exportar y descargar archivos en formatos Markdown y HTML
[Save instantáneo] Apoye el ahorro instantáneo al navegador sin temor a las fluctuaciones de la red
[Optimización móvil] Optimizar la experiencia de edición de la terminal móvil, admite el desplazamiento inercial y desactive la vista previa en tiempo real de forma predeterminada
[Enlace de desplazamiento] admite la unión de desplazamiento bidireccional/unidireccional, lo que permite que las vistas previas sigan la entrada
[Tree TOC] El directorio es plegable y no tiene que leerlo durante mucho tiempo para localizarlo
[Tema personalizado] Admite temas personalizados, puede cambiar el estilo de pantalla reemplazando CSS
[Emoji emoticon] emoticones que apoyan la sintaxis de Github :smile:
[Listas de tareas] Apoye la creación de listas de tareas
[Fórmula de Tex] Soporte de la inserción de fórmulas Katex
[Gráfico de diagrama de flujo/secuencia/gráfico Gantt] admite la sintaxis de sirena para escribir varios diagramas
[Parase html] admite analizar varias etiquetas HTML y admite etiquetas de filtrado
[Sintaxis de extensión exclusiva] tiene alguna sintaxis de extensión
[Finalización automática] admite la finalización automática de la sintaxis
[Carga de imagen] Soporte de imagen de imagen
También hay muchas funciones mágicas esperando que descubras.

Manifestación

Xk-editor

Instalar instalación

Cosas a tener en cuenta

XK-editor todavía está mejorando y la API puede cambiar

A partir de la versión 1.0.8, para reducir el tamaño del proveedor y evitar que el tiempo de carga sea demasiado largo, XK-editor usa jsDelivr CDN para cargar node_modules de pieza de forma predeterminada. Debe agregar la siguiente etiqueta de script en index.html. Si no planea cargar este método, cancele todos los comentarios import en el archivo en node_modules/xkeditor/components .

A partir de la versión 1.4.6, el módulo se importa a través de webpack externals de forma predeterminada, por lo que debe modificar el archivo de configuración webpack y agregar la configuración correspondiente, de la siguiente manera

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

Instalar desde NPM

Puede traer fácilmente XK-editor a sus proyectos existentes.

Instalar xk-editor

npm i --save xkeditor

Copie el archivo estático xk-editor al directorio root del proyecto

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

Importación de componentes XK-editor

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

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

Se requiere dependencia

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

Ejecutar bloques de código

Ejecutar bloques de código no requiere que el backend se ejecute, excepto JavaScript, y otros idiomas deben tener un backend para ejecutar el código. El albacea de backend es reconstruido basado en Judge0/API. Para obtener detalles de los idiomas compatibles, consulte el código de ejecución. Si tiene algún requisito para otros idiomas, puede consultar el tutorial para reconstruir.

código de ejecución

Documento Doc

Wiki

Mantenedor

XK-editor está escrito y mantenido con la ayuda de Otstar Lin y los siguientes contribuyentes.

Otstar Lin - Sitio web personal · Blog · Github

Licencia

Open Source bajo la licencia Apache License 2.0.

Render renderizado

Expandir

xkeditor

Xk-editor

Contenido

Introducción

Características

Manifestación

Instalar instalación

Cosas a tener en cuenta

Instalar desde NPM

Se requiere dependencia

config && data

Ejecutar bloques de código

Documento Doc

Mantenedor

Licencia

Render renderizado

blocksuite

Editor en línea KindEditor HTML

Editor HTML en línea Asai

Sistema de gestión de contenidos ExmayCMS

Código fuente de video chat extranjero

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

Editor en línea KindEditor HTML

Editor HTML en línea Asai

Google Dorks

shepherd

mongo express