Vue + CKEditor：初级使用指南

Nephilim 2024-05-02

Tips：一些记录，一些笔记

2024/05/02

THURSDAY

「林宥嘉」在「说谎」中唱到：

别说我说谎，人生已经如此的艰难

有些事情就不要拆穿

我没有说谎，是爱情说谎

它带你来，骗我说，渴望的有可能有希望

Vue「项目准备」

先看看「Node 与 NPM」的版本信息：

(base) adamhuan@Leviathan PycharmProjects % node -v
v21.7.1
(base) adamhuan@Leviathan PycharmProjects % npm -v
10.5.0
(base) adamhuan@Leviathan PycharmProjects % pnpm -v
8.15.4
(base) adamhuan@Leviathan PycharmProjects %

通过「pnpm」创建我们的Vue项目：

(base) adamhuan@Leviathan PycharmProjects % pnpm list | grep vite --color
@arco-plugins/vite-vue 1.4.5
vite 5.2.10
@storybook/vue3-vite 8.0.9
(base) adamhuan@Leviathan PycharmProjects % 
(base) adamhuan@Leviathan PycharmProjects % pnpm create vite@latest
Library/pnpm/store/v3/tmp/dlx-86213      |   +1 +
Library/pnpm/store/v3/tmp/dlx-86213      | Progress: resolved 1, reused 1, downloaded 0, added 1, done
✔ Project name: … vuejs-ckeditor
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript


Scaffolding project in Users/adamhuan/PycharmProjects/vuejs-ckeditor...


Done. Now run:


  cd vuejs-ckeditor
  pnpm install
  pnpm run dev


(base) adamhuan@Leviathan PycharmProjects % 
(base) adamhuan@Leviathan PycharmProjects % cd vuejs-ckeditor 
(base) adamhuan@Leviathan vuejs-ckeditor % ls -ltr
total 32
-rw-r--r--  1 adamhuan  staff  440  5  2 11:54 README.md
-rw-r--r--  1 adamhuan  staff  357  5  2 11:54 index.html
drwxr-xr-x  3 adamhuan  staff   96  5  2 11:54 public
drwxr-xr-x  7 adamhuan  staff  224  5  2 11:54 src
-rw-r--r--  1 adamhuan  staff  157  5  2 11:54 vite.config.js
-rw-r--r--  1 adamhuan  staff  319  5  2 11:54 package.json
(base) adamhuan@Leviathan vuejs-ckeditor %

通过「pnpm」安装依赖：

(base) adamhuan@Leviathan vuejs-ckeditor % pwd
/Users/adamhuan/PycharmProjects/vuejs-ckeditor
(base) adamhuan@Leviathan vuejs-ckeditor % 
(base) adamhuan@Leviathan vuejs-ckeditor % ls -ltr
total 32
-rw-r--r--  1 adamhuan  staff  440  5  2 11:54 README.md
-rw-r--r--  1 adamhuan  staff  357  5  2 11:54 index.html
drwxr-xr-x  3 adamhuan  staff   96  5  2 11:54 public
drwxr-xr-x  7 adamhuan  staff  224  5  2 11:54 src
-rw-r--r--  1 adamhuan  staff  157  5  2 11:54 vite.config.js
-rw-r--r--  1 adamhuan  staff  319  5  2 11:54 package.json
(base) adamhuan@Leviathan vuejs-ckeditor % 
(base) adamhuan@Leviathan vuejs-ckeditor % pnpm install
Packages: +32
++++++++++++++++++++++++++++++++
Progress: resolved 69, reused 32, downloaded 0, added 32, done


dependencies:
+ vue 3.4.26


devDependencies:
+ @vitejs/plugin-vue 5.0.4
+ vite 5.2.10


Done in 2.1s
(base) adamhuan@Leviathan vuejs-ckeditor % 
(base) adamhuan@Leviathan vuejs-ckeditor % ls -ltr
total 88
-rw-r--r--  1 adamhuan  staff    440  5  2 11:54 README.md
-rw-r--r--  1 adamhuan  staff    357  5  2 11:54 index.html
drwxr-xr-x  3 adamhuan  staff     96  5  2 11:54 public
drwxr-xr-x  7 adamhuan  staff    224  5  2 11:54 src
-rw-r--r--  1 adamhuan  staff    157  5  2 11:54 vite.config.js
-rw-r--r--  1 adamhuan  staff    319  5  2 11:54 package.json
-rw-r--r--  1 adamhuan  staff  26510  5  2 11:55 pnpm-lock.yaml
drwxr-xr-x  8 adamhuan  staff    256  5  2 11:55 node_modules
(base) adamhuan@Leviathan vuejs-ckeditor %

可以看到，多了一个目录「node_modules」

运行项目：

(base) adamhuan@Leviathan vuejs-ckeditor % pnpm run dev


> vuejs-ckeditor@0.0.0 dev Users/adamhuan/PycharmProjects/vuejs-ckeditor
> vite




  VITE v5.2.10  ready in 193 ms


  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

可以看到，项目被成功的运行在了「http://localhost:5173/」

让我们通过浏览器访问这个路径：

当看到了这个画面，说明Vue项目创建成功。

「VS Code」打开项目

CKEditor

官方网站：

https://ckeditor.com/

官方文档：

https://ckeditor.com/docs/index.html

官方Github：

https://github.com/ckeditor

如上图所示，CKEditor的编辑器有以下五种展示类型：

Classic
Inline
Balloon
Balloon block
Decoupled document

CKEditor对Vue做了开箱即用的封装；

但是对于上面五种编辑器的类型来说，引入的方式除了「Decoupled document」略有不同，其他的四种基本上一样。

下面会分别说明并给出完整可用的代码样例展示。

Classic Inline Balloon Balloon block

首先，通过「pnpm」安装依赖：

(base) adamhuan@Leviathan vuejs-ckeditor % pwd
/Users/adamhuan/PycharmProjects/vuejs-ckeditor
(base) adamhuan@Leviathan vuejs-ckeditor % 
(base) adamhuan@Leviathan vuejs-ckeditor % ls -ltr
total 88
-rw-r--r--  1 adamhuan  staff    440  5  2 11:54 README.md
-rw-r--r--  1 adamhuan  staff    357  5  2 11:54 index.html
drwxr-xr-x  3 adamhuan  staff     96  5  2 11:54 public
drwxr-xr-x  7 adamhuan  staff    224  5  2 11:54 src
-rw-r--r--  1 adamhuan  staff    157  5  2 11:54 vite.config.js
-rw-r--r--  1 adamhuan  staff    319  5  2 11:54 package.json
-rw-r--r--  1 adamhuan  staff  26510  5  2 11:55 pnpm-lock.yaml
drwxr-xr-x  9 adamhuan  staff    288  5  2 11:56 node_modules
(base) adamhuan@Leviathan vuejs-ckeditor % 
(base) adamhuan@Leviathan vuejs-ckeditor % pnpm install --save @ckeditor/ckeditor5-build-classic
Packages: +39
+++++++++++++++++++++++++++++++++++++++
Progress: resolved 108, reused 69, downloaded 2, added 39, done


dependencies:
+ @ckeditor/ckeditor5-build-classic 41.3.1


Done in 2.4s
(base) adamhuan@Leviathan vuejs-ckeditor % pnpm install --save @ckeditor/ckeditor5-build-inline 
Packages: +2
++
Progress: resolved 110, reused 71, downloaded 2, added 2, done


dependencies:
+ @ckeditor/ckeditor5-build-inline 41.3.1


Done in 2.2s
(base) adamhuan@Leviathan vuejs-ckeditor %
(base) adamhuan@Leviathan vuejs-ckeditor % pnpm install --save @ckeditor/ckeditor5-build-balloon
Packages: +2
++
Progress: resolved 112, reused 73, downloaded 2, added 2, done


dependencies:
+ @ckeditor/ckeditor5-build-balloon 41.3.1


Done in 2s
(base) adamhuan@Leviathan vuejs-ckeditor % pnpm install --save @ckeditor/ckeditor5-build-balloon-block
Packages: +1
+
Progress: resolved 113, reused 75, downloaded 1, added 1, done


dependencies:
+ @ckeditor/ckeditor5-build-balloon-block 41.3.1


Done in 2s
(base) adamhuan@Leviathan vuejs-ckeditor %
(base) adamhuan@Leviathan vuejs-ckeditor % pnpm install --save @ckeditor/ckeditor5-vue
Packages: +1
+
Progress: resolved 116, reused 78, downloaded 1, added 1, done
node_modules/.pnpm/@ckeditor+ckeditor5-vue@5.1.0/node_modules/@ckeditor/ckeditor5-vue: Running postinstall script, done in 37ms


dependencies:
+ @ckeditor/ckeditor5-vue 5.1.0


 WARN  Issues with peer dependencies found
.
└─┬ vue-class-component 7.2.6
  └── ✕ unmet peer vue@^2.0.0: found 3.4.26


Done in 1s
(base) adamhuan@Leviathan vuejs-ckeditor %

安装完成后，看看我们的项目，现在安装了哪些软件依赖：

(base) adamhuan@Leviathan vuejs-ckeditor % pnpm list
Legend: production dependency, optional only, dev only


vuejs-ckeditor@0.0.0 Users/adamhuan/PycharmProjects/vuejs-ckeditor (PRIVATE)


dependencies:
@ckeditor/ckeditor5-build-balloon 41.3.1
@ckeditor/ckeditor5-build-balloon-block 41.3.1
@ckeditor/ckeditor5-build-classic 41.3.1
@ckeditor/ckeditor5-build-inline 41.3.1
@ckeditor/ckeditor5-vue 5.1.0
vue 3.4.26
vue-property-decorator 9.1.2


devDependencies:
@vitejs/plugin-vue 5.0.4
vite 5.2.10
(base) adamhuan@Leviathan vuejs-ckeditor %

修改「src/main.js」中的配置：

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'


import CKEditor from '@ckeditor/ckeditor5-vue'


const app = createApp(App)


app.use(CKEditor)


app.mount('#app')

为了方便，后面的页面创建我们直接修改「src/App.vue」

每次修改前对之前的成功版本做出备份

先对原版的「App.vue」做备份：

(base) adamhuan@Leviathan vuejs-ckeditor % pwd  
/Users/adamhuan/PycharmProjects/vuejs-ckeditor
(base) adamhuan@Leviathan vuejs-ckeditor % 
(base) adamhuan@Leviathan vuejs-ckeditor % ls -ltr
total 128
-rw-r--r--   1 adamhuan  staff    440  5  2 11:54 README.md
-rw-r--r--   1 adamhuan  staff    357  5  2 11:54 index.html
drwxr-xr-x   3 adamhuan  staff     96  5  2 11:54 public
drwxr-xr-x   7 adamhuan  staff    224  5  2 11:54 src
-rw-r--r--   1 adamhuan  staff    157  5  2 11:54 vite.config.js
-rw-r--r--   1 adamhuan  staff  46648  5  2 12:16 pnpm-lock.yaml
drwxr-xr-x  10 adamhuan  staff    320  5  2 12:16 node_modules
-rw-r--r--   1 adamhuan  staff    532  5  2 12:16 package.json
(base) adamhuan@Leviathan vuejs-ckeditor % 
(base) adamhuan@Leviathan vuejs-ckeditor % cd src 
(base) adamhuan@Leviathan src % ls -ltr
total 24
-rw-r--r--  1 adamhuan  staff   638  5  2 11:54 App.vue
drwxr-xr-x  3 adamhuan  staff    96  5  2 11:54 assets
drwxr-xr-x  3 adamhuan  staff    96  5  2 11:54 components
-rw-r--r--  1 adamhuan  staff   111  5  2 11:54 main.js
-rw-r--r--  1 adamhuan  staff  1276  5  2 11:54 style.css
(base) adamhuan@Leviathan src % 
(base) adamhuan@Leviathan src % cp App.vue App.vue_origin_20240502
(base) adamhuan@Leviathan src % 
(base) adamhuan@Leviathan src % ls -ltr
total 32
-rw-r--r--  1 adamhuan  staff   638  5  2 11:54 App.vue
drwxr-xr-x  3 adamhuan  staff    96  5  2 11:54 assets
drwxr-xr-x  3 adamhuan  staff    96  5  2 11:54 components
-rw-r--r--  1 adamhuan  staff   111  5  2 11:54 main.js
-rw-r--r--  1 adamhuan  staff  1276  5  2 11:54 style.css
-rw-r--r--  1 adamhuan  staff   638  5  2 12:19 App.vue_origin_20240502
(base) adamhuan@Leviathan src %

备份完成。

开始创建我们的前端页面。

先以「Classic Editor」模式为例，其他的三个类型「Inline Balloon Balloon block」也是类似的。

文件「src/App.vue」

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


<script>
  import ClassicEditor from "@ckeditor/ckeditor5-build-classic";


  export default {
    name: 'app',
    data() {
      return {
        editor: ClassicEditor,
        editorData: "<p>Content of the editor</p>",
        editorConfig: {
          // 编辑器的配置
        },
      };
    }
  }
</script>

来看看前台页面的效果：

来向里面写一点东西：

这只是一个最简单的样例，更多的CKEditor的API可以查阅官方文档：

https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/vuejs-v3.html

Decoupled Document

修改App.vue：

<template>
  <div id="app">
      <ckeditor :editor="editor" @ready="onReady" ></ckeditor>
  </div>
</template>


<script>
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';


export default {
  name: 'app',
  data() {
      return {
          editor: DecoupledEditor,


          // ...
      };
  },
  methods: {
      onReady( editor )  {
          // Insert the toolbar before the editable area.
          editor.ui.getEditableElement().parentElement.insertBefore(
              editor.ui.view.toolbar.element,
              editor.ui.getEditableElement()
          );
      }
  }
}
</script>

页面效果：

END

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。

vue ckeditor

文章转载自Nephilim，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Vue + CKEditor：初级使用指南

评论