ckeditor5 外掛安裝與使用記錄

阿新 • • 發佈：2021-12-01

ckeditor5外掛編譯與釋出
vue2中使用自定義的ckeditor

ckeditor5外掛編譯與釋出

1.線上配置頁面

首先到：https://ckeditor.com/ckeditor-5/online-builder/配置外掛，該頁面可以幫助使用者線上配置外掛。本文以classic經典模式為例。

2.勾選外掛

本文未勾選標記了

的收費外掛。

未勾選這幾個會報錯的外掛(Watchdog、Mention、Source editing、Text part language、To-do list)

未勾選這幾個用不到的外掛(Text transformation、Markdown、Title)。

其他全都勾選了。

3.下載原始檔

點選start之後會生成一個打包好的專案檔案。下載到本地解壓。

4.編譯外掛

切換到解壓好的目錄下執行下面命令

#安裝依賴包並編譯
npm install && npm run build

5.準備釋出

步驟4執行完成後將目錄下的build資料夾以及package.json拷貝到一個新的資料夾下

6.npmjs官網建立賬號

去npmjs官網建立賬號，注意建立完成賬號之後一定要記得在郵箱裡進行啟用，否則後面會無法釋出npm包，會一直提示403錯誤。

建立完成賬號後切換到Profile可以看到當前沒有任何包。

7.登入npm

切換到 [步驟5](# 5.準備釋出) 建立的目錄下。

執行命令

#切換到官方源
npm config set registry https://registry.npmjs.org

執行命令npm login登入npm

#登入npm
npm login

發現執行npm login命令報錯 npm ERR! Unexpected end of JSON input while parsing near ''。原因可能是我之前把npm的使用者配置檔案搞壞了。

執行命令

#檢視npm配置資訊
npm config ls -l

找到.npmrc檔案路徑並刪除該檔案

重新執行命令，登入成功

#切換到官方源
npm config set registry https://registry.npmjs.org
#登入npm
npm login

8.釋出到npm

執行命令

#釋出專案
npm publish

報錯了

npm ERR! code EPRIVATE
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.

原因是因為package.json裡面name重複，現在我們將name修改為 ckeditor5-cdyf，版本號修改為 1.0.1，private設定為false

重新執行釋出命令，釋出成功

#釋出專案
npm publish

vue2中使用自定義的ckeditor

1.建立vue2專案

2.修改配置檔案並安裝依賴

package.json配置如下

{
  "name": "cexeditor",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-vue2": "^1.0.5",
    "ckeditor5-cdyf": "^1.0.1",
    "core-js": "^3.6.5",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "vue-template-compiler": "^2.6.11"
  }
}

執行命令

#安裝依賴包
npm install

3.修改main.js

main.js增加下面兩句程式碼

import CKEditor from "@ckeditor/ckeditor5-vue2";
Vue.use(CKEditor);

4.使用ckeditor

<template>
  <div id="divcontent">
    <div id="divleft">
      <ckeditor
        :editor="editor"
        v-model="editorData"
        :config="editorConfig"
      ></ckeditor>
    </div>
    <div id="divright">
      {{ editorData }}
    </div>
  </div>
</template>

<script>
import ClassicEditor from "ckeditor5-cdyf";

export default {
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Content of the editor.</p>",
      editorConfig: {
        language: "zh-cn",
      },
    };
  },
};
</script>
<style lang="scss" scoped>
#divcontent {
  display: flex;
}
#divleft {
  width: 50%;
}
#divright {
  margin-left: 20px;
  width: 40%;
}
::v-deep .ck-editor__editable_inline {
  height: 800px !important;
}
</style>