I want to remove media and typography section in the "grapesjs-blocks-bootstrap4" plugin. How can I do that?
plugins: ["gjs-blocks-basic","grapesjs-blocks-bootstrap4"], pluginsOpts: {"gjs-blocks-basic": {},"grapesjs-blocks-bootstrap4":{} },
Related
I am currently using ReactJS(TypeScript) with TailwindCSS to create some forms, and I want my Submit button to use one of the yellow colors that come with Tailwind. However, when I have my react project running and I update the value to bg-yellow-300 , it will turn yellow, but when I first launch the react app, the button has its default color scheme, which I don't want. I've provided the code for the button below, and my config file:
<Button className="w-1/12 bg-yellow-300 hover:bg-yellow-400 text-black-100" type="submit">
Submit
</Button>
Config File:
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ["./src/**/*.{js,jsx,ts,tsx}", 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
colors: {
"gold":"#edcd37",
"babyblue":"#298ge5",
},
},
},
plugins: [
require('flowbite/plugin')
],
}
I've tried adding the JIT(Just in time) setting to see if for some reason that was why it wasn't giving the correct color on initial loading, but it didn't work either.
I'm trying to customize a single component CSS, avoid to customize all component.
Ext.define('MyApp.tab.Panel', {
extend: 'Ext.tab.Panel',
header:{
xtype: 'myWorkspacesToolbar',
items:[
....
]
},
items:[
....
]
I want to customize only HEADER style and his sub items (added dynamically) and not Panel items.
Using scss file myWorkspacesToolbar.scss for example:
$button-toolbar-color: #F00;
I change all button color (header and panel items and sub items).
Using theme mixing variable I have to set UI for single field in header to obtain CSS changes.
What is the best way to do that?
Use extjs-button-ui mixin for create needed button and set ui property to your button in header
I am currently trying to customize Antd theme by using the antd and less plugins for Gatsby. Following this thread - Change the Theme of Antd when using GatsbyJS
gatsby-config.js plugins contain
{
resolve: 'gatsby-plugin-antd',
options: {
style: true
}
},
{
resolve: `gatsby-plugin-less`,
options: {
javascriptEnabled: true,
modifyVars: {
'primary-color': '#BADA55'
}
}
}
gatsby-node.js and relevant modules are filled as seen in the thread.
When I look at an element in the browser debugger, the button uses the base theme, but the specified theme is actually there (just being overridden).
I had the same issue and for me it was that I had somewhere in my code imported the style for antd
import "antd/dist/antd.css"
import CKEditor from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import Base64UploadAdapter from '#ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
Getting ckeditor 5 duplicate modules error. Anyone can help me.
Thanks in Advance.
It's because you are importing the plugin with the build !
In order to add plugins, you have to make a personnal build. Please read this page to know more about it : ckeditor offical documentation.
They even have an official online builder that does all the work for you ! : ckeditor online builder
Once you created it, you have to import the editor just as you have done before on line 2 but instead of writing from "#ckeditor/ckeditor5-build-classic" you have to write from "adress of the build folder of your personnal build".
I hope it helped you.
I had this problem when I tried to add CKEditor and a plugin separately.
the easiest way is go to CKEditor Online Builder and choose what plugins and toolbar items you need then after five steps the code that you need to work with is generated.
Then you can use the file named ckeditor.js in build folder and this is almost all that you need.
1- Add CKEditorModule
#NgModule({
imports: [CKEditorModule],
...
}
2- Add the CKEditor tag to your template
<ckeditor
[editor]="Editor"
[(ngModel)]="notification.body"
(ready)="onReady($event)"
[config]="config"
></ckeditor>
3- import the customized CKEditor js file(that you should copy from build folder in downloaded customized CKEditor)in your component
import * as customEditor from './ckeditor';
4- Create a property in your component
public Editor = customEditor;
5- Add your configs
ngOnInit() {
this.config = {
toolbar: {
items: [
'heading',
'|',
'fontSize',
'fontFamily',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'highlight',
'|',
'alignment',
'|',
'numberedList',
'bulletedList',
'|',
'indent',
'outdent',
'|',
'todoList',
'link',
'blockQuote',
'imageUpload',
'insertTable',
'|',
'undo',
'redo'
]
},
language: 'en',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:full',
'imageStyle:side'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
},
licenseKey: '',
wordCount: {
onUpdate: stats => {
this.charactersLength = stats.characters
}
}
}
}
That's it :)
NOTE: We don't use #ckeditor/ckeditor5-build-classic any more!
Wrong:
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
Correct:
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
I had a similar problem. I solved it when I installed all modules of one version
I've face this issue when tried to use an editor on different pages few times.
Tried everything what is written above, nothing helped.
To solve the issue I used a React lazy loading for importing an editor.
Our users are copy pasting images into the editor (CKEditor 5), which is something we don't want to support.
The suggested fix for CKEditor 4 does not seem to work in 5.
How can I change the editor to disable this feature?
This is my config:
const editorConfig = {
toolbar: ['heading', 'bold', 'italic', 'bulletedList', 'numberedList'],
removePlugins: ['Image', 'ImageToolbar', 'ImageStyle', 'ImageUpload', 'ImageCaption'],
heading: {
options: [
{
model: 'paragraph',
title: 'Paragraph',
class: 'ck-heading_paragraph',
},
{
model: 'heading2',
view: 'h2',
title: 'Heading',
class: 'ck-heading_heading2',
},
],
},
};
If you want to completely disable the image feature, this is – make it impossible for images to be inserted/loaded in any way to the editor, then you should remove the Image, ImageToolbar, ImageStyle, 'ImageUpload, and ImageCaption plugins from your editor. The easiest way to achieve that is to use config.removePlugins. You can also check how to install plugins cause uninstalling is just the opposite process.
If you want to disallow inserting images, but still keep support for those images which are already present in the content, you need to handle it a bit differently. You'd have to block pasting/dropping them which can be done with the features exposed by the clipboard integration. You may also want to remove the ImageUpload plugin in thi case too. Finally, you probably won't need the imageUpload button in the toolbar, so you have to reconfigure it.