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})
}
};
Related
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'],
});
How can I create a basic template for all my pages?
I try to make a RadSideDrawer on all pages available. (With exception for some specific pages like login / registration etc.).
Currently I copy and past my Menu on all pages. What is the correct way handling this?
You haven't shown any code... So not sure how are you even including it. In app-root?
But you can set menu to false to disable it on some pages:
Example:
import { RadSideDrawer } from 'nativescript-ui-sidedrawer'
let sideDrawer = Application.getRootView()
sideDrawer.getViewById('sideDrawer')
sideDrawer.gesturesEnabled = false
And enable it programmatically this way.
After upgrading an angular nativescript project to the current versions of angular, typescript, tns, etc.. I'm getting a runtime error stating:
TypeError: Cannot set property 'actionBarHidden' of null at new
AppComponent...
The code that previously worked to hide the action bar looks like this:
import {Page} from "tns-core-modules/ui/page";
export class AppComponent implements OnInit, AfterViewInit {
constructor(page: Page) {
page.actionBarHidden = true;
}
}
Why is page null after the injection?
In the earlier versions the root was always a Frame, so by default there will be a Page.
But with the latest version, you are allowed to define flexible root components and any number of frames (page-router-outlet) within your app. So there won't be a default Frame / Page created within app component. Page can be injected only into the components those are loaded inside the page-router-outlet.
If TLDR the above link, the quick fix for me was to replace:
<router-outlet></router-outlet> with <page-router-outlet></page-router-outlet>
in app.component.html
Moving code to ngOnInit solved it for me
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>
Does anyone have a kendo UI scheduler example with angular 2? Is it compatible?
Thanks
Since there is some interest in this still you can create a component that is wrapped by the scheduler:
import { Component, ViewEncapsulation, ElementRef, AfterViewInit, OnDestroy, DoCheck, Input, Output, EventEmitter, IterableDiffers } from '#angular/core';
//you can import Jquery here if you want - i used it via CDN and not local node.
declare var jQuery: any;
scheduler: any;
schedulerControl: any;
#Component({
selector: 'scheduler',
template: `
<div></div>
`,
styleUrls: ['./scheduler.component.scss'],
encapsulation: ViewEncapsulation.None
})
constructor(
protected el: ElementRef,
) {
}
//you can also do #input and #outputs here if you want to build proper events around the scheduler components.
ngAfterViewInit() {
this.scheduler = jQuery(this.el.nativeElement.children[0]);
this.schedulerControl = jQuery(this.scheduler).data("kendoScheduler");
this.scheduler.kendoScheduler({.....put your scheduler options here ....});
Note:
You must import and use the right version of jquery - which is sadly still version 1.xxx
Note 2:
New versions now supports higher versions of Jquery - important to make sure they versions match with kendo requirements.
We are currently working on a project that has a very complex scheduling module.
At the momonet we are using Kendo UI scheduler wrapped with Angular2.
This is of course not a good solution as we are wrapping the Kendo JQuery implementation. It does work (and pretty well) but we will not continue with it if there will be no progress on native Angular2 implementation soon as it forces us to work "outside" Angular.
I think it's a shame that Telerik announcements on Angular2 are not clear enough. They put on their flag being leaders in Angular2 support long ago but it seems this is not happening as expected. We are already invested in Kendo in other projects(not Angular2) but we will have to choose something real soon.
If Kendo will not start showing any real progress we will not continue with it.
It is likely that the Angular2 kendo scheduler widget will be released in 2017. Here is a link to their roll out plan.
http://www.telerik.com/blogs/what-to-expect-in-2016-for-kendo-ui-with-angular-2-and-more
In the meantime to use the scheduler our team has just imported angular 1.x for the page running our scheduler in our angular 2.x app. Not ideal but you can also get just the kendo scripts you need to run the scheduler if you're worried about performance.
You may also want to look at using ngForward with angular 1.x in the meantime until the angular 2.x widget is available. Then convert your entire application over to angular 2.x when kendo releases the scheduler.