XK-Editor现已可从NPM安装。

前言

这个项目原本是为了升级 XK-Note 而创造的,后来因为功能的不断完善,逐渐的改成了可复用的组件。XK-Note原本是使用Editor.md的编辑器,使用起来也很不错,但是总有一些不如意的地方,于是便打算自己造个编辑器。

XK-Editor基于Vue是因为双向绑定这个特性,同时也是模板语法,便于开发,之所以采用ACE编辑器其实是当时觉得CodeMirror太丑了,实际开发中ACE实在太难弄了,文档跟不存在一样,只能阅读源码来实现一些不常见的功能,同时也修补了Editor.md中一些不如意的地方,比如没有打字机模式,每次写到屏幕下方的时候总是要重新滚动,代码高亮不够漂亮,没有自动补全等等。。。又引入了Tiny MCE使得编辑器拥有了富文本编辑的功能。

简介 Introduction

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

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

特性 Feature

  • [两种编辑器] 支持富文本编辑和Markdown编辑
  • [两种格式互转] 支持Markdown和HTML互转
  • [打字机模式] 支持打字机模式,编辑时无需使用鼠标滚轮,并可调节定位位置,满足各种屏幕和使用者的需求
  • [下载] 支持导出下载Markdown和HTML格式的文件
  • [即时保存] 支持即时保存到浏览器,无惧网络波动
  • [移动端优化] 优化移动端的编辑体验,支持惯性滚动,并默认关闭实时预览
  • [滚动绑定] 支持双向/单向滚动绑定,使预览能够跟随输入
  • [树形TOC] 目录可折叠,不用再翻阅很久来定位
  • [自定义主题] 支持自定义主题,可以通过替换CSS来更换显示样式
  • [Emoji表情] 支持Github语法的表情:smile:
  • [Task lists] 支持创建Task列表
  • [TeX公式] 支持插入KaTex公式
  • [流程图/时序图/甘特图] 支持mermaid语法编写各种图
  • [解析HTML] 支持解析各种HTML标签,并支持过滤标签
  • [独有的扩展语法] 支持通过[text]{style|label}的方式解析文字
  • [自动补全] 支持语法自动补全
  • [图片上传] 支持图片上传
  • 还有多种神奇的功能等待你的发掘。

演示 Demo

XK-Editor

安装 Install

从 NPM 安装

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

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

从本项目上构建

  • 首先clone本项目,或者前往Releases下载本项目并解压
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
  • 将项目文件夹下的文件复制到网站目录即可

组件方式使用

  • 首先clone本项目,或者前往Releases下载本项目并解压
git clone https://github.com/syfxlin/xkeditor.git
  • 进入项目文件夹
cd xkeditor
  • static文件夹下的所有文件复制到Vue项目下的static文件夹下
  • src/utilssrc/components下的所有问文件复制到Vue项目下的src/utilssrc/components文件夹下
  • 导入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)
//或者您也可以使用 settingProps和contentProps 直接将数据传入组件

所需依赖

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":false
    }
}

文档 Doc

Wiki

Github

求 star = ̄ω ̄=

维护者 Maintainer

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

Otstar Lin – Personal Website · Blog · Github

许可证 License

lincense

根据 Apache License 2.0 许可证开源。

渲染 Render

xkeditor01.png
xkeditor02.png

结语

首先感谢你能看到最后,同时感谢你对该项目的兴趣。 该项目虽然不大,大部分核心的部件也是使用现成的组件,但是对我来说也是一次良好的经验,也是我第一个完整的前端项目,所以难免会有Bug,若您在使用遇到了问题,请及时联系我进行修复,或者到Github上提交issue,我会尽快的处理,另外若您有其他好的建议或者有希望增加的功能,请联系我进行添加或者提交Pull Request。

Coding最大的乐趣,不在Coding,而在Creating。 — Otstar Lin

说点什么
本博客评论规则(评论规则什么的都是浮云,小声
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...