securingsincity / react-ace

React Ace Component
http://securingsincity.github.io/react-ace/
MIT License
4k stars 603 forks source link

In react-ace ace editor how to prevent text drop in to editor? #897

Open Radhakrishanan opened 3 years ago

Radhakrishanan commented 3 years ago

Problem

1) I have a editor , i need to prevent the text drag and drop into editor. 2) I need to prevent copy option using ( Ctrl + C ) when editor is in read only is there anyway in react ace.

Sample code to reproduce your issue

import AceEditor from 'react-ace'; import 'brace/snippets/java'; import 'brace/mode/java'; import 'brace/theme/tomorrow_night_blue'; import 'brace/ext/language_tools';

class editorpage extends Component {

constructor(props) { super(props);

this.state = {

}

} onUserCodeContentChange(source) { this.setState({ userCode: source }); } render(){

        <AceEditor
          name="user_source_editor"
          id="user_source_editor"

          value={this.state.userCode}
          wrapEnabled={true}
          mode={this.state.yourCode_editorMode === "" ? "javascript" : this.state.yourCode_editorMode === null ? "javascript" : this.state.yourCode_editorMode}
          theme="tomorrow_night_blue"
          onChange={this.onUserCodeContentChange.bind(this)}
          showPrintMargin={false}
          showGutter={true}
          highlightActiveLine={false}
          editorProps={{ $blockScrolling: Infinity }}
           commands={[{   // commands is array of key bindings.
            name: 'pastline', //name for the key binding.
            bindKey: { win: 'Ctrl-V', mac: 'Command-V' }, //key combination used for the command.
            exec: function (editor) {
              console.log(editor)
              const editorEvents = ['dragenter', 'dragover', 'dragend', 'dragstart', 'dragleave', 'drop'];
              for (const events of editorEvents) {
                console.log(events)
                editor.container.addEventListener(events, function (e) { e.stopPropagation(); }, true);
              }
            }
          }]}
            setOptions={{
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            enableSnippets: true,
            showLineNumbers: true,
            fontSize: 15,
            tabSize: 4,
            dragEnabled: false,
            autoScrollEditorIntoView: true,
          }}

        />

}

}

References

Progress on: #

staticle commented 3 years ago

Do you know how to set lines in range read-only?