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>
5.運行
