I integrated React Froala Editor to my website.
It's a simple project and I want to show paragraph select drop down.
But it doesn't work.
Is it related to version?
this.state = {
model: ``,
tags: [],
config: {
theme: 'foobar',
heightMax: 800,
height: 800,
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'fontFamily', 'fontSize', '|', 'paragraphStyle', 'paragraphFormat', 'align', 'undo', 'redo', 'html']
}
}
<FroalaEditorComponent
model={this.state.model}
onModelChange={this.onChange}
config={this.state.config}
/>
It seems that plugins are missing. Try to import plugins in your component:
import 'froala-editor/js/plugins.pkgd.min.js';
The issue might be with the froala version you are using.
Please update Froala version using
npm update froala-editor
All the options are available in the trail version too.
The same options worked for me with v3.1.0, check it below.
Froala editor
Related
I am trying to include langage locale support from my React components in Storybook using "react-intl", I added the following global types in "preview.js" as list of Languages supported to appear in the Storybook toolbar:
export const globalTypes = {
locale: {
title: 'Locale',
description: 'Internationalization locale',
toolbar: {
icon: 'globe',
items: [
{ value: 'en', right: '🇺🇸', title: 'English' },
{ value: 'de', right: '🇩🇪', title: 'Deutsch' },
],
dynamicTitle: true,
},
},
};
When I switch the langages it does not work always the default langage is showed, I need to know the code that can be used to implement the langage switcher and make it work with the code implemented within our React application in IdwIntlProvider.. I have to implement the functionality without using the react-intl Addon.
After installing the Material Table using React JS and mapping the data to it, this error will be displayed on the console while running the application. The reason for this is hard for me to imagine.
Below is the table I developed.
`
const empList = [
{ id: 1, name: "Neeraj", email: 'neeraj#gmail.com', phone: 9876543210, city: "Bangalore" },
{ id: 2, name: "Raj", email: 'raj#gmail.com', phone: 9812345678, city: "Chennai" },
{ id: 3, name: "David", email: 'david342#gmail.com', phone: 7896536289, city: "Jaipur" },
{ id: 4, name: "Vikas", email: 'vikas75#gmail.com', phone: 9087654321, city: "Hyderabad" },
]
const [data, setData] = useState(empList)
const columns = [
{ title: "ID", field: "id", editable: false },
{ title: "Name", field: "name" },
{ title: "Email", field: "email" },
{ title: "Phone Number", field: 'phone', },
{ title: "City", field: "city", }
]
<h5>
List of Services
</h5>
<MaterialTable
title="Employee Data"
data={data}
columns={columns}
/>
</div>`
I have also encountered the same bug and it seems that they haven't covered the case that no theming is provided. So, in order for the MaterialTable to work properly you need at least the following implementation:
import * as React from 'react';
import MaterialTable from 'material-table';
import { ThemeProvider, createTheme } from '#mui/material';
export class DataGridReact extends React.Component {
public render(): JSX.Element {
const defaultMaterialTheme = createTheme();
return(
<div style={{ width: '100%', height: '100%' }}>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<ThemeProvider theme={defaultMaterialTheme}>
<MaterialTable
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{ title: 'Birth City', field: 'birthCity', lookup: { 1: 'Linz', 2: 'Vöcklabruck', 3: 'Salzburg' } }
]}
data={[
{ name: 'Max', surname: 'Mustermann', birthYear: 1987, birthCity: 1 },
{ name: 'Cindy', surname: 'Musterfrau', birthYear: 1995, birthCity: 2 }
]}
title="Personen"
/>
</ThemeProvider>
</div>
);
}
}
So I figured out the solution. If your current version of material table is 2.0.3, just uninstall your version and re-install version 1.69.3. This will solve the issue, it worked for me. They have released the 2.0.3 version quite recently (10 days back) and it seems to have bugs and I guess that's the reason why you and me faced issues.
I tried all possible things but it seems to have a problem with the material-table package itself. I tried to install the v1.69.3 also, but then it showed some 19 errors all of which were from the Metrial-Table Package,
which shows that it is really buggy. With some other versions it showed some 20 errors all from the package itself, these errors were silenced after I reinstall #material-ui/core as mentioned on their website https://material-table.com/#/docs/install:~:text=npm%20install%20material%2Dtable%20%2D%2Dsave%0Anpm%20install%20%40material%2Dui/core%20%2D%2Dsave, But the problem that the table is not showing is still there.
Finally installing the very old release having dependency of react version older than 16, helped me.
You can run :
npm uninstall material-table
then run following:
npm install material-table#1.36.0 --save
and then check if it works,
if not try to run
npm install #material-ui/core --save
or
npm install in the terminal.
I hope it will work for you to help you get running, but I noticed though the table shows but it disturbs some functionlaity of material ui itself.
So i had the same problem on some pcs and not on others. Figured out the issue was due to the node js version. so the following worked for me:
changing to material-table version to 1.69.3 or 1.36.0 works but it was
messing up the styling of my other mui components. So shifted back to
material-table 2.0.3
I was using node version 14.19.0 so changed it to 16.5.1 using nvm.
delete the node modules completely shift+ delete
npm i to install all dependencies.(remember during this step the node
version should be 16.5 , so check once using node -v)
npm start
I updated mui's packages, using:
yarn upgrade #mui/icons-material #mui/material #mui/styles --latest since I was using material-table 2.0.2.
then don't froget to wrap the table with the ThemeProvider: ( THANKS #nikried FOR your answer, it was very helpful! )
import * as React from 'react';
import MaterialTable from 'material-table';
import { ThemeProvider, createTheme } from '#mui/material';
export function SimpleExample () {
const defaultMaterialTheme = createTheme();
return(
<div style={{ width: '100%', height: '100%' }}>
<ThemeProvider theme={defaultMaterialTheme}>
<MaterialTable
columns={columns}
data={data}
/>
</ThemeProvider>
</div>
);
}
}
if you have other problems, don't forget to check the peerDependencies of material-table inside node_modules, and try to use the same package's version montioned to avoid all the possible conflicts.
I'm currently designing a website with React where the user will work with a text editor. The text editor will already have text in it. The user will make some changes to the text and submit it. I would like to add a button that will show the user the differences between the original text and his new text, like Git but down to individual characters.
I'm currently trying to use Quill for that. I've found a lovely solution to my problem, but it's written in plain JavaScript. I've tried translating it to React by setting the Quill objects in the state:
const [quill_old, set_quill_old] = React.useState(new Quill('#old', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_new, set_quill_new] = React.useState(new Quill('#new', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
const [quill_diff, set_quill_diff] = React.useState(new Quill('#diff', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
}))
but when initializing the code it gets stuck on the "findDiff" function, on this line:
var oldContent = quill_old.getContents();
and returns an error:
TypeError: Cannot read property 'length' of undefined
Where "undefined" is "quill_old".
When trying to run the page without the function, the page shows properly, but I get multiple errors in the console like this:
quill Invalid Quill container #old
Does somebody know how to properly implement this solution in React? Or has a suggestion on some other library I can use?
Thank you for your time
I am using CKEditor4-react and want to add EasyImage plugin but without using cloudservice URL. As an alternate I have a folder hosted on server where it should upload the image. But it doesn't work.
I followed the documentation to use EasyImage plugin -
https://ckeditor.com/docs/ckeditor4/latest/examples/easyimage.html
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-cloudServices_uploadUrl
and as per it "cloudServices_uploadUrl" is mandatory for EasyImage plugin.
Can I provide an alternate URL which is hosted on our server so the images can be saved and fetched from there?
The old version of CKEditor4 was used in one of our legacy apps built in Knockout.js where it is being used in a similar way consuming the ckeditor/plugin/simpleuploads.
But i didn't find any such plugin in the current CKEditor4.12 version
config: {
toolbar: [
{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
{ name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
{ name: 'insert', items: ['Link', 'EasyImageUpload', 'Table'] },
{ name: 'styles', items: ['Styles', 'FontSize', 'Font', 'Format', 'TextColor', 'BGColor'] },
{ name: 'paragraph', items: ['NumberedList', 'BulletedList', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] }
],
height: 600,
width: 950,
extraPlugins: 'easyimage',
removePlugins: 'image',
//cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/', //this is a demo ckeditor cloud service URL
cloudServices_uploadUrl: '/app/Data' //this is folder hosted on our server which is accessible as localhost/app/data
},
Easy Image plugin for CKEditor 4 only supports Cloud Services for uploading images at the moment, so cloudServices_uploadUrl is mandatory and should point to CKEditor Cloud Services endpoint as the documentation says.
If you would like to upload and store images on your own server you may use CKFinder, your custom upload adapter or look for any 3rd-party solution which satisfy your needs.
I am using React Quill and want to remove colour from pasted text, so that quill should show text in black colour only. I have tried Clipboard module but not able to understand how to remove colour. Has anyone achieved this?
Thanks,
MSK
Quill has config option with a list of allowed formats.
Demo that whitelist only link and size:
https://codepen.io/anon/pen/xBWved
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
formats: ['link', 'size'],
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
List of all supported formats:
https://quilljs.com/docs/formats/
Yes, you can register the color module and whitelist:
const ColorAttributor = Quill.import("attributors/style/color");
ColorAttributor.whitelist = [];
Quill.register(ColorAttributor);