There are five ckeditor5 ready-made builds available: classic, inline, balloon, balloon-block and document. I would like to use the balloon-block layout, but I want to build it from source (as is recommended) for integration into my Vue 2.x app (with webpack and Vue CLI 3). The docs for building from source use the classic editor as an example, and instead of using the pre-built package #ckeditor5/ckeditor5-build-classic, it says to import the source package #ckeditor5/ckeditor5-editor-classic and use that as a base to which you can add all the plugins you want.
The balloon layout has its own source package #ckeditor5/ckeditor5-editor-balloon which presumably can be used similarly, but I can't find any source package for balloon-block. If I'm supposed to use the ...editor-balloon package as a base, are there any docs I can use that will show me how to build my own balloon-block from source?
I've just learned that the hidden toolbar accessed from the gutter is actually a plugin calle BlockToolbar, so presumably I do just have to use the editor-balloon package as the source base and include/configure that plugin. If someone else doesn't provide a more complete example with sample config, I'll post an answer with my own solution when I have something. In the meantime, the docs here for the block toolbar plugin has lots of info on how to set it up.
You need to install the package '#ckeditor/ckeditor5-ui', which should already be a dependency of '#ckeditor/ckeditor5-editor-balloon' itself and import the plugin 'BlockToolbar' and use it in your 'create()' method call. Like so:
import BalloonEditor from '#ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import { BlockToolbar } from '#ckeditor/ckeditor5-ui';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
BalloonEditor
.create(document.querySelector('#editor'), {
plugins: [BlockToolbar, Essentials, Paragraph], // BlockToolbar added here!
toolbar: ['bold', 'italic'],
blockToolbar: ['heading', 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList'],
});
Related
Summary
The project works without issues with SASS modules.
Trying to use SASS inside src/cms/cms.js for the purposes of customizing the CMS admin preview panel breaks the project.
Using regular CSS or CSS modules works without any problem for the admin preview panel.
I've checked for this issue on GitHub, the Netlify CMS forums and documentation, Stack Overflow, and everywhere that Google has led me.
Describe the bug
My project uses Netlify CMS and Gatsby. I have no issues with SASS when working on the project. The issue only comes up when I try to use SASS inside components that I want to use as custom preview with CMS.registerPreviewTemplate() for the CMS Admin panel at http://localhost:8000/admin/.
I've setup up everything without any issues and there are no problems when I use CSS modules.
The problem is that my project uses SASS and when I just rename import * as styles from PreviewTesting.module.css to import * as styles from './PreviewTesting.module.scss' inside PreviewTesting.jsx I get this error:
ERROR Failed to compile with 1 error 6:03:26 PM
⠀
error in ./src/templates/previewTesting/PreviewTesting.module.scss
⠀
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
https://webpack.js.org/concepts#loaders
> .previewTestingDescription {
| background-color: lightgoldenrodyellow;
| font-family: 'Montserrat-Regular', sans-serif;
Also, just adding import '../styles/global.scss' inside the src/cms/cms.js file causes the same error that prevents the build from happening.
I've tried updating and downgrading any package I could think of and this did not help. I've also tried to register the files as preview styles with CMS.registerPreviewStyle(file); and I've tried Raw CSS with https://www.netlifycms.org/docs/beta-features/#raw-css-in-registerpreviewstyle. None of these solved the issue.
To Reproduce
Steps to reproduce the behavior. For example:
Create a React component.
Import a SASS module component into the React component.
Register that component as a preview component with CMS.registerPreviewTemplate('name', PreviewTesting) inside src/cms/cms.js
An alternative way to reproduce:
Add import '../styles/global.scss' inside the src/cms/cms.js. global.scss hold regular SASS things like imports for fonts, variable and other such things.
Expected behavior
The project should run and apply the CSS styling to the preview panel at http://localhost:8000/admin/
Screenshots
Applicable Versions:
"gatsby": "^4.9.0"
"gatsby-plugin-netlify-cms": "6.25.0"
"gatsby-plugin-sass": "5.25.0"
"netlify-cms-app": "^2.15.72"
"sass": "1.49.9"
"gatsby": "^4.9.0" (updated to the latest version "4.25.1")
Node.JS version:
Did not work on v16, updated to v18.12.1, still does not work.
CMS configuration
collections:
- name: "name"
label: "names"
label_singular: "name"
description: >
Test
create: true
slug: "{{category}}-{{slug}}"
fields:
- { name: title, label: Title }
- { name: subtitle, label: Subtitle, required: false }
Additional context
Any help would be very appreciated.
A friend of mine provided me with a solution:
The plugin order in gatsby-config.js actually matters in this case. gatsby-plugin-sass must come before gatsby-plugin-netlify-cms
The plugin segment in gatsby-config.js should look like this:
{
resolve: 'gatsby-plugin-sass',
options: {
additionalData: '#use "/src/styles/global" as *;',
sassOptions: {
includePaths: ['src/styles'],
},
},
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
After the release of Strapi 4, the CKEditor library for Strapi is no longer supported. And when trying to follow the documentation it is also not very clear if it is with component injection or some other procedure.
Strapi 4 Docs
WYSIWYG editor To change the current WYSIWYG, you can either install a third-party plugin, or take advantage of the bootstrap lifecycle (see Admin Panel API).
In the Strapi 4 presentation, Rémi de Juvigny, uses component injection, but it is only for the sidebar, not for changing any specific content-type collection.
Has anyone made any progress with this new version of Strapi and CKEditor?
On Strapi V4 Now we should use:
app.addFields({type:'wysiwyg',Component:Editor})
insted of
strapi.registerFields({type:'wysiwyg',Component:Editor})
Eg.
import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import Initializer from './components/Initializer';
import Editor from './components/Editor';
const name = pluginPkg.strapi.name;
export default {
register(app) {
app.registerPlugin({
id: pluginId,
initializer: Initializer,
isReady: false,
name,
});
app.addFields({type:'wysiwyg',Component:Editor})
}
};
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>
i need to have all ckeditor plugins in RTE of Blog component in AEM,
like http://ckeditor.com/
but the current Blog component in AEM have limited plugins. please check below link. am using AEM 6.2 version
http://localhost:4502/content/community-components/en/journal.html
is this possible ? if yes can some one guide how to do this.
Thanks in advance.
You need to overlay /libs/social/commons/components/richTextEditor component. Depending on the libraries you are using (jQuery, etc.) you will need to modify the document.ready to load the plugin using the following JS
CKEDITOR.plugins.addExternal( [plugin-name], '/etc/clientlibs/path-to-plugin', 'plugin.js' );
The plugin can then be registered with CKEDITOR as follows:
var ckEditor = CKEDITOR.replace( [editor-placeholder-element], {
toolbar: [{ name: '[toolbar-name]', items: [ '[plugin-name]' ] }],
extraPlugins: '[plugin-name]');
The [plugin-name] is the plugin identifier for your plugin based on
the library.
The library for plugin is normally stored under
/etc/clientlibs or your component.
You can chose an existing toolbar your plugin interface icon or you can create a new one.
The plugin and all it's dependencies must be initialised before the CKEDITOR is instantiated or alternatively your plugin must be able to work out its dependencies at runtime.
Hope this helps.
Sorry for the obfuscated question, I'll elaborate my problem. I am currently developing a single page app in Aurelia, and I found a lib I want to try out: https://github.com/hootsuite/grid. I did the normal jspm routine:
jspm install github:hootsuite/grid
which installs successfully and adds the following to the systemjs config:
map: {
"hootsuite/grid": "github:hootsuite/grid#1.0.0",
The package file looks like this:
define(["github:hootsuite/grid#1.0.0/src/gridList.js"], function(main) {
return main;
});
Which enables me import the module as expected:
import * as grid from 'hootsuite/grid';
So far so good, but the js file referenced by the module is not the one I am interested in (src/gridList.js), the src folder also contains a jquery plugin named "jquery.gridlist.js" which is the file I actually want to resolve. I managed to "fix/hack" it by adding an additional AMD module definition in the module file (grid#1.0.0.js):
define('gridlist', ["github:hootsuite/grid#1.0.0/src/gridList.js"], function(main) {
return main;
});
define(["github:hootsuite/grid#1.0.0/src/jquery.gridList.js", "github:hootsuite/grid#1.0.0/src/gridList.js"], function(main) {
return main;
});
This is not a viable solution because the jspm_modules are not a part of source-control, thus it will have to be patched manually for every dev. So, whats the best approach for this type of problem? Or which features am I missing out on which removes the problem entirely?