uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.65k stars 132 forks source link

如何设置可以只展示一行,并且将enter换行禁用掉 #496

Closed xiaoxiaotumao closed 1 year ago

xiaoxiaotumao commented 1 year ago

想控制编辑器只能在一行中进行输入,要怎么设置呢

jaywcjlove commented 1 year ago

@xiaoxiaotumao https://uiwjs.github.io/react-codemirror/#/extensions/events

在编辑区域 content 添加事件阻止 enter

import CodeMirror from '@uiw/react-codemirror';
import { events } from '@uiw/codemirror-extensions-events';

function App() {
  const [scrollTop, setScrollTop] = useState(0);

  const eventExt = events.scroll({
    scroll: (evn) => {
      setScrollTop(evn.target.scrollTop);
    },
  });

  const eventExt2 = events.content({
    focus: (evn) => {
      console.log('focus');
    },
    blur: (evn) => {
      console.log('blur');
    },
  });

  return <CodeMirror value="console.log('hello world!');" height="200px" extensions={[eventExt, eventExt2]} />;
}
export default App;