editor tools css broken

0 Answers 178 Views
Editor Styling / Themes
Kenji
Top achievements
Rank 1
Iron
Iron
Kenji asked on 02 Feb 2023, 04:14 AM

Hi i want to ask about editor in native component like in this demo Link
so i have 2 problem so far when implementing editor.
first question is when i set value in v-model and load page, i can get value after load finish but i cant type anything in editor
this is my setup code :

<Editor
                  ref="editor"
                  :tools="tools"
                  @blur="saveResumePI('draft');setValueEditor()"
                  v-model="candData.mem_about_me"
              />

second question is that popup tools css like insert image or insert code looks broken when i open it
i upload screenshot for your reference about my second question

you can ask more detail if my question is confusing
thanks

 
Petar
Telerik team
commented on 02 Feb 2023, 03:42 PM

Hi, Kenji. 

Can you please share the versions of the Native Editor and the Kendo Theme that you use in your project? Also do you use Vue 2 or Vue 3? 

Kenji
Top achievements
Rank 1
Iron
Iron
commented on 03 Feb 2023, 01:01 AM

Hi Petar,

installed list in package.json

"vue": "^2.6.14",
"@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.1",
    "@progress/kendo-dropdowntree-vue-wrapper": "^2022.3.913",
    "@progress/kendo-grid-vue-wrapper": "^2022.3.913",
    "@progress/kendo-licensing": "^1.2.2",
    "@progress/kendo-svg-icons": "^1.1.1",
    "@progress/kendo-theme-bootstrap": "^5.12.0",
    "@progress/kendo-ui": "^2022.3.913",
    "@progress/kendo-vue-animation": "^3.7.3",
    "@progress/kendo-vue-common": "^3.7.3",
    "@progress/kendo-vue-data-tools": "^3.7.1",
    "@progress/kendo-vue-dateinputs": "^3.7.1",
    "@progress/kendo-vue-dialogs": "^3.7.1",
    "@progress/kendo-vue-dropdowns": "^3.7.1",
    "@progress/kendo-vue-editor": "^3.8.0",
    "@progress/kendo-vue-form": "^3.8.0",
    "@progress/kendo-vue-grid": "^3.7.1",
    "@progress/kendo-vue-indicators": "^3.6.4",
    "@progress/kendo-vue-inputs": "^3.7.1",
    "@progress/kendo-vue-intl": "^3.7.1",
    "@progress/kendo-vue-layout": "^3.7.3",
    "@progress/kendo-vue-pdf": "^3.8.0",
    "@progress/kendo-vue-progressbars": "^3.7.3",
    "@progress/kendo-vue-upload": "^3.7.3",

Petar
Telerik team
commented on 07 Feb 2023, 08:58 AM

Hi, Kenji.

Thank you for the shared package.json definition. Based on it, I could say that updating the version of the Kendo Bootstrap Theme should resolve the issue. 

With the shared definition, once the packages with version ^3.x.x are installed, the version of the Kendo UI for Vue Native packages that will be installed is 3.8.3(the current latest version). On its side, the 3.8.3 version of the Native packages require version 6.x.x of the Kendo UI for Vue Theme loaded to your project. In the current scenario, the latest version of the Kendo Bootstrap Theme is 6.1.0.

To summarize the above, what I can recommend is to:

  1. Update the version of the @progress/kendo-theme-bootstrap package to ^6.1.0
  2. Update the version of the following packages to ^3.8.3
       "@progress/kendo-vue-animation": "^3.7.3",
        "@progress/kendo-vue-common": "^3.7.3",
        "@progress/kendo-vue-data-tools": "^3.7.1",
        "@progress/kendo-vue-dateinputs": "^3.7.1",
        "@progress/kendo-vue-dialogs": "^3.7.1",
        "@progress/kendo-vue-dropdowns": "^3.7.1",
        "@progress/kendo-vue-editor": "^3.8.0",
        "@progress/kendo-vue-form": "^3.8.0",
        "@progress/kendo-vue-grid": "^3.7.1",
        "@progress/kendo-vue-indicators": "^3.6.4",
        "@progress/kendo-vue-inputs": "^3.7.1",
        "@progress/kendo-vue-intl": "^3.7.1",
        "@progress/kendo-vue-layout": "^3.7.3",
        "@progress/kendo-vue-pdf": "^3.8.0",
        "@progress/kendo-vue-progressbars": "^3.7.3",
        "@progress/kendo-vue-upload": "^3.7.3",

After applying the above changes, delete the package-lock.json file of your project,  run "npm install" to re-install the packages, and test again the Kendo UI for Vue Native Editor. 

Please try the above suggestions and let me know if you need furhter assistance with the implementation of your scenario. 

Kenji
Top achievements
Rank 1
Iron
Iron
commented on 07 Feb 2023, 09:59 AM

Hi Petar,
my second question is fix using your method but my first question still exist
i set editor value using v-model and success to get data from API but i cant type anything in editor if using v-model
is there any reference how to get data from API and show it in editor?
Petar
Telerik team
commented on 07 Feb 2023, 11:22 AM

Hi, Kenji.

It is my miss that I didn't address the v-model question. The Kendo UI for Vue Native Editor doesn't have the v-model binding option implemented for it. Here is a link to the feature request about this functionality. You can vote for it. The more votes it collects, the bigger the chance for its sooner implementation to be. 

With the current implementation of the Native Editor, to update the value of the component, you can use the approach demonstrated in this "Controlling the value" demo that uses the value prop and the change event.

I hope the above addresses all your questions. Please let me know if you need additional details about the discussed functioanlity.

Kenji
Top achievements
Rank 1
Iron
Iron
commented on 08 Feb 2023, 02:51 AM

Hi Petar,

it works and thanks for your help
Petar
Telerik team
commented on 08 Feb 2023, 06:20 AM

You are welcome, Kenji! I am glad I could help.

No answers yet. Maybe you can help?

Tags
Editor Styling / Themes
Asked by
Kenji
Top achievements
Rank 1
Iron
Iron
Share this question
or