I want the editor to let the user change the editor's content text colour.
Here is my code:
import { CKEditor } from 'ckeditor4-react';
export default function Editor() {
let config={
toolbar: [
[ 'Source' ],
[ 'Styles', 'Format', 'Font', 'FontSize' ],
[ 'Bold', 'Italic' ],
[ 'Undo', 'Redo' ],
['TextColor', 'BGColor'],
[ 'About' ]
],
extraPlugins: 'easyimage',
removePlugins: 'image',
cloudServices_uploadUrl: 'https://33333.cke-cs.com/easyimage/upload/',
cloudServices_tokenUrl:
'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt'
}
let hello=()=>{
console.log("hoi");
}
return (
<CKEditor
config={config}
initData="<p>Hello from CKEditor 4!</p>"
onBlur={hello}
onInstanceReady={() => {
console.log('Editor is ready!');
}}
/>
)
}
However, the font colour setting button does not show in the Ckeditor4 toolbar.
Would you tell me how to solve the problem?
extraPlugins: ['easyimage', 'colorbutton'],
What the .....
Just add the following statement to enable the color button.
config.extraPlugins = 'colorbutton';
Related
I am using quill editor in my react project for editing text. I have deployed the react app on an ubuntu server using Nginx. There is a feature for adding color to text but this feature is not working for the hosted app. It works fine on my local machine. I am not able to figure out the cause of this issue.
Working on my local machine:
Screenshot 1
Not working for the hosted app:
Screenshot 2
import "react-quill/dist/quill.snow.css";
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
const modules = {
toolbar: [
[{ header: "1" }, { header: "2" }, { font: [] }],
[{ size: [] }],
["bold", "italic", "underline", "strike", "blockquote"],
[
{
color: ["red", "blue", "yellow"],
},
],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" },
],
["link", "image", "video"],
["clean"],
],
clipboard: {
// toggle to add extra line breaks when pasting HTML:
matchVisual: false,
},
};
const formats = [
"header",
"font",
"size",
"bold",
"italic",
"underline",
"strike",
"blockquote",
"list",
"bullet",
"indent",
"link",
"image",
"video",
"color",
];
const QuillNoSSRWrapper = dynamic(import("react-quill"), {
ssr: false,
loading: () => <p>Loading ...</p>,
});
export default function ShowQuill(props) {
const [description, setDescription] = useState("");
const [editMode, setEditMode] = useState(false);
useEffect(() => {
setDescription(props.description);
}, [props]);
const onDescSave = () => {
setEditMode((prevState) => !prevState);
if (props.type === "carer_support") {
if (editMode) {
props.onDescriptionSave(props.index, description);
}
} else if (props.type === "carer_story") {
if (editMode) {
props.onDescriptionSave(
props.carer_story_index,
props.index,
description
);
}
} else if (props.type === "gcsp") {
if (editMode) {
props.onDescriptionSave(props.index, description);
}
}
else if (props.type === "behaviour") {
if (editMode) {
props.onDescriptionSave(description, props.wh_section_index, props.behaviour_index, props.sub_section_index, props.sub_header_index, props.sub_h_sub_sec_index);
}
}
};
return (
<>
<button
onClick={onDescSave}
type="button"
className="btn btn-success m-2"
>
{editMode ? "Save" : "Enable Edit Mode"}
</button>
{editMode ? (
<QuillNoSSRWrapper
theme="snow"
modules={modules}
formats={formats}
placeholder="compose here"
value={description}
onChange={setDescription}
/>
) : (
<div dangerouslySetInnerHTML={{ __html: description }} />
)}
</>
);
}
I got the same issue when I upgrade my nextjs project from 11 to 12.
according to this issue, it seems to be related to swcMinify property in next.config.js.
everything works fine when I removed this line from next.config.js
// swcMinify: true
hope it works for you too.
I have tried to get showCheckbox to work with no success.
I setup this installed "react-data-grid": "^7.0.0-beta.12",
The Checkbox column simply does not appear.
Can anyone help?
Code that I used in App.js
<ReactDataGrid
columns={this.columns}
rows={setGlobalMsgList}
rowsCount={this.props.setGlobalMsgList.length}
// onRowClick={this.onRowClick}
onGridSort={this.handleGridSort}
rowSelection={{
showCheckbox: true,
enableShiftSelect: true,
onRowsSelected: this.onRowsSelected,
onRowsDeselected: this.onRowsDeselected,
selectBy: {
indexes: this.state.selectedIndexes,
},
}}
emptyRowsView={EmptyData}
/>
const columns = [
SelectColumn,
{ key: 'id' , name: "ID", frozen:true } ]
simply import the SelectColumn from
import {SelectColumn} from 'react-data-grid'
I am using react-leaflet and GeoJSON to indicate an area on the map. I want to add onEachFeature in props for the GeoJSON so that when it clicks or hover on the map some info will pop(for example: feature.geometry.type). I will give an example below of what I am trying to achieve:
import React from 'react';
import { MapContainer, TileLayer, LayersControl, GeoJSON } from 'react-leaflet'
const { BaseLayer } = LayersControl;
const geoData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-142.734375,
-6.315298538330033
],
[
158.203125,
-6.315298538330033
],
[
158.203125,
67.47492238478702
],
[
-142.734375,
67.47492238478702
],
[
-142.734375,
-6.315298538330033
]
]
]
}
}
]
}
export default class GeoExample extends React.Component {
onEachFeature(feature, layer) {
layer.bindPopup(feature.geometry.type);
}
style() {
return ({
weight: 2,
opacity: 1,
color: "blue",
dashArray: "3",
fillOpacity: 0.7
});
}
render() {
return (
<div>
<MapContainer center={[42.09618442380296, -71.5045166015625]} zoom={2} zoomControl={true}>
<LayersControl position='topright'>
<BaseLayer checked name='OpenStreetMap.Mapnik'>
<TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"/>
</BaseLayer>
<GeoJSON data={geoData} style={this.style} onEachFeature={this.onEachFeature}/>
</LayersControl>
</MapContainer>
</div>
)
}
}
you can try to compile it, the style prop is working as it should, the onEachFeature is my problem, because I am hovering and clicking over and nothing seems to pop.
Versions in package:
"react-leaflet": "^3.0.5",
"react": "^15.0.0 || ^16.0.0 || ^17.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0",
after hours of investigating why it is not working locally in my machine, the problem was I included wrong css for the leaflet and if I would guess something with the z-index was the problem, included the right css and everything works thanks for the support :)
i want users to bold, highlight text only but not text typing
i want to disable text typing from ckeditor 5
i am using ckeditor 5 with react.js to build writing plateform but i want from users to use bold, highlight, comment features and stop users from typing extra text
toolbar: [
"undo",
"redo",
"heading",
"bold",
"italic",
"link",
"bulletedList",
"|",
"imageUpload",
"insertImage",
"insertImageFromUnsplash",
"blockQuote",
"code",
"codeBlock",
// "insertTable",
"mediaEmbed",
"removeFormat",
],
config.toolbar = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }#something like this
]
i tried to remove all plugin from toolbar but it did not stop from adding and typing extra text
image
Try 'restricted editing mode'
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Bold, RestrictedEditingMode, ... ],
toolbar: [ 'bold', '|', 'restrictedEditing', ... ],
restrictedEditing: {
allowedCommands: [ 'bold' ]
}
} )
I am using "ckeditor4-react" editor to add content for an email. I want to add tokens or tags list in it. Is this possible to add custom token select list inside toolbar.
package link:: https://github.com/ckeditor/ckeditor4-react
Please suggest how can I add custom toolbar select list field inside react ckeditor 4.
You can define
const editorToolbar = [
{
name: "basicstyles",
groups: ["basicstyles", "cleanup"],
items: [
"Bold",
"Italic",
"Underline",
"Strike",
"Subscript",
"Superscript",
"-",
"RemoveFormat",
],
},
{
name: "paragraph",
groups: ["list", "indent", "blocks", "align", "bidi"],
items: ["NumberedList", "BulletedList", "-", "Outdent", "Indent"],
},
{ name: "links", items: ["Link", "Unlink"] },
{
name: "insert",
items: ["Image", "SpecialChar"],
},
];
and then use that in config
<CKEditor
name="editor"
config={{toolbar: editorToolbar}}
/>