How to properly connect third-party plugins that are not included in the main CKeditor package?
I try to add for example Strikethrough, it gives a duplication error (Uncaught CKEditorError: ckeditor-duplicated-modules)
It may be necessary to use the basic CKeditor package, but I can't find an example
In the example that I found, it is advised to do this
https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-ckeditor-duplicated-modules
import ClassicEditor from "#ckeditor/ckeditor5-editor-classic/src/classiceditor";
But I have another error
import Strikethrough from '#ckeditor/ckeditor5-basic-styles/src/strikethrough'
<template>
<div id="app">
<div style="height: auto">
<ckeditor
:editor="editor"
v-model="editorData"
:config="editorConfig"
></ckeditor>
</div>
</div>
</template>
<script>
import ClassicEditor from "#ckeditor/ckeditor5-build-classic";
import Strikethrough from '#ckeditor/ckeditor5-basic-styles/src/strikethrough';
export default {
name: "App",
data() {
return {
editor: ClassicEditor,
editorData: "",
editorConfig: {
plugins: [
Strikethrough
],
toolbar: {
items: [
'undo',
'redo',
'heading',
'|',
'bold',
'italic',
'link',
'strikethrough',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'blockQuote',
'fontColor',
'fontBackgroundColor',
'fontSize',
'underline',
'mediaEmbed'
]
},
},
dataToSave: "",
};
},
methods: {
saveData() {
this.dataToSave = this.editorData;
},
clearData() {
this.dataToSave = this.editorData = "";
},
},
};
</script>
Related
I am using the CKEditor Cloud Service; following the documentation I was able to set the code below.
I'm going crazy to understand why in the CKEditor dashboard the number of images uploaded is 0.
When I try to upload an image I notice that in my database the images are skipped correctly but the problem is in the CKEditor cloud service, because I notice that there are none.
<div class="container">
<div class="row mt-5">
<div class="col-12 col-md-6 offset-md-3">
<form method="POST" action="{{route('article.store')}}" enctype="multipart/form-data">
#csrf
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Titolo</label>
<input type="text" class="form-control" name="title" value="{{old('title')}}">
</div>
<div class="mb-3">
<select name="magazines[]" multiple>
#foreach ($magazines as $magazine)
<option value="{{$magazine->id}}">{{$magazine->title}}</option>
#endforeach
</select>
</div>
<div class="mb-3">
<input type="file" name="img">
</div>
<div class="mb-3 mt-2">
<textarea name="description" id="description-ckeditor" cols="30" rows="10">{{old('description')}}</textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://cdn.ckbox.io/CKBox/1.1.1/ckbox.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/35.1.0/super-build/ckeditor.js"></script>
<script>
CKEDITOR.ClassicEditor.create(document.getElementById("description-ckeditor"),
{
cloudServices: {
// Be careful - do not use the development token endpoint on production systems!
tokenUrl: 'https://9xxx0.cke-cs.com/token/dev/alqF5lF5sKFabFuNvs8TalqF5sKxfvDhFm?limit=10',
webSocketUrl: 'wss://9xxx0.cke-cs.com/ws'
},
toolbar: {
items: [
'ckbox', 'uploadImage', '|',
'exportPDF','exportWord', '|',
'findAndReplace', 'selectAll', '|',
'heading', '|',
'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'outdent', 'indent', '|',
'undo', 'redo',
'-',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
'alignment', '|',
'link', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
'textPartLanguage', '|',
'sourceEditing'
],
shouldNotGroupWhenFull: true
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: true
}
},
// https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
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' },
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
{ model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
{ model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
]
},
// https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
placeholder: 'Welcome to CKEditor 5 + CKBox!',
ckbox: {
// You need to provide your own token endpoint here
tokenUrl: 'https://9xxx0.cke-cs.com/token/dev/alqF5lF5sKFabFuNvs8TalqF5sKxfvDhFm?limit=10'
},
removePlugins: [
'EasyImage',
'RealTimeCollaborativeComments',
'RealTimeCollaborativeTrackChanges',
'RealTimeCollaborativeRevisionHistory',
'PresenceList',
'Comments',
'TrackChanges',
'TrackChangesData',
'RevisionHistory',
'Pagination',
'WProofreader',
// Careful, with the Mathtype plugin CKEditor will not load when loading this sample
// from a local file system (file://) - load this site via HTTP server if you enable MathType
'MathType'
],
})
.catch( error => {
console.error( error );
} );
</script>
Can you please help me to solve this problem?
I would be very grateful
I've been working on adding a wysiwyg editor, and after messing about a bit I managed to get CKEditor 5 somewhat working with Laravel 6/VueJS. However, no matter what I try to do, I can't seem to be able to add font options to the toolbar. I can either get the editor to render but without font toolbar options, or I can configure the toolbar correctly but the editor doesn't render.
My Blade view includes
<div class="form-group">
<label for="body">Body</label>
<wysiwyg></wysiwyg>
</div>
and I've added the following lines to my resources/app.js file (although the latter doesn't seem to matter much)
Vue.component('wysiwyg', require('./components/Wysiwyg').default);
Vue.use(CKEditor);
My wysiwyg VueJS component is
<template>
<div>
<input type="hidden" name="body" id="body" :value="this.data">
<ckeditor :editor="editor" v-model="data" :config="editorConfig"></ckeditor>
</div>
</template>
<script>
import CKEditor from '#ckeditor/ckeditor5-vue';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
props: ['article'],
components: {
ckeditor: CKEditor.component
},
data() {
return {
data: this.article !== undefined ? this.article.body : '',
editor: ClassicEditor,
editorConfig: {
toolbar: [
'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'indent', 'outdent','|', 'blockQuote', 'insertTable', 'undo', 'redo'
]
}
}
}
}
</script>
This does render the editor, but as soon as I add 'fontSize' to the toolbar array, I get an error saying the requested toolbar item is unavailable. I tried adding plugins: [ Font ] to my editorConfig, but then I get an error saying some CKEditor 5 elements are duplicated.
Even following the documentation's approach yields the same "requested toolbar item is unavailable" error;
ClassicEditor.create(document.querySelector('#bodyEditor'), {
fontSize: {
options: [
9,
11,
13,
'default',
17,
19,
21
]
},
toolbar: [
'heading', 'bulletedList', 'numberedList', 'fontSize', 'undo', 'redo'
]
})
.then(editor => console.log(editor))
.catch(error => console.log(error));
I'm honestly lost on how to get it to work, at this point I'm more willing to try out a different wysiwyg editor altogether.
trying to add BootstrapTable to some component but it give me
TypeError: Cannot call a class as a function
when calling the
<BootstrapTable ref="table"/>
i'm using laravel also my app.js
require('./bootstrap');
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-table/dist/bootstrap-table.min.css'
import jQuery from 'jquery'
window.$ = jQuery
//import Vue from 'vue'
import 'bootstrap'
import 'bootstrap-table/dist/bootstrap-table.js'
import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'
window.Vue = require('vue');
import VueRouter from 'vue-router';
import { routes } from './routes';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes
});
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('dashboard', require('./components/Dashboard').default);
Vue.component('BootstrapTable', BootstrapTable)
const app = new Vue({
router
}).$mount('#app');
and component vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Dashboard</div>
<div class="card-body">
<BootstrapTable :columns="columns" :data="data" :options="options"></BootstrapTable>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BootstrapTable from "bootstrap-table";
export default {
components: {
BootstrapTable: BootstrapTable
},
data() {
return {
columns: [
{
title: "Item ID",
field: "id"
},
{
field: "name",
title: "Item Name"
},
{
field: "price",
title: "Item Price"
}
],
data: [
{
id: 1,
name: "Item 1",
price: "$1"
},
{
id: 2,
name: "Item 2",
price: "$2"
},
{
id: 3,
name: "Item 3",
price: "$3"
},
{
id: 4,
name: "Item 4",
price: "$4"
},
{
id: 5,
name: "Item 5",
price: "$5"
}
],
options: {
search: true,
showColumns: true
}
};
},
mounted() {
console.log("Dashboard mounted.");
}
};
</script>
please any help ? many thanks on advance.
I am having big problems applying classes to my ul elements in React using SCSS and Webpack 4. I have upgraded my project to Webpack 4 ( #yesiamstupid )
If I taget a type of element (ul) it works.
My own class "navMenu" is never applied, though.
I can see the class in the web developer tools --> styles.scss
I expect the text background to be blue in the navigation.
[ app.js ]
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import AppRouter from './routers/AppRouter';
import 'normalize.css/normalize.css';
import './styles/styles.scss';
const jsx = (
<Provider>
<AppRouter />
</Provider>
);
ReactDOM.render(jsx, document.getElementById('app'));
[ AppRouter.js ]
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import StartPage from '../components/StartPage';
import Header from '../components/Header';
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={StartPage} exact={true} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
[ StartPage.js ]
import React from 'react';
const StartPage = () => (
<div>
Hello
</div>
);
export default StartPage;
[ Header.js ]
import React from 'react';
import { NavLink } from 'react-router-dom';
const Header = () => (
<header>
<h1>Test WP4</h1>
<ul className="navMenu">
<li><NavLink to="/" activeClassName="is-active" exact={true}>Here we are</NavLink></li>
<li><NavLink to="/undefined" activeClassName="is-active" exact={true}>This route is undefined</NavLink></li>
</ul>
</header>
);
export default Header;
[_base.scss]
html {
font-size: 62.5%;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: $m-size;
}
button {
cursor: pointer;
}
button:disabled {
cursor: default;
}
.is-active {
font-weight: bold;
}
[ _settings.scss ]
// Colors
// Spacing
$s-size: 1.2rem;
$m-size: 1.6rem;
$l-size: 3.2rem;
$xl-size: 4.8rem;
$desktop-breakpoint: 45rem;
[ _header.scss ]
ul {
list-style-type: circle;
}
.navMenu {
text-align:center;
background:blue;
padding-top:400px;
}
[ styles.scss ]
#import './base/settings';
#import './base/base';
#import './components/header';
[ webpack.config.js ]
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = () => {
return {
watch: true,
//mode: 'development',
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'), //absolute path
filename: 'bundle.js' //name is whatever you want
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.svg$/,
loader: 'raw-loader'
}, {
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "style.css",
//chunkFilename: "chunk.css"
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'), //absolute path
historyApiFallback: true, //go to index if path not found
publicPath: '/dist' //specify where bundle files liveY
}
};
}
I recommend you to split your tests for css and scss files.
In your code you are using sass-loader for css. Instead use something like this:
{
test: /\.css$/,
include: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader'
],
},
{
test: /\.(sa|sc)ss$/,
exclude: 'path-to-css-files',
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
],
},
I am trying to integrate CKEditor version 5 into Angular 5 application. I created a component and imported required packages. I can compile perfectly fine CKEditor using Webpack using same code, however I fail todo so inside Angular. I get weird parser error for svg paths.
Error Screenshot:
https://www.dropbox.com/s/xwoas03fd4q7gks/Screenshot%202017-12-13%2011.55.45.png?dl=0
My Component looks like:
import { Component, AfterViewInit, ChangeDetectionStrategy, ViewChild, ElementRef, ViewEncapsulation, Input, Output, EventEmitter } from '#angular/core';
// Required Dependencies for library construction
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote';
import Link from '#ckeditor/ckeditor5-link/src/link';
import List from '#ckeditor/ckeditor5-list/src/list';
import Heading from '#ckeditor/ckeditor5-heading/src/heading';
import GFMDataProcessor from '#ckeditor/ckeditor5-markdown-gfm/src/gfmdataprocessor';
#Component({
changeDetection: ChangeDetectionStrategy.Default,
encapsulation: ViewEncapsulation.None,
selector: 'ten-ckeditor',
styleUrls: ['./ckeditor.component.scss'],
templateUrl: './ckeditor.component.html',
})
export class CkeditorComponent implements AfterViewInit {
#Input() content: string;
#Output() contentEdited: EventEmitter<string>;
#ViewChild('editor') editor: ElementRef;
constructor() {
}
ngAfterViewInit() {
function Markdown( editor ) {
editor.data.processor = new GFMDataProcessor();
}
console.log(List);
ClassicEditor.create(this.editor.nativeElement, {
plugins: [
Markdown,
Essentials,
Paragraph,
Bold,
Italic,
Heading,
BlockQuote,
Link,
List
],
toolbar: [
'headings',
'bold',
'italic',
'blockquote',
'link',
'numberedList',
'bulletedList'
]
})
.then(editor => {
console.log('Editor was initialized', editor);
editor.setData(this.content);
})
.catch(error => {
console.error(error.stack);
});
}
}
This is what I get when I inspect HTML inside application when I target Icon.
<svg class="ck-icon" viewBox="0 0 20 20"><body><parsererror style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Document is empty
</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror></body></svg>
My icons weren't working either. I had something like this in my webpack config:
{
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader'
},
],
},
}
So I removed the '|svg' part, and then added:
{
test: /\.svg(\?.*)?$/,
loader: 'raw-loader',
},
And it works for me.