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.
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`,
},
},
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'],
});
I can't customize toolbar buttons in Magnolia's RichTextField
in Yaml file add configJsFile: /ckeditor/configJsFile.js pointing to config file under resource folder in java module project
- name: text
class: info.magnolia.ui.form.field.definition.RichTextFieldDefinition
configJsFile: /ckeditor/configJsFile.js
i18n: true
once configJsFile.js added RichTextField start showing up all imaginable buttons and it is too many
I tried to remove some buttons groups in configJsFile.js even comment out all content inside config funtion CKEDITOR.editorConfig = function( config ) { ... } that's make any effect.
Any idea how I can configure toolbar content in Magnolia's RichTextField?
Here is original configJsFile.js taken from Magnolia doc site
Which version of Magnolia are you using?
Worst case scenario you can change the default settings from
'ckeditor/config-default.js'
Hope that helps,
Cheers,
I was wrong assuming that magnolia pointed to java resources.
Once I put CKEditor config file into folder from magnolia properties I've got what I wanted
see magnolia.resources.dir=${magnolia.home}/modules
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'd like to activate the spellcheck plugin in CKEditor but it seems that IBM has disabled the native plugin.
Looking at the config.js in the data\domino\html\ckeditor directory on the Domino server I see this code describing a plugin called lotusSpellChecker but enabling this plugin doesn't seem to do anything.
config.lotusSpellChecker = {
restUrl:'',
lang:'en',
suggestions:'5',
format:'json',
highlight: { element : 'span', styles : { 'background-color' : 'yellow', 'color' : 'black' } },
preventCache: true
};
Does anybody know how to activate this plugin and why the native one has been disabled?
I've only successfully activated the built-in spell checker by downloading the latest CKEditor release, copying it to the server and using that on an Xpage. See my post on the XPage forum for details:
http://www-10.lotus.com/ldd/xpagesforum.nsf/topicThread.xsp?action=openDocument&documentId=A198C7153DBD84348525798B0056DC6B
I've tried activating it in the default CKEditor installation but couldn't get it to work.
I can't make an official statement as to why it is disabled, but it is most likely for licensing reasons.
CKEditor uses Web Spell Checker. Details are here.
http://www.webspellchecker.net/
The plugin can be activated by making some changes to the config.js file located in the ckeditor folder. Uncomment the folowing block:
//Example Lotus Spell Checker config.
/*
config.extraPlugins += ',lotusspellchecker';
config.lotusSpellChecker = {
restUrl:'',
lang:'en',
suggestions:'5',
format:'json',
highlight: { element : 'span', styles : { 'background-color' : 'yellow', 'color' : 'black' } },
preventCache: true
};
*/
Note: you need to provide the restUrl of whatever spell checking service you are going to use. Instructions here only solve the "how to activate plugin" question.
You also need to provide some Dojo properties in your rich text control:
This one adds the spell check button (LotusSpellChecker) to the toolbar.
Property name: toolbar
Property value: var myToolbar = "[['Format', 'Font','FontSize'], \n"
+"['Bold','Italic','Underline','Strike','-','TextColor','BGColor','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','NumberedList','BulletedList'], \n"
+"['Indent','Outdent'], \n"
+"['Subscript','Superscript'], \n"
+"['RemoveFormat', '-','MenuPaste','-','Undo','Redo','Find','LotusSpellChecker','-','Image','Table','Link','Flash','-','PageBreak','HorizontalRule','SpecialChar','Blockquote','Smiley','ShowBlocks'], \n"
+"['BidiLtr','BidiRtl'], \n"
+"['Maximize']]";
return myToolbar;
This one activates the plugin.
Property name: extraPlugins
Property value: lotusspellchecker
This is what you get:
Domino 9.0.1 FP2 adds spell checker functionality through the default CKEditor toolbar and through the 'IbmSpellChecker" toolbar button.
I have an update on this. SPR PHAN8R2GRE is created to look at including this functionality in a later release. In case you need to add a customer report to it.
All modern browsers come with spell checking capabilities which should activate for you on the field.