JiHong88 / suneditor

Pure javascript based WYSIWYG html editor, with no dependencies.
http://suneditor.com
MIT License
1.67k stars 308 forks source link

Inquiry About Customising Tab Behaviour in SunEditor #1365

Closed muhammad971 closed 2 months ago

muhammad971 commented 4 months ago

Version

"suneditor-react": "2.16.5"

Additional context

I am unable to customize tab behavior. I want tab not to add 4   spaces but one   so that I can remove the tab in one backspace button press. But I am seeing that   is converted into plain text ' ' (four white spaces). I tried it with \u2003 as well but in vein.

I set tabDisable: true and added customization for tab.


    const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Tab' || e.keyCode === 9) {
            e.preventDefault();

            const editor = editorRef.current?.editor;
            if (editor) {
                editor.insertHTML('\u2003', true)
            }
        }
    };

    return (
        <SunEditor
            defaultValue={html}
            setContents={html}
            onChange={onChange}
            showToolbar={showToolbar}
            ref={editorRef}
            disable={readOnly}
            setOptions={{
                buttonList: buttonsList,
                customPlugins: [header, templateEditor, level1, level2, level3, level4, level5, level6, sectionSign],
                minHeight: "300px",
                resizingBar: showResizingBar,
                showPathLabel: false,
                tabDisable: true,
                textTags: {
                    underline: 'u',
                    bold: 'b',
                    italic: 'em',
                    strike: 's'
                },
                addTagsWhitelist: 'L1|L2|L3|L4|L5|L6|HEADING|T|t|&emsp;|\u2003',
                pasteTagsBlacklist: 'div|p|span',
            }}
            onKeyDown={handleKeyDown}
        />
    )

   CC: @JiHong88 
muhammad971 commented 2 months ago

I made a work around