xkeditor
Version 1.0.8
Ein Editor, der reichhaltigen Text und Markdown unterstützt
XK-Editor V2 hat mit der Entwicklung begonnen und ist nicht mit V1 kompatibel, und V1 wird bald in der Wartung gestoppt, da es von Grund auf neu geschrieben ist (um sich an den neuen Editor anzupassen, wird das Umschreiben besser sein). Die V2-Version nimmt ein Wysiwyg-Modell an, das Typora ähnelt, und unterstützt auch ein spaltenbasiertes Modell.
XK-Editor = Vue2.0 + Ace + TinyMCE ;
XK-Editor unterstützt eine reiche Textbearbeitung und -markdown und kann zwischen Markdown und HTML übertragen werden, um den Bedürfnissen verschiedener Personen zu erfüllen.
:smile:XK-EDITOR
XK-Editor verbessert sich noch und die API kann sich ändern
Ausgehend von Version 1.0.8, um die Größe des Anbieters zu verringern und zu verhindern, dass die Ladezeit zu lang ist, verwendet XK-Editor jsDelivr CDN , um standardmäßig Teil node_modules zu laden. Sie müssen das folgende Skript -Tag in index.html hinzufügen. Wenn Sie nicht planen, diese Methode zu laden, stornieren Sie bitte alle import in der Datei unter node_modules/xkeditor/components .
Ab Version 1.4.6 wird das Modul standardmäßig über webpack externals importiert. Sie müssen daher die webpack -Konfigurationsdatei ändern und die entsprechende Konfiguration wie folgt hinzufügen
<!-- 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"
}
} ;Sie können XK-Editor problemlos zu Ihren vorhandenen Projekten bringen
npm i --save xkeditorcp -r ./node_modules/xkeditor/public/static ./ import XK_Editor from "xkeditor" ;
export default {
components : {
"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
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>'
}
} Durch das Ausführen von Codeblöcken müssen das Backend nicht ausgeführt werden, mit Ausnahme von JavaScript, und andere Sprachen müssen über ein Backend verfügen, um den Code auszuführen. Der Backend -Testamentsvollstrecker wird auf der Grundlage von Richter0/API umgebaut. Einzelheiten zu unterstützten Sprachen finden Sie unter dem Run-Code. Wenn Sie Anforderungen an andere Sprachen haben, können Sie sich auf das Tutorial zum Wiederaufbau beziehen.
Runcode
Wiki
XK-Editor wird mit Hilfe von Otstar Lin und den folgenden Mitwirkenden geschrieben und gepflegt.
Otstar Lin - persönliche Website · Blog · GitHub
Open Source unter der Lizenz der Apache Lizenz 2.0.
