XK-Editor

一个支持富文本和Markdown的编辑器

Version Npm-Latest Author Lincense Build Status

目录 Contents

简介 Introduction

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

XK-Editor支持富文本编辑和Markdown,同时可以在Markdown和HTML互转,满足各种人的需求。

特性 Feature

演示 Demo

XK-Editor

安装 Install

注意事项

从 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>

从 NPM 安装

你可以轻松将 XK-Editor 引入你现有的项目

  1. 安装XK-Editor
npm i --save xkeditor
  1. 将XK-Editor static文件复制到项目根目录
cp -r ./node_modules/xkeditor/static ./
  1. 导入XK-Editor组件
import XK_Editor from 'xkeditor' export default { components: { 'xk-editor': XK_Editor } }

从本项目上构建

  1. 首先clone本项目,或者前往Releases下载本项目并解压
git clone https://github.com/syfxlin/xkeditor.git
  1. 进入项目文件夹
cd xkeditor
  1. 执行yarn或者npm install
yarn //or npm install
  1. 测试运行
yarn start //or npm run dev

然后打开浏览器访问指定http://ip:8080,如果能正常访问则可以进行下一步
5. build

yarn build //or npm run build
  1. 将项目文件夹下的文件复制到网站目录即可

组件方式使用

  1. 首先clone本项目,或者前往Releases下载本项目并解压
git clone https://github.com/syfxlin/xkeditor.git
  1. 进入项目文件夹
cd xkeditor
  1. static文件夹下的所有文件复制到Vue项目下的static文件夹下
  2. src/utilssrc/components下的所有问文件复制到Vue项目下的src/utilssrc/components文件夹下
  3. 导入XK-Editor组件
import XK_Editor from '@/components/XK_Editor' export default { components: { 'xk-editor': XK_Editor } }

调用方法

  1. 导入XK-Editor组件
import XK_Editor from '@/components/XK_Editor' export default { components: { 'xk-editor': XK_Editor } }
  1. 在合适的位置调用组件
<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

setting.json

{ "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 } }

文档 Doc

Wiki

维护者 Maintainer

XK-Editor 由 Otstar Lin和下列贡献者的帮助下撰写和维护。

Otstar Lin - Personal Website · Blog · Github

许可证 License

lincense

根据 Apache License 2.0 许可证开源。

渲染 Render

xkeditor01.png
xkeditor02.png