Comments (5)
I've successfully run CKEditor 5 with Vue by following steps from the documentation page. Please, make sure that you follow all the steps from the guide and build the project properly.
from ckeditor5-vue.
I've run it successfully as well with the default inline build, I'm just trying to get the fontFamily plugin to work, which it does not.
from ckeditor5-vue.
I've run it successfully as well with the default inline build, I'm just trying to get the fontFamily plugin to work, which it does not.
I'm sorry, but I can't reproduce your issue. I'm able to build the editor from source with font plugin by following steps from the documentation.
from ckeditor5-vue.
Do you have any source code you can share? I can't get mine to work at all.
from ckeditor5-vue.
Here you go:
App.js
<template>
<div id="app">
<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</div>
</template>
<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 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';
import Font from '@ckeditor/ckeditor5-font/src/font';
export default {
name: 'app',
data() {
return {
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {
plugins: [
EssentialsPlugin,
BoldPlugin,
ItalicPlugin,
LinkPlugin,
ParagraphPlugin,
Font
],
toolbar: {
items: [
'bold',
'italic',
'link',
'undo',
'redo',
'fontFamily'
]
}
}
};
}
};
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.config.productionTip = false
Vue.use( CKEditor );
new Vue({
render: h => h(App),
}).$mount('#app')
vue.config.js
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );
module.exports = {
// The source of CKEditor is encapsulated in ES6 modules. By default, the code
// from the node_modules directory is not transpiled, so you must explicitly tell
// the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
transpileDependencies: [
/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
],
configureWebpack: {
plugins: [
// CKEditor needs its own plugin to be built using webpack.
new CKEditorWebpackPlugin( {
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: 'en'
} )
]
},
css: {
loaderOptions: {
// Various modules in the CKEditor source code import .css files.
// These files must be transpiled using PostCSS in order to load properly.
postcss: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
},
chainWebpack: config => {
// Vue CLI would normally use its own loader to load .svg files. The icons used by
// CKEditor should be loaded using raw-loader instead.
// Get the default rule for *.svg files.
const svgRule = config.module.rule( 'svg' );
// Then you can either:
//
// * clear all loaders for existing 'svg' rule:
//
svgRule.uses.clear();
//
// * or exclude ckeditor directory from node_modules:
svgRule.exclude.add( __dirname + '/node_modules/@ckeditor' );
// Add an entry for *.svg files belonging to CKEditor. You can either:
//
// * modify the existing 'svg' rule:
//
// svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
//
// * or add a new one:
config.module
.rule( 'cke-svg' )
.test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
.use( 'raw-loader' )
.loader( 'raw-loader' );
}
};
from ckeditor5-vue.
Related Issues (20)
- ckeditor vue plugins css build error (with any plugin) HOT 4
- strikethrough and underline not listing as toolbar items
- Automated tests and coverage fails on Windows HOT 2
- CKFiner errors: CKEditorError: window.CKFinder is undefined & undefined (reading 'modal') HOT 1
- `emitDebouncedInputEvent` causes performance issue with long and complex content HOT 3
- Performance issues in processing content with multiple paragraphs containing multiple inline widgets HOT 2
- [VUE] Align the release process to the changes in ckeditor5-dev
- Custom build issues (object, instead of function) - Documentation issues? HOT 1
- v-model, events "input" or "update: model-value" do not work in source edit mode HOT 3
- Uncaught ReferenceError: global is not defined HOT 1
- Migrate to CircleCI in ckeditor/ckeditor5-vue
- Add link popup have wrong position in Modal with fixed mask HOT 3
- Uncaught SyntaxError when integrating a build from the online builder when using `npm add file:./ckeditor5` in Vue HOT 6
- Table captions is absent HOT 3
- Add support for multi-root editor
- How to set the height of the editor in Vue3? I set CSS, but none of it worked HOT 8
- vue3+ts+vite use custom build HOT 1
- Allow control of batchType options in model-value watcher
- Investigate warning
- Bug Report: Strikethrough Not Showing on Vue 3 with CKEditor
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ckeditor5-vue.