一个支持富文本和Markdown的编辑器
XK-Editor
= Vue2.0
+ Ace
+ TinyMCE
;
XK-Editor支持富文本编辑和Markdown,同时可以在Markdown和HTML互转,满足各种人的需求。
:smile:
[text]{style|label}
的方式解析文字从 Version 1.0.8 开始,为了减小Vendor体积,防止加载时间过长,XK-Editor默认使用jsDelivr CDN
加载部分node_modules
需要在index.html中添加一下script标签,若您不打算使用该方式加载,请将node_modules/xkeditor/components
下的文件中s所有的import
注释取消。
<!-- ACE Editor -->
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.4/src-noconflict/ace.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ace-builds@1.4.4/src-noconflict/ext-language_tools.js"></script>
<!-- Preitter -->
<script src="https://cdn.jsdelivr.net/npm/prettier@1.18.2/standalone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prettier@1.18.2/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">
<link rel="stylesheet" href="/static/prism-copy-to-clipboard.min.css">
<!-- Katex -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css">
<!-- Mermaid -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@8.0.0/dist/mermaid.min.js"></script>
<!-- Emoji-js -->
<script src="https://cdn.jsdelivr.net/npm/emoji-js@3.4.1/lib/emoji.min.js"></script>
<!-- TinyMCE -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@5.0.5/tinymce.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tinymce@5.0.5/themes/silver/theme.min.js"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/tinymce@5.0.5/plugins/print/plugin.min.js,npm/tinymce@5.0.5/plugins/preview/plugin.min.js,npm/tinymce@5.0.5/plugins/fullpage/plugin.min.js,npm/tinymce@5.0.5/plugins/fullscreen/plugin.min.js,npm/tinymce@5.0.5/plugins/searchreplace/plugin.min.js,npm/tinymce@5.0.5/plugins/autolink/plugin.min.js,npm/tinymce@5.0.5/plugins/directionality/plugin.min.js,npm/tinymce@5.0.5/plugins/code/plugin.min.js,npm/tinymce@5.0.5/plugins/visualblocks/plugin.min.js,npm/tinymce@5.0.5/plugins/visualchars/plugin.min.js,npm/tinymce@5.0.5/plugins/image/plugin.min.js,npm/tinymce@5.0.5/plugins/link/plugin.min.js,npm/tinymce@5.0.5/plugins/media/plugin.min.js,npm/tinymce@5.0.5/plugins/template/plugin.min.js,npm/tinymce@5.0.5/plugins/codesample/plugin.min.js,npm/tinymce@5.0.5/plugins/table/plugin.min.js,npm/tinymce@5.0.5/plugins/charmap/plugin.min.js,npm/tinymce@5.0.5/plugins/hr/plugin.min.js,npm/tinymce@5.0.5/plugins/pagebreak/plugin.min.js,npm/tinymce@5.0.5/plugins/nonbreaking/plugin.min.js,npm/tinymce@5.0.5/plugins/anchor/plugin.min.js,npm/tinymce@5.0.5/plugins/toc/plugin.min.js,npm/tinymce@5.0.5/plugins/insertdatetime/plugin.min.js,npm/tinymce@5.0.5/plugins/advlist/plugin.min.js,npm/tinymce@5.0.5/plugins/lists/plugin.min.js,npm/tinymce@5.0.5/plugins/wordcount/plugin.min.js,npm/tinymce@5.0.5/plugins/imagetools/plugin.min.js,npm/tinymce@5.0.5/plugins/textpattern/plugin.min.js"></script>
你可以轻松将 XK-Editor 引入你现有的项目
npm i --save xkeditor
cp -r ./node_modules/xkeditor/static ./
import XK_Editor from 'xkeditor'
export default {
components: {
'xk-editor': XK_Editor
}
}
git clone https://github.com/syfxlin/xkeditor.git
cd xkeditor
yarn
或者npm install
yarn
//or
npm install
yarn start
//or
npm run dev
然后打开浏览器访问指定http://ip:8080,如果能正常访问则可以进行下一步
5. build
yarn build
//or
npm run build
git clone https://github.com/syfxlin/xkeditor.git
cd xkeditor
static
文件夹下的所有文件复制到Vue项目下的static
文件夹下src/utils
和src/components
下的所有问文件复制到Vue项目下的src/utils
和src/components
文件夹下import XK_Editor from '@/components/XK_Editor'
export default {
components: {
'xk-editor': XK_Editor
}
}
import XK_Editor from '@/components/XK_Editor'
export default {
components: {
'xk-editor': XK_Editor
}
}
<xk-editor :settingApi="setting" :contentApi="content" />
//settingApi: setting.json的地址,或者返回setting的API接口地址(GET)
//contentApi: Markdown文件的地址,或者返回Markdown格式的API接口地址(GET)
//or
<xk-editor :setting="setting" :content="content" />
//setting: 即setting object,解析setting.json得到的对象
//content: 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
{
"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"
]
},
"aceSetting":{
"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"
},
"xkSetting":{
"apiBaseUrl": "",
"previewCss": "/static/github-markdown.css",
"previewClass": "markdown-body",
"delayToHtml": 500,
"scrollBind": "both",
"imgUpload": "http://test.ixk.me/upload.php",
"graffUrl": "static/",
"graffUpload": "http://test.ixk.me/upload.php",
"scrollMode": "javascript",
"pasteFormat": true,
"pasteImageUpload": true,
"enableTinyMCE": true
}
}
XK-Editor 由 Otstar Lin和下列贡献者的帮助下撰写和维护。
Otstar Lin - Personal Website · Blog · Github
根据 Apache License 2.0 许可证开源。