CKEditor5 react component - add plugins problems - javascript

In adding the CKEditor5 component to my React application, I discovered that I need to add more plugins - which I have done, adding and rebuilding editor per docs, specifically adding:
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment';
import Font from '#ckeditor/ckeditor5-font/src/font';
import Highlight from '#ckeditor/ckeditor5-highlight/src/highlight';
and rebuilding. First issue:
I have seen a few places where this:
Array.from( editor.ui.componentFactory.names() );
should give me a list of the toolbar items so I can verify that I have what I need.. I updated to use the name of the editor that I am using, so:
Array.from( ClassicEditor.ui.componentFactory.names() );
Which fails because there is no "ui" in ClassicEditor... what am I missing here?
Second - now that I have installed plugins, and rebuild ckeditor.js, I'm trying to make sure that I add this new stuff to my existing React project - there is a public/ckeditor directory in there. I assumed that I should take the ckeditor.js from the "ckeditor5-build-classic/build/" directory, and put it into public/ckeditor. But where do I get the actual plugins? there seems to be a set in ckeditor5-build-classic/node_modules/#ckeditor, but that didn't seem to work. Thoughts?

I have seen a few places where this:
Array.from( editor.ui.componentFactory.names() );
should give me a list of the toolbar items so I can verify that I have what I need.
I updated to use the name of the editor that I am using, so:
Array.from( ClassicEditor.ui.componentFactory.names() );
ClassicEditor is a class, not an instance.
You have to do sth like this:
ClassicEditor.create( el, config ).then( editor => {
console.log( Array.from( editor.ui.componentFactory.names() ) );
} );
to get all available toolbar buttons.
Second - now that I have installed plugins, and rebuild ckeditor.js, I'm trying to make sure that I add this new stuff to my existing React project - there is a public/ckeditor directory in there. I assumed that I should take the ckeditor.js from the "ckeditor5-build-classic/build/" directory, and put it into public/ckeditor. But where do I get the actual plugins? there seems to be a set in ckeditor5-build-classic/node_modules/#ckeditor, but that didn't seem to work. Thought
When you build an editor outside of the React component, all plugins you require should be bundled to the build so all you need is to copy the built editor to the React project. It's described here.

Related

How do I configure Prettier format usable React code?

So I started learning React from this (https://youtu.be/Dorf8i6lCuk?t=1946) tutorial and got stuck trying to save a file. The video recommends getting prettier and I did and then when I save the file it auto-formats code into something that doesn't work.
eg:
as per the suggestion a jsx file:
as per suggestion 2: already in Javascript React:
As per the suggestion in the solutions:
Try going to settings > Extensions > uncheck - Enable/disable checkbox. Or Remove all together.
Change code to: (Notice the differences in my code to yours, your div tags are open and return does not have the divs wrapped in ().
function App() {
return (
<div>
Hello!
</div> //this was giving you the error before
)
}
export default App
I'd also double check your version of react that you are running.
If the version is different from the Tutorials, this could cause issues.
This might help:
Prettier's format on save messes up .jsx files
Following #AlexB801 's advice I have fixed the thing. It turns out you must NOT change the extension to .jsx but only change the formatter. Attaching an image. Also another thing to be noted here is that this was not an issue with Prettier. like so:

How to import CSS files to React JS application?

I am creating an application, created multiple CSS files but those are not able to import.
I tried by installing css-loader and style-loader. But it doesn't help
Please look below picture, I have Burger.css file. but it not visible to import
VS Code by default doesn't autocomplete all file types. If you write import ./Burger/Burger.css or import ./Burger/BurgerIngredient/BurgerIngredient.css in your Layout.js file, your css files will be loaded fine.
If you want to use autocomplete for all files in VS Code, you can use this extension.
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
Without Extension
With Extension
Ok since you confirmed that your ./Layout.css import does not work, you should not name your import when it's about a css file. Doing :
import './myFile.css';
is enough to apply your css.
Note that css is global in React, so you might want to use styled component or encapsulate your css to prevent side effect on other components).
Now, if you really want to add style the way you tried to, there is the style attribute which accepts an object. So you could do:
<div style={{backgroundColor: 'red'}}>Hello World !</div>
Note that the css properties are written in camelCase.
Your file structure appears to me to be...
-Burger
--BurgerIngredient
----Burger.css
--Layout
----Layout.css
Your primary application, from what it appears here, is in /Burger. Considering that, when you type import, you see the dropdown appear, showing helpful suggestions, and it lists...
-../Burger/BurgerIngredient/...
As a possible, valid location. In that case, why don't we try importing css, by typing out...
import burgercss from '../Burger/BurgerIngredient/Burger.css';
Note, for instance, Burger.css wouldn't show up until you select BurgerIngredient, because that's its conntaining folder.

after vscode format code the program doesn't work [duplicate]

I've the following snippet in my index.js
class App extends Component {
render() {
return ( <div style = { styles.app } >
Welcome to React!
</div>
)
}
}
The code works, but every time I save (ctrl+s) visual studio format the jsx like that:
class App extends Component {
render() {
return ( < div style = { styles.app } >
Welcome to React!
<
/div>
)
}
}
How can I solve this? thanks
In the end what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
I'm publishing it here for future reference since I didn't find any documentation on this topic.
In addition to the above. If you click 'Configure File Association for .js' you can set all .js files to Javascript React
change vscode preferences settings > user settings below:
"files.associations": {
"*.js":"javascriptreact"
}
You can prevent VSC from incorrectly formatting your JSX by adding an association in your settings.json
Code > Preferences > Settings
In the settings window search for associations, click edit in settings.json and then add:
"files.associations": {
"*.js": "javascriptreact"
}
Alternatively, saving the file with a .jsx extension resolves this in vscode.
I had the same challenge and I am hoping to discover a better way of handling this issue in vscode.
I noticed your suggested work-around has to be done each time you open the react file with an extension of .js
Open the Visual Studio Code Settings. Refer the image below to see how to navigate to the settings.
Once the settings tab is open. If you want to make the settings changes for all the projects then select the User sub tab, if only for current project then select the Workspace sub tab.
type "file associations" in the search text box and press Enter.
Click on add item.
set Item : *.js
set Value : javascriptreact
Above changes will start associating all *js files in the project as javascript React files.
Next open any .js file in your project and right click and select Format Document. If you have multiple formatters then associate your favorite formatter. I have used Prettier to handle my formatting.
Install Prettier (if not installed by default) and try to add this to your user or workplace settings:
"prettier.jsxBracketSameLine": true
Do not put linebreak between return and the returned JSX expression.
Trigger autoformat (Alt+Shift+F) and check if works.
I struggled with this but finally found a solution. This is my settings.json
{
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"workbench.startupEditor": "welcomePage",
"window.zoomLevel": 1,
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html"
},
"editor.formatOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.minimap.enabled": false,
"workbench.iconTheme": "vscode-icons",
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
],
"prettier.jsxSingleQuote": true,
"prettier.singleQuote": true
}
I added
"beautify.ignore": ["**/*.js","**/*.jsx"]
Make sure you dont have multiple javascript formatters enabled in your current workspace. (You have to disable the rest of them for your current workspace).
react-beautify mostly does the magic but fails if you have some other JS formatter/beautifier already installed.
In my case, I had react-beautify and JS-CSS-HTML Formatter extension installed. I had to disable the JS-CSS-HTML Formatter for my current workspace.
Here is what worked for me-
I clicked on the Language mode (Javascript React) at the bottom of the screen
Then chose the Configure React Javascript Language based setting option
Then changed the javascript react default formatter to prettier as shown in the pic.
That pretty much did it for me after I saved the React file.
I just added all the combinations mentioned above.
added this
"files.associations": {
"*.js": "javascriptreact"
}
added this also
"beautify.ignore": ["**/*.js","**/*.jsx"]
Deleted additional js formatting
installed prettier
turn ON prettier and formatting
You can install an extension like react-beautify that helps you format your jsx code.
It is found here
This extension wraps prettydiff/esformatter to format your javascript, JSX, typescript, TSX file.
I had to disable the JS-CSS-HTML Formatter extension in VSC. only solution to this problem
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
include :
JavaScript
TypeScript
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular
GraphQL
Markdown
YAML
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
I had similar problem, then I found out it was caused by 'beautify' extension. After I uninstalled the extension, everything is working fine.
After reading many great suggestions and workarounds, I discovered that I could simply place my mouse arrow down over the bright blue horizontal bar at the bottom of VSCode editor window - right click - which opens a popup list window - and deselected = "Editor Indentation".
You can double click JavaScript in the Status Bar at the bottom of VSCode, and then change the format from JavaScript to React (Choose React in the Select language mode to associate with '.jsx')
add this in your .js code,
/* prettier-ignore */

CKeditor v4 with RTL and LTR on the same page

I have multiple instances of CKeditor 4 on a page. One with an English translation, one with French and one with Arabic. I have tried tweaking to config file upon each firing of the editor instance. However, it always displays the last configuration used and applies to all the textareas. I have been using:
CKEDITOR.config.contentsLangDirection = 'rtl';
What I really need to do is use something that manipulates just that instance rather than the global config.
You can create a custom config file for each instance of CKEditor you have in the page.
Then reference the custom config file like this:
CKEDITOR.replace( 'editor1', {
customConfig: '/custom/ckeditor_config_ltr.js'
});
CKEDITOR.replace( 'editor2', {
customConfig: '/custom/ckeditor_config_rtl.js'
});
Then you can define your language direction in the different config files.
You can find more here: CKEditor support

ckeditor and codemirror, conflicts with plugin with same name

I am trying to use both ckeditor and codemirror
The problem is because ckeditor has a plugin also called codemirrow
Is there anyway to make them work together?
Basically... rename one of the plugins. Change directory name and the name of registered plugin in the line:
CKEDITOR.plugins.add( someNewName, { ... } );
Then check whether the plugin refers to itself somewhere inside of own body via editor.plugins. Correct it if necessary (most likely there's nothing like that).
If there are some dialogs with redundant names, repeat the process by changing:
CKEDITOR.dialog.add( someNewName, function( editor ) { ... } );
Finally, change your configuration file so it loads the renamed plugin. That's all. That was easy, wasn't it? ;)

Categories

Resources