How to implement Document list in ckeditor5-vue 2.0.1

Uraharadono commented 1 year ago

So what I need basically is a way or some insight on how to achieve Document List instead of regular lists. https://ckeditor.com/docs/ckeditor5/latest/features/lists/document-lists.html#list-styles

My package.json file is:

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-adapter-ckfinder": "^29.1.0",
    "@ckeditor/ckeditor5-alignment": "^29.1.0",
    "@ckeditor/ckeditor5-autoformat": "^29.1.0",
    "@ckeditor/ckeditor5-basic-styles": "^29.1.0",
    "@ckeditor/ckeditor5-block-quote": "^29.1.0",
    "@ckeditor/ckeditor5-cloud-services": "^29.1.0",
    "@ckeditor/ckeditor5-dev-utils": "^25.3.0",
    "@ckeditor/ckeditor5-dev-webpack-plugin": "^25.3.0",
    "@ckeditor/ckeditor5-editor-classic": "^29.1.0",
    "@ckeditor/ckeditor5-essentials": "^29.1.0",
    "@ckeditor/ckeditor5-font": "^29.1.0",
    "@ckeditor/ckeditor5-heading": "^29.1.0",
    "@ckeditor/ckeditor5-image": "^29.1.0",
    "@ckeditor/ckeditor5-indent": "^29.1.0",
    "@ckeditor/ckeditor5-link": "^29.1.0",
    "@ckeditor/ckeditor5-list": "^29.1.0",
    "@ckeditor/ckeditor5-media-embed": "^29.1.0",
    "@ckeditor/ckeditor5-mention": "^29.1.0",
    "@ckeditor/ckeditor5-paragraph": "^29.1.0",
    "@ckeditor/ckeditor5-paste-from-office": "^29.1.0",
    "@ckeditor/ckeditor5-table": "^29.1.0",
    "@ckeditor/ckeditor5-theme-lark": "^29.1.0",
    "@ckeditor/ckeditor5-typing": "^29.1.0",
    "@ckeditor/ckeditor5-upload": "^29.1.0",
    "@ckeditor/ckeditor5-vue": "^2.0.1",
    "@quasar/extras": "^1.0.0",
    "axios": "^0.20.0-0",
    "bootstrap": "^5.0.2",
    "chart.js": "^3.8.0",
    "core-js": "^3.7.0",
    "joi": "^17.4.1",
    "moment": "^2.29.1",
    "postcss-loader": "^3.0.0",
    "quasar": "^2.0.0",
    "raw-loader": "^4.0.2",
    "vue": "^3.0.2",
    "vue-chartjs": "^4.1.1",
    "vue-loader-v16": "npm:vue-loader@^16.0.0-alpha.3",
    "vue-router": "^4.0.0-rc.5",
    "vue-snip": "^1.2.0",
    "vue3-burger-menu": "^1.1.1",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.9",
    "@vue/cli-plugin-eslint": "^4.5.9",
    "@vue/cli-service": "^4.5.9",
    "@vue/compiler-sfc": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^7.1.0",
    "postcss-rtl": "^1.2.3",
    "sass": "^1.35.2",
    "sass-loader": "^10.2.0",
    "vue-cli-plugin-quasar": "~4.0.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
  },
}

Using the regular lists works just fine e.g. import ListPlugin from "@ckeditor/ckeditor5-list/src/list.js";

I tried to use DocumentListPropertieslike so: import DocumentListProperties from '@ckeditor/ckeditor5-list/src/documentlistproperties';

It should automatically override default list, because documentation says: The DocumentListProperties feature overrides UI button implementations from the ListUI.

It does not work because this feature was implemented in recent releases (ones after ckeditor-vue 2) probably. I mean in the folder: ../\node_modules\@ckeditor\ckeditor5-list\srcthere is no file documentlistproperties.js

I tried:

Upping version of ckeditor5-vueto 4 and ckeditor5 componentsto latest 35 at the moment, but my build is failing as the cli version of my app is not big enough and it does not use webpack 5.
Leaving everything as is shown in the package.json up in this text, but increasing the @ckeditor/ckeditor5-list": to "^35.0.0", which gave me a lot of "ckeditor duplicate" errors.

Does anyone know how can I make this work ?

mabryl commented 1 year ago

Hi @Uraharadono,

Thanks for reaching out. I'm not sure whether this solution will be acceptable for you, but I was able to implement document lists with a Vue2 application by using an editor created with our Online Builder. Just remember to remove the regular Lists plugin from the default configuration and add Document lists instead. A guide on how to include an editor built with the online builder in your Vue app can be found here.

If using our online builder is not a viable option for you, could you tell me whether you're using one of our predefined official builds in your app, or did you build our editor from source? I'll try recreating your environment on my end and see if I can come up with anything.

As a side note, the ckeditor duplicate errors stem from the fact that plugin versions must match the version of the base editor package. You can learn more about this behavior here.

Hope you find this useful and I'm looking forward to your reply.

CKEditorBot commented 11 months ago

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

CKEditorBot commented 10 months ago

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

ckeditor / ckeditor5

How to implement Document list in ckeditor5-vue 2.0.1 #12832