Skip to content
This repository has been archived by the owner on Jan 3, 2022. It is now read-only.

开始使用

Jump to bottom
Otstar Lin edited this page May 11, 2019 · 3 revisions

环境支持

XK Editor在以下环境测试通过

  • npm: v6.9.0
  • yarn: v1.15.2
  • node: v12.0.0
  • System: Ubuntu18.04
  • Docker: 18.09.5 | node:latest

安装

从 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/utils和src/components下的所有问文件复制到Vue项目下的src/utils和src/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
Clone this wiki locally