I upgraded my #ckeditor/ckeditor5-react component to the latest version. I am using a custom editor using the online builder tool.
The editor is displayed successfully and the data content is in the editor. However, the toolbar is missing.
Is there something different in the new version that we need to enable the toolbar onload??
After reading the documentation more thoroughly, I found that I had to add the toolbar to the DOM manually.
For reference:
[1]: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/react.html
Related
I have been trying to make my own component in React to be used in AEM. I am currently following this tutorial here: https://www.youtube.com/watch?v=nec_MDPzMYk&t=86s
I am able to build the component and deploy it to my local instance of AEM, but I am unable to drag the component to the editor in AEM. The only components I seem to be able to drag and drop are Container and Text. I've added a public Dropbox folder with three screenshots to help describe my issue: https://www.dropbox.com/sh/aiifh6aahf28esu/AADZxqo1apo2NLXquz1ZNhbia?dl=0
I have edited the SPA Page policy in AEM (see first screenshot: “edit template”) to include all of the components listed here, including the new component (Basic Component) that I have added with React (see next screenshot: available components), yet when I go to drag the components to the editor, I can’t do that (see screenshot: editor).
Does anyone see what I could be doing wrong?
In case you will click on 'Drag Component here' and try do add ur component via '+' is your component in the list or not? Might be that you have changed the policy for a different responsive grid.
Also check the error.log, might be there you will find some clues. (http://:/system/console/slinglog/tailer.txt?tail=1000&grep=*&name=%2Flogs%2Ferror.log)
And component should have _cq_dialog or_cq_editConfig. Only in this case AEM allows to add components
I am trying to integrate Quill rich text editor in my angular project. When it displays the editor the toolbar icons are very very big. Please see the below image.
I am not getting what I am doing wrong.
Thanks,
Sanket Shah
You have to add the css files quill.core.css, quill.bubble.css and quill.snow.css
also add quill.min.js.
I'm trying to implement a blog app in my React App. I'm seeking for a very complete text editor allowing to handle very globally the properties of the text. I have though of DraftJS but seems it isn't allowing a very big set of settings parameters.
Existing a more complete ReactJS's text editor ?
Update:
React Draft Wysiwyg seems pretty good and easily customizable,
Any hints would be great,
Thanks
I have a tab setup similar to this code. I need to change the active tab programmatically.
I'm trying to do like it is documented on bootstrap's official documentation but it doesn't work.
Try using the native javascript document.getElementById(tabId).click();.
Has anyone tried to port DraftJs with React Native. Any ideas how to do it?
https://github.com/facebook/draft-js/issues/138
As the link showing, It's a hard work to implement a complete new native version editor with current draft model. Some hard points are I can see:
Keyboard and cursor control. editable content did much help for it in Draft. editable content is already supported by browsers.
Draft model is composed with blocks and inline-things. It's match the HTML model, making map Draft model to DOM easily. But iOS/Android layout not composed with block and inline-things.
H5 has flex and powerful style control. You can use all CSS styles in Draft with the help of style mappers, leaving the render work to browsers. But how it work in native? Android/iOS SDK not provide such powerful style control to the views.
After all, Draft is announced as a Editor Framework, not a ready to use editor. It's OK to limit your editor functions and have a native version, but I'd rather to embed a WebView to have a really powerful H5 Editor.