yotoo-editor v0.0.20

基于 contentEditable 的简易编辑器

使用说明：

interface EditorProps {
    onChange: (value: string) => void; // 内容改变时触发
    onBlur?: () => void; // 失焦时触发
    onDoubleClick?: (e: FormEvent<HTMLDivElement>) => void; // 双击时触发
    value: string; // 传递给编辑器的初始值
    inputClassName?: string; // 输入框自定义类名，用于自定义样式
    indexClassName?: string; // 索引自定义类名，用于自定义样式
    indexRender?: (index: number) => React.ReactNode; // 自定义索引渲染
    onLineNumberChange?: (lineNumber: number) => void; // 行号变化时触发
    showIndex?: boolean; // 是否显示索引
    editable?: boolean; // 是否可编辑
}

默认没有任何样式，需要自定义样式请使用 inputClassName 和 indexClassName

for example:

import Editor from "yotoo-editor";
import {FC} from "react";
import "yotoo-editor/dist/index.css";

function App() {

    const ref = useRef<InputRef>(null);

    const [value, setValue] = useState("a<div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div><br></div><div>g</div>");
    const [showIndex, setShowIndex] = useState(true);
    const [editable, setEditable] = useState(false);

    const onChange = (value: string) => {
        console.log(value);
        setValue(value);
    };

    const onClick = () => {
        setShowIndex(!showIndex);
    }


    const indexRender = () => {
        return <span>•</span>
    }

    const onFocusTest = () => {
        ref.current?.focus(FocusType.END);
    }

    const onLineNumberChange = (lineNumber: number) => {
        console.log(lineNumber);
    }

    const onEditableClick = () => {
        setEditable(!editable);
    }

    const onDoubleClick = (e: FormEvent<HTMLDivElement>) => {
        console.log(e);
    }

    const onAppend = () => {
        setValue(value + "<div><br></div>");
    }

    const onToggleThroughLine = () => {
        ref.current?.toggleThroughLine();
    }

    useEffect(() => {
        console.log(editable);
    }, [editable]);

    return <>
        <Editor ref={ref}
                value={value}
                editable={editable}
                onChange={onChange}
                showIndex={showIndex}
                indexRender={indexRender}
                onDoubleClick={onDoubleClick}
                onLineNumberChange={onLineNumberChange}/>
        <button onClick={onClick}>是否显示行号</button>
        <button onClick={onFocusTest}>手动聚焦</button>
        <button onClick={onEditableClick}>是否可编辑</button>
        <button onClick={onAppend}>追加行数</button>
        <button onClick={onToggleThroughLine}>否显示删除线</button>
    </>
}