Currently in the process of developing a website using Vue.js 2, we incorporated the ckeditor4-vue plugin some time ago.
An issue has recently come up regarding the font not matching the rest of the application. The preference is to default to 'Lato', sans-serif.
Upon inspection at the end of the implementation, it's evident that we utilize contentsCss in our configuration to load an internal CSS stylesheet. (Located at localhost:8080/ckeditor/content.css)
However, this doesn't seem to load as expected. Is contentsCss supported for ckeditor4-vue? Are there alternative solutions?
The ckeditor instance is currently being loaded in main.js as shown below;
...
import CKEditor from "ckeditor4-vue";
Vue.use(CKEditor);
...
const app = new Vue({
store,
router,
i18n,
render: h => h(App)
}).$mount("#app");
...
We have created a wrapper for our CKEditor component for reusability purposes, instead of defining it multiple times. This component is configured as follows; (shown in a condensed form)
<template>
<ckeditor
@ready="onReady"
:value="value"
@input="handleInput"
:config="{ ...localConfig, readOnly: readOnly, fullPage: true }"
>
</ckeditor>
</template>
export default {
name: "RTE",
props: {
editorConfig: {
required: false,
type: Object
},
value: {},
targetObject: { required: true, type: String },
targetUuid: { type: String },
readOnly: { required: false, type: Boolean, default: false }
},
computed: {
config() {
return {
language: i18n._vm.locale,
toolbar: [
// { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{
name: "basicstyles",
items: [
"Bold",
"Italic",
"Underline",
"Strike",
"Subscript",
"Superscript",
"-",
"CopyFormatting",
"RemoveFormat"
]
},
{
name: "paragraph",
items: [
"NumberedList",
"BulletedList",
"-",
"Outdent",
"Indent",
"-",
"Blockquote",
"-",
"JustifyLeft",
"JustifyCenter",
"JustifyRight",
"JustifyBlock"
]
},
{ name: "links", items: ["Link", "Unlink"] },
{
name: "insert",
items: ["Image", "Table", "HorizontalRule", "SpecialChar"]
},
"/",
{ name: "clipboard", items: ["Undo", "Redo", "-"] },
{ name: "styles", items: ["Format", "FontSize"] },
{ name: "colors", items: ["TextColor", "BGColor"] },
{ name: "tools", items: ["Maximize", "-"] },
{ name: "document", items: ["Source", "-", "Sourcedialog"] }
],
extraPlugins:
"format,font,colorbutton,justify,uploadimage,image,sourcedialog",
uploadUrl:
"https://a.link.com/there/needs/to/be/a/random/url/in/here",
removePlugins: "sourcearea",
height: 300,
allowedContent: true,
filebrowserUploadUrl: this.isAwareness()
? "https://a.link.com/there/needs/to/be/a/random/url/in/here"
: "",
contentsCss: ["/ckeditor/content.css"]
};
}
}