I'm trying to install ckeditor. In console getting this error Here is my package.json file. In ckeditor5 module getting same error when I import font plugin.Now I'm trying to install all plugins manually.
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
<script>
// ⚠️ NOTE: We don't use #ckeditor/ckeditor5-build-classic any more!
// Since we're building CKEditor from source, we use the source version of ClassicEditor.
// import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import EssentialsPlugin from '#ckeditor/ckeditor5-essentials/src/essentials';
import BoldPlugin from '#ckeditor/ckeditor5-basic-styles/src/bold';
import ItalicPlugin from '#ckeditor/ckeditor5-basic-styles/src/italic';
import LinkPlugin from '#ckeditor/ckeditor5-link/src/link';
import ParagraphPlugin from '#ckeditor/ckeditor5-paragraph/src/paragraph';
export default {
name: 'app',
data() {
return {
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo'
]
}
}
};
}
};
Related
I'm following the documentation for setting up a custom Vue ckeditor5 build in a Nuxt app. I created a custom build using the online builder (https://ckeditor.com/ckeditor-5/online-builder/), then downloaded it to my project.
Here is my CKEditorNuxt.vue file:
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import Editor from '../ckeditor5-custom-editor/build/ckeditor.js';
export default {
name: 'CkeditorNuxt',
data() {
return {
editor: Editor,
editorData: '<p>Default text</p>',
editorConfig: {
}
};
}
}
</script>
And inside where I'd like to place my template:
<CkeditorNuxt v-model="subsection.content"></CkeditorNuxt>
My custom build ckeditor.js file:
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Autoformat from '#ckeditor/ckeditor5-autoformat/src/autoformat.js';
import Base64UploadAdapter from '#ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter.js';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold.js';
import CloudServices from '#ckeditor/ckeditor5-cloud-services/src/cloudservices.js';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials.js';
import Heading from '#ckeditor/ckeditor5-heading/src/heading.js';
import Image from '#ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '#ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageStyle from '#ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '#ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '#ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '#ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '#ckeditor/ckeditor5-link/src/link.js';
import List from '#ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '#ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '#ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
import Table from '#ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '#ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '#ckeditor/ckeditor5-typing/src/texttransformation.js';
class Editor extends ClassicEditor {}
Editor.builtinPlugins = [
Autoformat,
Base64UploadAdapter,
BlockQuote,
Bold,
CloudServices,
Essentials,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation
];
// Editor configuration.
Editor.defaultConfig = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo'
]
},
language: 'en',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
};
export default Editor;
When I load the page, I get this error:
Why might this error be occurring? From other similar posts (Vue.js unknown custom element), I believe I should add an item to the components section, e.g.
components: {
ckeditor: Editor.component,
}
as this works when I use the default CKEditor, but not for my custom build. I think this is the source of my error, but I'm not sure what the correct format is. How should I go about fixing this error? Thanks!
I tried to use vue2-editor. so when i tried with basic process which is in the documentation
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
it gives me reference error document is not defined...
so then i tried to use it as plugin...in plugin, i defined
import Vue from "vue";
import { VueEditor } from "vue2-editor";
Vue.use(VueEditor);
and in nuxt.config.js
plugins: [
{ src: '~/plugins/vueditor', mode: 'client'},
]
now it doesnt show any error but editor doesnt show up.
i have also tried with { src: '~/plugins/vueditor', mode: 'client', ssr: false},
anyone who can help me with this.?
I recently uploaded my own Vue 3 component to NPM to make it usable for others. When using it in other projects it gives this warning:
[Vue warn]: Component is missing template or render function.
at <VueToggle id="1" title="Toggle me" >
at <App>
What could be the reason this is happening? The way I am building and publishing the app is by running this code.
import VueToggle from "./components/VueToggle";
export default {
install(app) {
app.component("vue-toggle", VueToggle);
}
};
And then running this build command in my package.json:
"build-library": "vue-cli-service build --target lib --name vue-toggle-component ./src/install.js",
How I use my component in a different project:
<template>
<VueToggle id="1" title="Toggle me"/>
</template>
<script>
import VueToggle from 'vue-toggle-component';
export default {
name: 'App',
components: {
VueToggle,
}
}
</script>
The component itself:
<template>
<section class="wrapper" :class="{dark: darkTheme}" :title="title">
<input
:id="id"
:name="name"
v-model="toggleState"
class="toggle"
type="checkbox"
#click="toggleState = !toggleState"
/>
<label :for="id" class="toggler" :style="[toggleState && {'background': activeColor}]"/>
<span class="title" v-text="title" #click="toggleState = !toggleState"/>
</section>
</template>
<script>
export default {
name: 'VueToggle',
props: {
activeColor: {type: String, default: '#9FD6AE'},
darkTheme: {type: Boolean, default: false},
id: {type: String, required: true},
name: {type: [String, Boolean], default: false},
title: {type: String, required: true},
toggled: {type: Boolean, default: false},
},
data() {
return {
toggleState: this.toggled
}
},
}
</script>
The package: https://www.npmjs.com/package/vue-toggle-component
The following concerns a new project using Vue 3 & Typescript created with Quasar CLI (v2 beta). Although I'm getting the same error reported by the OP, my source layout might be different as I'm not using single-file components.
[Vue warn]: Component is missing template or render function.
I resolved the above issue by specifying the vue file as the component source. I typically split my components into separate vue and ts files.
The related fragment:
MyComponent: require("./components/My.vue").default
In context:
export default defineComponent({
name: "App",
components: {
MyComponent: require("./components/My.vue").default
},
setup() {
...
To quiet the linters, I have the following es-lint comments
export default defineComponent({
name: "App",
components: {
// eslint-disable-next-line #typescript-eslint/no-unsafe-assignment, #typescript-eslint/no-unsafe-member-access, #typescript-eslint/no-var-requires
MyComponent: require("./components/My.vue").default
},
Ideally, the import statement would be used instead of the inline require assignment.
The problem is that you are trying to import 'vue-toggle-component' like a Vue component, when your library is exporting a Vue plugin (made up of an install function that declares your component).
There are two way to fix this.
Solution 1
Remove the component import entirely.
// component.vue (separate project)
<template>
<VueToggle id="1" title="Toggle me"/>
</template>
<script>
export default {
name: 'App'
}
</script>
Then import your library plugin and styles in index.js of the separate project. You should activate the plugin using Vue.use().
// index.js (separate project)
import { createApp } from "vue";
import App from './App.vue';
import VueToggleComponent from 'vue-toggle-component';
import '#vue-toggle-component/dist/style.css';
const app = createApp(App);
app.mount('#app');
app.use(VueToggleComponent);
Your component should now be imported by default into the project and can be used from anywhere.
Solution 2
Add anonymized exports for each component for individual importing.
// install.js
import VueToggle from "./components/VueToggle";
export default {
install(app) {
app.component("vue-toggle", VueToggle);
}
};
export { default as VueToggle } from "./components/VueToggle";
Then import the component as a non-default export in your separate project.
// component.vue (separate project)
<template>
<VueToggle id="1" title="Toggle me"/>
</template>
<script>
import { VueToggle } from 'vue-toggle-component';
export default {
name: 'App',
components: {
VueToggle,
}
}
</script>
Finally, install your library's styles.
// index.js (separate project)
import { createApp } from "vue";
import App from './App.vue';
import '#vue-toggle-component/dist/style.css';
const app = createApp(App);
app.mount('#app');
Conclusion
Personally, I think Solution #2 is more flexible and intuitive to use.
When you use your component, replace
import VueToggle from 'vue-toggle-component';
with
import VueToggle from 'vue-toggle-component.vue';
Or if component users use webpack, they may specify in config:
resolve: {
extensions: ['.vue', '.ts', '.js']
}
I'm using csv-loader from webpack to load my CSV file and it loads fine on my Vue JS app.
The data.csv key is populated but the chart is not displayed.
App is being served locally.
<template>
<div id="app">
<img src="./assets/logo.png">
<highcharts :options="chartOptions"></highcharts>
</div>
</template>
<script>
import {Chart} from 'highcharts-vue'
import csvPath from './assets/test.csv'
import Papa from 'papaparse'
export default {
name: 'app',
components: {
highcharts: Chart
},
data () {
return {
chartOptions: {
chart: {
type: 'column'
},
data: {
csv: csvPath
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
}
}
},
CSV File
Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
I expect to see a fully plotted graph (barchart).
Try to import and initialize the data Highcharts module like that:
import Highcharts from "highcharts";
import dataModule from "highcharts/modules/data";
dataModule(Highcharts);
I'm new to vue.js. Integrated CKEditor successfully but having trouble to integrate CKFinder in it. I'm trying to Import CKFinder in CKEditor component but I'm getting an error.
CKEditor-Vue Component:
<template>
<ckeditor :editor="editor" :value="defaultValue"
#input="editorInput" :disabled="disabled" :config="editorConfig"></ckeditor>
</template>
<script>
import DecoupledEditor from '#ckeditor/ckeditor5-build-decoupled-document';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
export default {
name: "Editor",
props: {
defaultValue: String,
disabled: Boolean
},
data() {
return {
editor: DecoupledEditor,
editorConfig: {
plugins: [
CKFinder
]
}
}
},
methods: {
editorInput(e) {
this.$emit('getEditorData', e);
}
}
}
</script>
<style scoped>
</style>
When I try to import CKFinder it's showing ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.. Screenshot:
Am I doing anything wrong? Do you have any integration guide or correction on my component?
Thanks in advance for helping me.
You don't have to import
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
because it is already included in the build of your choice. You only need to configure it and the error should disappear.
To make it clear like what oleq mean, just make a config under the editorConfig like this. You don't need to import it.
<script>
import DecoupledEditor from '#ckeditor/ckeditor5-build-decoupled-document';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder'
export default {
name: "Editor",
props: {
defaultValue: String,
disabled: Boolean
},
data() {
return {
editor: DecoupledEditor,
editorConfig: {
plugins: [
ckfinder: {
uploadUrl:
'/ckfinder/connector?command=QuickUpload&type=Files&responseType=json',
filebrowserBrowseUrl: '/ckfinder/browser',
filebrowserImageBrowseUrl: '/ckfinder/browser?type=Images',
filebrowserUploadUrl:'/ckfinder/connector?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images'
}
]
}
}
},
methods: {
editorInput(e) {
this.$emit('getEditorData', e);
}
}
}
</script>