xkeditor 다운로드 xkeditor 소스 코드 다운로드

xk 편집자

풍부한 텍스트와 마크 다운을 지원하는 편집자

XK-Editor v2는 개발을 시작했으며 V1과 호환되지 않으며 V1은 처음부터 작성되었으므로 곧 유지 보수에서 중지 될 것입니다 (새 편집기에 적응하기 위해 재 작성이 더 좋습니다). V2 버전은 오타와 유사한 wysiwyg 모델을 채택하고 열 기반 모델도 지원합니다.

내용물

xk 편집자
- 내용물
- 소개
- 특징
- 데모
- 설치 설치
  - 주목해야 할 것
  - NPM에서 설치하십시오
  - 의존성이 필요합니다
  - config && 데이터
- 코드 블록을 실행하십시오
- 문서 문서
- 관리자
- 특허
- 렌더링 렌더링

소개

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

XK-Editor는 풍부한 텍스트 편집 및 Markdown을 지원하며 Markdown과 HTML 사이에 전송되어 다양한 사람들의 요구를 충족시킬 수 있습니다.

특징

[두 편집자]는 풍부한 텍스트 편집 및 마크 다운 편집을 지원합니다
[두 형식 인터체인지]는 Markdown 및 HTML 인터체인지를 지원합니다
[Typewriter Mode]는 타자기 모드를 지원하고 편집 할 때 마우스 휠을 사용할 필요가 없으며 다양한 화면 및 사용자의 요구를 충족시키기 위해 포지셔닝 위치를 조정할 수 있습니다.
[자동 형식 페이스트] HTML을 붙여 넣을 때 HTML의 자동 형식을 Markdown에 지원합니다.
[사진 페이스트의 자동 업로드] 자동 업로드 사진 페이스트 및 자동 채우기 링크
[Embed Running Block]는 실행 가능한 코드 블록을 포함하고 백엔드와의 상호 작용을 통해 여러 언어를 지원할 수 있습니다.
[다운로드] Markdown 및 HTML 형식으로 내보내기 및 다운로드 파일
[Instant Save] 네트워크 변동에 대한 두려움없이 브라우저에 대한 즉각적인 저축 지원
[모바일 최적화] 모바일 터미널의 편집 경험을 최적화하고 관성 스크롤링을 지원하며 기본적으로 실시간 미리보기를 끄십시오.
[스크롤 바인딩]은 양방향/일원 스크롤 바인딩을 지원하여 미리보기가 입력을 따라갈 수 있도록합니다.
[Tree TOC] 디렉토리는 접을 수 있으며 찾기 위해 오랫동안 읽을 필요가 없습니다.
[Custom Theme]는 사용자 정의 테마를 지원하며 CSS를 대체하여 디스플레이 스타일을 변경할 수 있습니다.
[이모티콘 이모티콘] Github 구문을 지원하는 이모티콘 :smile:
[작업 목록] 작업 목록 작성 지원
[Tex Formula] Katex 공식의 삽입 지원
[FlowChart/Sequence Chart/Gantt 차트] Mermaid Syntax를 지원하여 다양한 다이어그램을 작성합니다.
[Parase HTML] 다양한 HTML 태그를 구문 분석하고 필터링 태그를 지원합니다.
[독점 확장 구문]에는 약간의 확장자 구문이 있습니다
[자동 완료]는 자동 구문 완료를 지원합니다
[사진 업로드] 지원 이미지 업로드
당신이 발견하기를 기다리는 많은 마법의 기능도 있습니다.

데모

xk 편집자

설치 설치

주목해야 할 것

XK 편집자는 여전히 개선되고 있으며 API가 변경 될 수 있습니다

버전 1.0.8에서 시작하여 공급 업체의 크기를 줄이고 로딩 시간이 너무 길지 않도록 XK-Editor는 jsDelivr CDN 사용하여 부품 node_modules 기본적으로로드합니다. index.html에 다음 스크립트 태그를 추가해야합니다. 이 메소드를로드 할 계획이없는 경우 node_modules/xkeditor/components 의 파일의 모든 import 주석을 취소하십시오.

버전 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 편집자를 쉽게 가져올 수 있습니다

xk-editor를 설치하십시오

npm i --save xkeditor

xk-editor static 파일을 프로젝트 루트 디렉토리에 복사하십시오.

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

XK 편집자 구성 요소 가져 오기

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

XKEDITOR 구성 요소 사용

 < 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 && 데이터

 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를 기준으로 재건축됩니다. 지원되는 언어에 대한 자세한 내용은 run 코드를 참조하십시오. 다른 언어에 대한 요구 사항이 있으면 재건을 위해 자습서를 참조하십시오.

런 코드

문서 문서

위키

관리자

XK-Editor는 Otstar Lin과 다음 기고자의 도움으로 작성 및 유지 관리됩니다.

Otstar Lin- 개인 웹 사이트 · 블로그 · Github

특허

Apache 라이센스 2.0 라이센스에 따른 오픈 소스.

렌더링 렌더링

확장하다

xkeditor

xk 편집자

내용물

소개

특징

데모

설치 설치

주목해야 할 것

NPM에서 설치하십시오

의존성이 필요합니다

config && 데이터

코드 블록을 실행하십시오

문서 문서

관리자

특허

렌더링 렌더링

blocksuite

KindEditor HTML 온라인 편집기

Asai 온라인 HTML 편집기

ExmayCMS 콘텐츠 관리 시스템

외국 영상채팅 소스코드

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

KindEditor HTML 온라인 편집기

Asai 온라인 HTML 편집기

Google Dorks

shepherd

mongo express