I am using React-draft-wysiwyg and I simply want to remove some items from the default list. I did something like this:
<Editor editorState={editorState}
wrapperClassName="custom-editor-wrapper"
editorClassName="custom-editor-className"
toolbarClassName="toolbar-class"
onEditorStateChange={onEditorStateChange}
toolbar={{
options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'history'],
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
image: {uploadEnabled: true, uploadCallback: uploadImageCallBack, previewImage: true,
alt: { present: true }, defaultSize: {width: '700px', height: '400px'}},
}}
/>
This is not working. The Editor is still showing all the toolbar options. What Am I doing wrong?
Related
I used react-draft-wysiwyg editor. It is working fine in desktop mode, but in mobile view it has a small issue. When I click on a mention suggestion, it doesn't get clicked at once. Also, if I first clicked a suggestion, I am not able to select that suggestion.
<Editor
readOnly={readOnly}
editorState={editorState}
editorClassName="editorClassName"
onEditorStateChange={onEditorStateChange}
handlePastedFiles={handlePastedFiles}
onChange={e => feedStateChange(e)}
placeholder={placeholder}
ref={editorReference}
onBlur={() => {
removeCls()
}}
mention={{
separator: ' ',
trigger: '#',
suggestions: data,
}}
toolbar={{
options: ['inline', 'textAlign', 'list', 'embedded'],
inline: {
options: ['bold', 'italic', 'underline'],
italic: { className: 'i-italic-icon' },
bold: { className: 'i-bold-icon' },
underline: { className: 'i-underline-icon' },
},
list: {
options: ['unordered', 'ordered'],
unordered: { className: 'i-unordered-icon' },
ordered: { className: 'i-ordered-icon' },
},
textAlign: {
options: ['left', 'center', 'right', 'justify'],
left: { className: 'i-left-icon' },
center: { className: 'i-center-icon' },
right: { className: 'i-right-icon' },
justify: { className: 'i-justify-icon' },
},
blockType: {
inDropdown: false,
options: ['H1', 'Blockquote'],
className: 'i-bloctype-icon',
},
image: {
urlEnabled: true,
uploadEnabled: true,
previewImage: true,
// alt: { present: true, mandatory: false },
uploadCallback: uploadImageCallBack,
inputAccept: 'application/zip,application/pdf,text/plain,application/vnd.openxmlformatsofficedocument.wordprocessingml.document,application/msword,application/vnd.ms-excel,image/gif,image/jpeg,image/jpg,image/png,image/svg'
},
embedded: {
className: 'i-embedded-icon',
embedCallback: link => {
const detectedSrc = /<iframe.*? src="(.*?)"/.exec(embed(link));
return (detectedSrc && detectedSrc[1]) || link;
}
}
}}
/>
I am trying to customize my draft js block component by using customBlockRenderFunc
my code:
<Editor
wrapperStyle={wrapperStyle}
editorStyle={editorStyle}
customBlockRenderFunc={muiBlockRenderer}
editorState={editorState}
onEditorStateChange={this.onEditorStateChange}
toolbar={{
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
image: {
uploadCallback: this.uploadImageCallBack,
alt: { present: false, mandatory: false },
},
}}
export const muiBlockRenderer = (block) => {
if (block.getType() === "header-one") {
return {
component: EditorSectionTitle,
editable: true,
};
}
export const EditorSectionTitle = (props) => {
return <h1>{props.block.text}</h1>;
};
the problem is when choose h1 and start writing, it writes like this
olleh
/RTL/
How to fix that,
any help
I'd like to use this prop to insert some paragraph. I've tried triggering some "Space" event but it changes anything.
Here's my code:
<Editor
editorState={editorState}
toolbarClassName={style.toolBarStyle}
wrapperClassName='wrapperClassName'
editorClassName={style.editorInputArea}
toolbar={{
options: [
"inline",
"fontSize",
"list",
"textAlign",
"image",
"link",
"history",
],
fontSize: {
inDropdow: false,
options: [14, 16, 18, 24, 30, 36],
},
inline: {
inDropdown: false,
options: ["bold", "italic", "underline"],
},
list: {
inDropdown: false,
options: ["unordered", "ordered", "indent", "outdent"],
},
textAlign: { inDropdown: true },
link: {
inDropdown: false,
showOpenOptionOnHover: true,
defaultTargetOption: "_self",
options: ["link", "unlink"],
linkCallback: undefined,
},
history: { inDropdown: false },
image: {
uploadCallback: uploadCallback,
alignmentEnabled: true,
previewImage: true,
inputAccept: "image/gif,image/jpeg,image/jpg,image/png,image/svg",
},
}}
onEditorStateChange={(newState) => {
setEditorState(newState);
// console.log(draftToHtml(convertToRaw(newState.getCurrentContent())));
}}
onTab={
(e) => {
e.preventDefault();
const { target } = e;
target.dispatchEvent(
new KeyboardEvent("keydown", {
code: "Space",
key: " ",
keyCode: 32,
cancelable: true,
repeat: false,
bubbles: true,
view: window,
which: 32,
})
);
}
}
/>
The documentation doesn't help on saying how it can be used to create paragraph, once that's the main use of pressing tab when you're writing something. Event the PR on GitHub that implemented this props says nothing about how to use it for creating paragraphs.
We have implemented high chart - Stacked bar as below -
const options = {
chart: {
….
},
title: {
text: ''
},
xAxis: {
visible: false,
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
visible: false,
…….
},
legend: {
itemStyle: {
cursor: 'default',
fontWeight: 'normal'
},
reversed: true
},
plotOptions: {
series: {
cursor: 'default',
stacking: 'normal',
enableMouseTracking: false,
events: {
legendItemClick: function () {
return false;
}
},
states: {
hover: {
enabled: false
}
}
}
},
tooltip: {
useHTML: true,
enabled: false,
outside: true,
followPointer: true,
crosshairs: false,
},
accessibility: {
…….
},
exporting: {
enabled: false
},
series: props.series
};
It loads fine, also hovering on any of the block does not change opacity for other blocks.
How can we disable hovering on legends below stacked bar?
Example - http://jsfiddle.net/clockworked247/FGmgC/
In above link, basically hover effect on John, Joe, Jane, Janet legends need to be disabled.
Thanks all.
Below answer helped, and worked.
Above link should help. If you are looking for more solutions you can also achieve it using CSS. Make pointer event none for legends like .highcharts-legend-item:{ pointer-events:none; }
According my question, I want to remove some default toolbar option like a font family or emoji and remain only text style options. How to do that ?
For my editor.
<Editor
editorState={editorState}
wrapperClassName="demo-wrapper"
onEditorStateChange={this.onEditorStateChange}
toolbar={{
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
}}
/>
Pass an array named options containing all options you need in the toolbar property. Here is an array with all available options:
options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded', 'emoji', 'image', 'remove', 'history']
And here is example containing only text style options and without font family
<Editor
editorState={editorState}
wrapperClassName="demo-wrapper"
onEditorStateChange={this.onEditorStateChange}
toolbar={{
options: ['inline', 'blockType', 'fontSize', 'list', 'textAlign', 'history'],
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
link: { inDropdown: true },
history: { inDropdown: true },
}}
/>
For more information see: https://jpuri.github.io/react-draft-wysiwyg/#/docs