使用jihua制定的cekditor5富文本框编译器

第一步

打开你的Vue3项目 终端输入

然后就会看到你的package.json里多出一个

"dependencies": {
    "@jihua/ckeditor5-jihua": "^0.0.3",  // 在这里
    "axios": "^1.4.0",
    "crypto-js": "^4.1.1",
    "echarts": "^5.4.1",
    "element-plus": "^2.3.7",
    "pinia": "^2.1.3",
    "vue": "^3.3.4",
    "vue-router": "^4.2.2"
},

 的包，然后在你的项目根目录新建一个名字为ckeditor5-jihua.d.ts的文件 里面的内容为

declare module '@jihua/ckeditor5-jihua';

然后在你的tsconfig.json里添加声明

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ],
  //配置别名路径可以在写代码时联想提示路径
  "compilerOptions" : {
    "baseUrl" : "./",
    "paths" : {
      "@/*":["src/*"]
    },
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom", "ES6"],
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "removeComments": true
  },                                                          // 这里
  "include": ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts","ckeditor5-jihua.d.ts"],
  "exclude": ["node_modules"]
}

然后这个时候就差不多了！然后就在你的项目组件中开始使用吧！

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

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from 'vue';
import { Editor } from '@jihua/ckeditor5-jihua'
console.log(Editor);
let editorInstance: any;

onBeforeUnmount(() => {
  editorInstance.then((editor: { destroy: () => Promise<any>; }) => {
    editor.destroy().catch((error: any) => {
      console.error(error);
    });
  });
});

onMounted(() => {
  Editor.create(document.querySelector('#editor') as HTMLElement, {
    // 配置项
  }).then(editor => {
    editorInstance = Promise.resolve(editor);
  }).catch(error => {
    console.error(error);
  });
});
</script>

<style scoped>
#editor {
  min-height: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}
</style>

更多配置项请阅读官方文档 ，请访问 https://ckeditor.com/docs/ckeditor5/latest/framework/plugins/creating-simple-plugin-timestamp.html 浏览更多

或者！！！

<template>
  <div id="EditorArea">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Editor } from '@jihua/ckeditor5-jihua';

const editor = Editor
const editorData = ref('<p>Content of the editor.</p>')
const editorConfig = reactive({
  // The configuration of the editor.
})
</script>



<style scoped>
#editor {
  height: calc(100vh - 70px);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}
</style>

 可以正常使用