ckeditor/ckeditor5-vue

Bug Report: Strikethrough Not Showing on Vue 3 with CKEditor

Opened this issue · 0 comments

guaregua19 commented

Description:

When using CKEditor with Vue 3, the strikethrough option is not displaying correctly. Despite being included in the toolbar configuration, the strikethrough button does not appear, and the functionality is not available in the editor.

Steps to Reproduce:

  1. Create a new Vue 3 project with Vite and Tailwind CSS.
  2. Install CKEditor and the necessary plugins.
  3. Register CKEditor globally
  4. Configure CKEditor in a Vue component with the strikethrough option included in the toolbar.
  5. Render the component and observe the toolbar options.

Expected Behavior:

The strikethrough button should be visible in the toolbar, and the strikethrough functionality should be available for text formatting.

Actual Behavior:

The strikethrough button is not visible in the toolbar, and the strikethrough functionality is unavailable.

Code Snippet:

Vue Component Template:

<template>
  <div
    class="m-0 w-full max-w-[100%] p-0"
    :class="{
      'hover:cursor-text': !isReadonly,
      'hover:cursor-not-allowed': isReadonly,
    }"
  >
    <ckeditor
      :editor="editor"
      v-model="inputValue"
      :config="editorConfig"
      :disabled="isReadonly"
      :placeholder="isReadonly ? '' : 'Write a message...'"
      @ready="onEditorReady"
      class="w-full"
    ></ckeditor>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from "vue";
import { useChatStore } from "@/app/stores/chat.store";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const inputValue = ref("");
const chatStore = useChatStore();
let lastCursorPosition = null;

defineProps({
  isReadonly: {
    type: Boolean,
    default: false,
  },
});

const editorConfig = ref( {
  minHeight: "200px",
  maxHeight: "200px",
  toolbar: [
    "bold",
    "italic",
    "|",
    "link",
    "|",
    "strikethrough",
    "numberedList",
    "bulletedList",
  ],
  placeholder: "Write a message...",
  link: {
    decorators: {
      addTargetToExternalLinks: {
        mode: "automatic",
        callback: (url) => /^(https?:)?\/\//.test(url),
        attributes: {
          target: "_blank",
          rel: "noopener noreferrer",
        },
      },
    },
  },
})

const editor = ref(ClassicEditor as any);
const cseditorInstance = ref(null as any);
.... Rest of my code

Package.json

{
  "name": "template-vite-vue-ts-tailwind-v3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "test": "vitest --dom",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "check-circular-deps": "madge --circular --extensions ts,tsx,js,jsx src/"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^41.3.1",
    "@ckeditor/ckeditor5-editor-classic": "^41.3.1",
    "@ckeditor/ckeditor5-vue": "^5.1.0",
    "vue": "^3.2.25",
    "vite": "^2.7.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "typescript": "^4.9.5",
    "vue-tsc": "^1.2.0"
  }
}

Visual Proof

image