Issue with CKEditor 5 in Nuxt 3: "Template or render function for component is not found"

I have successfully installed the required packages:

npm i @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-vue

Next, I integrated it into a component:

<template>
    <div class="w-full h-[400px]">
    <CKEditor
        v-model="text"
        :editor="ClassicEditor"
        :config="config"/>
    </div>
</template>

Here is the setup of the component:

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import CKEditor from "@ckeditor/ckeditor5-vue";
const config = {
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
        ]
    }
}
const text = ref('')

The component is included in the root component:

          <client-only>
            <InputWysiwyg/>
            </client-only>

However, when I open the page with the WYSIWYG editor, I receive a warning: "Component is missing template or render function" at the CKEditor element. What could be causing this issue?

javascriptvue.jsckeditornuxt3.js

Answer №1

For anyone looking to implement CKEditor, it is best to create an instance by yourself using the following code:

const editor = ref(null)
const ck = ref(null)
const init = () => {
    ck.value = ClassicEditor.create(editor.value)
}
onMounted(() => {
    init()
})

<template>
    <div class="w-full h-[400px]">
        <div class="w-full h-full" ref="editor"></div>
    </div>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combine the common id field from two distinct arrays in AngularJS

I have two distinct arrays of data objects, each containing multiple fields: https://i.stack.imgur.com/tMM4l.png https://i.stack.imgur.com/ScgPh.png Here is an example of the data object array with the inclusion of the eventId field. https://i.stack.imgur ...

javascriptarraysangularjs

How does JavaScript function syntax differ in Next.js and JSX?

I'm in the process of creating a function that allows users to select different sizes. It currently works fine with just JavaScript and HTML, but I'm encountering an error when using it in Next.js. Can someone confirm if my syntax for the JavaScr ...

javascriptreactjsnext.jsjsx

Challenging glitch in the JavaScript code

My jQuery code seems to be functioning properly in online text editors like Fiddle and StackOverflow snippets. However, when I try to implement the same code in Brackets or view it on GitHub, the navbar scroll down animation fails to work as expected. You ...

javascripthtmlcss

Tips for successfully passing a ViewBag in ng-click

<th><a href="javascript:;" ng-click="order(@ViewBag.desc)">Name</a></th> I am currently implementing this code and trying to fetch data from the view bag into my Angular Controller. However, I seem to be facing some challenges in a ...

javascriptc#angularjsasp.net-mvcrazor

Please proceed by submitting all radio buttons that have been checked

Seeking assistance with creating a quiz application using the MEAN stack. Once all questions are attempted, there will be a submit button for checking all selected radio buttons - option 1 corresponds to 1, option 2 to 2, and so on. The current structure o ...

javascriptangularjsnode.jsmongodb

Methods for incorporating JSON Data into ChartJS

Below is my app.js file: app.js var app = angular.module('myApp', []); app.controller('MainCtrl', function($scope, $http) { $http.get('http://happyshappy.13llama.com/wp- json/llama/v1/stats').then(function(response) ...

javascriptangularjsjsonwordpresschart.js

Having trouble getting the navigation function to work correctly for my ReactJS image slider

I am looking to create a simple image slider that contains 3 images in an array. I want to be able to navigate through the slider using just one function that can move back and forth between images. If you click "next" on the last image, it should bring ...

javascriptreactjssliderfrontend

Storing JavaScript Array for Future Use in a Separate File

Trying to clarify my question: I'm working with two files: number-crunching.js and chart.html. The number-crunching.js file contains a JSON object: var data = [ { "mother": "Ellen", "father": "Bob", "pet": "cat", "age":50, "hairLength":10 ...

javascriptjqueryhtmlarraysjson

Extract data from nested JSON and populate a list with corresponding values

<ul> <li><a href="" class="edit">a unique item in the list</a></li> <li><a href="" class="edit">another unique item in the list</a></li> <li><a href="" class="edit">yet another unique ...

javascriptjqueryajaxjson

Vue 3 gracefully handles errors by displaying an alternative component

I am currently developing a rendering library for my Vue 3 + Vite project. Essentially, I have a JSON array of products which I pass to a special <Render :products /> component. This Render component reads all the JSON products and converts them in ...

javascriptvue.jsvuejs3vite

Navigating smoothly through different URLs to a single state using Angular's UI-Router

I recently started using angular's ui-router and I am looking for a way to configure multiple URLs to point to the same state. For instance: /orgs/12354/overview // should show the same content as /org/overview Currently, my $state provider is set u ...

javascriptangularjsangular-ui-router

The React Material-UI Slider does not move when OnChangeCommitted is triggered

Struggling with implementing the Material UI slider in React, I encountered an issue where the OnChange function would trigger every time the value changed. I needed it to activate only when the left mouse button was released. Fortunately, I discovered a s ...

javascriptreactjsmaterial-uislider

Rotating the camera around the origin in Three.js

Hey, I'm having some trouble with what I thought would be a simple task. I have a group of objects at the origin, and I'm trying to rotate a camera around them while always facing the origin. According to the documentation, this code should work: ...

javascriptcamerathree.js

Prevent the beforeunload dialog box from appearing

Looking for a solution that is compatible with all browsers and operating systems. Referring to this resource https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload This is what I have so far: window.addEventListener("beforeunload", function ( ...

javascriptjquery

Expand the grid with extra rows once it has been generated, especially when dealing with a large volume of database records, utilizing JQGrid or JSGrid

Having a large dataset (json) that takes too long to display in the grid for users, I'm looking for a solution. My idea is to initially run a filtered query (e.g. records from the current year) to quickly build the grid. Once the grid is presented to ...

javascriptjsonajaxjqgridjsgrid

Utilizing a class instance as a static property - a step-by-step guide

In my code, I am trying to establish a static property for a class called OuterClass. This static property should hold an instance of another class named InnerClass. The InnerClass definition consists of a property and a function as shown below: // InnerC ...

javascriptgoogle-apps-script

Using the datepicker class in an input field causes issues with the functionality of the bootstrap datepicker, specifically the autoclose, endDate, and startDate properties do not function as

I'm facing an issue with my code when I add the datepicker to the input field's class. JS $(document).ready(function () { $("#ActionDateInput").datepicker({ autoclose: true, endDate: new Date() }); }); HTML <input type= ...

javascriptdatepickerbootstrap-datepicker

Using JQuery and JavaScript to store and dynamically apply functions

I have a code snippet that looks like this:. var nextSibling = $(this.parentNode).next(); I am interested in dynamically changing the next() function to prev(), based on a keypress event. (The context here is an input element within a table). Can someo ...

javascriptjqueryfunctionprototype

creating a while loop in node.js

In C#, the following code would be used: double progress = 0; while (progress < 100) { var result = await PerformAsync(); progress = result.Progress; await Task.Delay(); } This concise piece of code spans just 7 lines. Now, how can we ...

javascriptnode.jsasynchronous

Tips for smoothly transitioning between tabs in IONIC by simply clicking on a link or url

Imagine having two tabs within my application: tab-one and tab-two. I am trying to navigate from the view of tab-one (one.html) to the view of tab-two (two.html). I have attempted using $state.go(), $location, and $window.location but none of them seem t ...

javascriptiosangularjsionic-frameworktabs