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.
Related
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>
I'm trying to have different text colors for my breadcrumbs based on a property but I can't figure out how to apply those colors anywhere. Can't add a color or class in the items either.
breadcrumbItems() {
return [
{
text: this.$t("receiving.breadcrumbs.step1"),
disabled: this.item.Status !== "STEP1"
},
{
text: this.$t("receiving.breadcrumbs.step2"),
disabled: this.item.Status !== "STEP2"
},
{
text: this.$t("receiving.breadcrumbs.step3"),
disabled: this.item.Status !== "STEP3"
}
];
}
<v-breadcrumbs :items="breadcrumbItems" class="breadStyle">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
</v-breadcrumbs>
Looking at the API for v-breadcrumbs: https://vuetifyjs.com/en/api/v-breadcrumbs-item/ it doesn't provide a property "color" or something similar, but there is a slot, so you can pass any kind of components in it.
You can create a <span> and customize its color and its style depending on the items:
<template>
<v-breadcrumbs :items="items">
<template v-slot:divider>
<v-icon size="25">mdi-forward</v-icon>
</template>
<template v-slot:item="{ item }">
<v-breadcrumbs-item :disabled="item.disabled">
<span :style="`color: ${item.color}`">
{{ item.text.toUpperCase() }}
</span>
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
</template>
<script>
export default {
data: () => ({
items: [
{
text: "Dashboard",
disabled: false,
color: "green",
},
{
text: "Link 1",
disabled: false,
color: "blue",
},
{
text: "Link 2",
disabled: true,
color: "red",
},
],
}),
};
</script>
I've found that the deep selector (https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) often helps with styling Vuetify components. I added this to my components scoped CSS and the colours work just fine for links:
.v-breadcrumbs >>> a {
color: purple;
}
I found the relevant tag by looking through the Elements-tab under Inspect (in Chrome).
I don't know if this is the best solution for your specific situation, but figured I'd add this for anyone with a simpler use case.
This question is similar to that one: RTE in own backend module based on Extbase and Fluid
but not the same, so i created a new question.
I create a comment-extension for typo3 Version 8.7.7
I have added a RTE Editor (CKEditor) to a textarea field in my BackendModule.
Therefore i have the following TCA in my comment-model:
'text' => [
'exclude' => true,
'label' => 'LLL:EXT:rmcomment/Resources/Private/Language/locallang_db.xlf:tx_rmcomment_domain_model_comment.text',
'config' => [
'type' => 'text',
'enableRichtext' => true,
'richtextConfiguration' => 'minimal',
'fieldControl' => [
'fullScreenRichtext' => [
'disabled' => false,
],
],
'cols' => 40,
'rows' => 15,
'eval' => 'trim,required',
],
],
The backend template looks like this:
<f:form action="create" name="newComment" object="{newComment}" arguments="{author:beuser.username, email:beuser.email}">
<strong>Eingeloggt als: {beuser.realname} (Username: {beuser.username}) (Email: {beuser.email})</strong><br>
<label for="commentEmailCheckbox">Öffentliche E-Mail:</label>
<f:form.checkbox id="commentEmailCheckbox" property="mailPublic" value="1" />
<br><br>
<label for="commentText" class="text{rm:hasError(property:'text',then:' text-danger')}">
<f:translate key="tx_rmcomment_domain_model_comment.text" />
<span class="small">( <f:translate key="tx_rmcomment_domain_model_comment.required" /> )</span>
</label><br>
<f:form.textarea id="commentText" property="text" cols="120" rows="6" /><br>
<f:form.submit value="{f:translate(key:'tx_rmcomment_domain_model_comment.saveComment')}" class="btn btn-default" />
</f:form>
Is there a better way to make that RTE working for my Backend-Module without "dirty javascript" (**my answer) inside my fluid-template?**
EDIT
I think this is the only solution, so i move the working part to an answer now.
Under the new form i add this javascript:
<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js" type="text/javascript"></script>
<script src="/typo3conf/ext/rmcomment/Resources/Public/Backend/RTE/ckcomment.js" type="text/javascript"></script>
My ckcomment.js looks like this:
// Configure New Comment CKEditor-Form
CKEDITOR.config.customConfig = '/typo3conf/ext/rmcomment/Resources/Public/Backend/RTE/backendRTEconfig.js';
CKEDITOR.replace( 'commentText' );
$('.text').click(function(){
CKEDITOR.instances.commentText.focus();
});
And the backendRTEconfig.js has this content:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Blockquote', ] },
{ name: 'document', items: [ 'Source' ] },
];
};
Now i got a CKEditor for my Backend Module with customized editor-buttons. Until now it's the only way i found.
In another extension my custom content elements don't have to load the ckeditor "library" nor my configuration-javascript. There I only had to add the TCA: 'richtextConfiguration' => 'minimal'
If someone know how to activate ckeditor without the javascirpt "loader" in my template, let me know.
I am using CKEditor in my project, I have requirement to print ckeditor content on page so I want to restrict height of ckeditor, so I have give height as 220px and removed scrollbars using overflow : hidden, but when user go to end of ckeditor area and presses enter, content increases without scrollbar option.
Is there any way by which i can restrict number of rows of content in ckeditor?
Below is my code for ckeditor:
CKEDITOR.replace('summaryEditor',
{
toolbar:
[
{ name: 'customToolBar', items: ['Bold', 'Italic', 'Underline', 'JustifyLeft', 'JustifyCenter', 'Font', 'FontSize', 'NumberedList', 'BulletedList', 'Link', 'Image', 'Table', 'Source', 'questions'] }
],
height: '220px',
resize_enabled: false,
contentsCss: 'body {overflow:hidden;}',
autoGrow_onStartup: false,
extraPlugins: 'questions',
removePlugins: 'elementspath'
});
The autogrow plugin is not part of the 3 default builds of CKEditor, basic, standard or full. So i'm not sure how you got that installed and enabled if you don't want it.
But if you just add 'autogrow' to your removePlugins list it should stop.
But still, your height setting should override the editor contents height. I just set height to 100 and it works fine.
CKEDITOR.replace('editor', {
height: 100
});
Here is a plnkr to demonstrate:
http://plnkr.co/edit/lsFaT1CMMeDePnjVc5RD?p=preview
Is it possible to specify a source for available 'snippets' for the Editor widget. I'd like to put store them in a separate array (or even better, retrieve them from a remote data source).
I've tried something like:
<script type="text/x-kendo-template" id="editor">
<textarea name="test" data-bind="value:test" data-role="editor" data-tools="['insertHtml']" data-insert-html="snippets"></textarea>
</script>
where snippets is the array as per the Editor demo, but this doesn't work.
It this supported?
Maybe no longer relevant, but for further reference:
<textarea data-role="editor"
data-tools="['bold', 'italic', 'underline', 'strikethrough', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull',
{ name: 'insertHtml',
items: [{ text: 'title', value: '{{title}}' },
{ text: 'description' , value: '{{description}}' },
{ text: 'link' , value: '{{link}}'},
{ text: 'notes' , value: '{{notes}}'}]
}]"
data-bind="value: emailForm.body"></textarea>
This allows you to add snippets to the toolbar using the MVVM method. To get them from a remote datasource you most likely need to do this by finding the kendo control when it is rendered and then set a different datasource with a similar key/value structure.