最近在項目中需要用到富文本編輯器，據(jù)說ck-editor5很不錯，于是就使用它了，不過在期間也遇到了很多問題，這里記錄下。

一、引入ck-editor5

文檔地址：Predefined builds - CKEditor 5 Documentation

這里有個坑，我最初是根據(jù)文檔執(zhí)行下面的npm命令下載的，最后搗騰了半天發(fā)現(xiàn)里面功能不全，就是一個簡單版本的ck-editor

所以不推薦使用

npm install --save @ckeditor/ckeditor5-build-classic

推薦引入方式：

?自定義配置自己所需要的功能生成build文件然后在項目中引入

自定義配置地址：CKEditor 5 Online Builder | Create your own editor in 5 steps

1. 選擇一個自己喜歡的風格 - 這里我選擇第一個?

2.?添加自己所需要的功能 - 部分功能可能收費 - 選擇免費的就可以（標簽上帶圖標的收費 - 猜測）

3.? 調(diào)整工具欄的位置 - 就算這里位置調(diào)錯也沒事，之后也可以在代碼中修改

?4. 選擇一種語言 進行下一步

?5. 最后開始生成代碼文件就自定義完成了

?6. 最后下載生成的文件

?二、在項目中引入ck-editor5

下載出來的文件中build是剛剛配置完成后打包后的文件

如果需要重新調(diào)整工具欄的位置 - 只需要改變這邊代碼的順序然后執(zhí)行npm命令

npm install? npm run build 就能重新生成一個新的build文件

將下載下來文件中的build文件放到自己的項目中

?三、在項目中使用

1. 如果添加了上傳圖片的功能則需要寫一個上傳文件的類（這里是也是百度了許久得出的答案）

?創(chuàng)建一個 UploadAdapter.js 文件，代碼如下：

/**
 * 配合ckeditor編輯器的上傳類
 * */
export default class UploadAdapter {
    // 加載器
    #loader;
    // 上傳的地址
    #uploadFileUrl = "";

    /** 構(gòu)造方法 */
    constructor(loader) {
        this.loader = loader;
    }

    /** 上傳方法 */
    upload() {
        this.loader.file.then(res => {
            console.log(res)
        });
    }

    /** 中止上傳過程方法 */
    abort() {}
}

?2. 最后一步，使用，直接上代碼

我這里是用vue3的，這里獲取到的editor對象不能與reactive和ref有關(guān)聯(lián)，單獨放在外面就好，不需要響應(yīng)式！

<template>
	<div>
		<div id="ck-editor"></div>

		<button @click="handleClick">獲取內(nèi)容</button>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, toRaw } from 'vue';
import UploadAdapter from './UploadAdapter.js';

export default defineComponent({
	setup() {
		const state = reactive({});
		let editor: any = null;

		onMounted(() => {
			(window as any).ClassicEditor.create(document.getElementById("ck-editor")).then((_editor: any ) => {
				_editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => {
					return new UploadAdapter(loader);
				};

				editor = _editor;
			})
		})

		const handleClick = () => {
			console.log(editor.data.get())
		}

		return {
			...toRefs(state),
			handleClick,
		}
    }
});
</script>

四、最后執(zhí)行代碼? - 點擊按鈕后就能拿到想要的數(shù)據(jù)了??

文章來源地址http://www.zghlxwxcb.cn/news/detail-809667.html

到了這里，關(guān)于富文本編輯器 ck-editor5 的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！