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
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 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?
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.
I implemented monaco editor in my react application, but It's just showing one color, I am unable to figure it out.
I have also tried using the by default theme as well, without custom theme, still Its the same problem
monaco.editor.defineTheme('customTheme', {
base: 'vs-dark',
inherit: true,
rules: [
{ token: 'green', background: '#457EFF', foreground: '#457EFF' },
{
token: 'red',
background: '#457EFF',
foreground: '#457EFF',
},
{ token: 'green', background: '#900000', foreground: '900000' },
],
colors: {
'editor.background': '#0C0F17',
},
});
if (monacoEl.current) {
setEditor(
monaco.editor.create(monacoEl.current!, {
readOnly: false,
value: ["function DestinationCard() {\n\talert('Hello DestinationCard!');\n}"].join('\n'),
// automaticLayout: true,
language: 'typescript',
// theme: 'vs-dark',
theme: 'customTheme',
minimap: {
enabled: false,
},
}),
);
}
<div className={style.codeView} ref={monacoEl as RefObject<HTMLDivElement>} />