• react-ace调研

    2019-04-04 17:22:27
    Ace can be easily embedded into a web page. Get prebuilt version of ace from ace-builds repository and use the code below: 支持 支持语言 支持风格 javascript\java\python\xml ruby\sass\markdown ...

    简介

    Ace can be easily embedded into a web page. Get prebuilt version of ace from ace-builds repository and use the code below:

    支持

    详情点击这里

    支持语言 支持风格 键盘模式
    javascript\java\python\xml ruby\sass\markdown mysql\json\html\handlebars\golang\csharp\coffee\css "monokai","github", "tomorrow", "kuroir","twilight","xcode", "textmate", "solarized_dark", "solarized_light", "terminal" vim emacs

    Tips: 翻看node_modules/brace/mode 可以发现,除了上述语言,实际上还支持 c/c++ jsp jsx makdown makefile scala sql 等常用语言格式,想要知道详情的读者可以去自己翻看。

    安装

    在react项目中安装
    npm install react-ace

    样例代码

    参考地址,点击这里查看

    import React from "react";
    import { render } from "react-dom";
    import brace from "brace";
    import AceEditor from "react-ace";
    
    import "brace/mode/java";
    import "brace/theme/github";
    
    function onChange(newValue) {
      console.log("change", newValue);
    }
    
    // Render editor
    render(
      <AceEditor
        mode="java"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
      />,
      document.getElementById("example")
    );
    

    可用参数

    参数 默认 类型 描述
    name ‘brace-editor’ String editor的唯一id
    placeholder null String 占位符
    mode ‘’ String 高亮模式,例如java mysql
    theme ‘’ String 主题,例如 github
    value ‘’ String 填充的值,跟placeholder不同的是,这些值会实际存在于编辑器
    defaultValue ‘’ String 默认value
    height ‘500px’ String 设置高度
    width ‘500px’ String 设置宽度
    className String 自定义 className
    fontSize 12 Number 字体大小
    showGutter true Boolean 显示行号
    showPrintMargin true Boolean 显示打印边距(这个不是很懂到底是什么意思)
    highlightActiveLine true Boolean highlight active line (高亮当前行)
    focus false Boolean whether to focus (暂时不明白到底什么用)
    cursorStart 1 Number 光标一开始所在的行 (the location of the cursor )
    wrapEnabled false Boolean 能否折叠 (Wrapping lines)
    readOnly false Boolean 只读 (make the editor read only )
    minLines Number 显示的最小行数(Minimum number of lines to be displayed )
    maxLines Number 显示最大行数(Maximum number of lines to be displayed )
    enableBasicAutocompletion false Boolean 允许自动提示 ,但是要通过组合键来打开自动提示 参考网址
    enableLiveAutocompletion false Boolean 在输入内容时,弹出语法提示框。
    tabSize 4 Number tabSize
    debounceChangePeriod null Number 事件 change的消抖延迟
    onLoad Function 在editor在加载后调用,第一个参数是editor实例
    onBeforeLoad Function 在editor加载之前调用,第一个参数是ace。(called before editor load. the first argument is an instance)) of ace
    onChange Function 当光标在页面上改变的时候调用,包含两个参数,value 和 event ( occurs on document change it has 2 arguments the value and the event. )
    onCopy Function 复制之后触发的函数,参数为passes 。 triggered by editor copy event, and passes text as argument
    onPaste Function 粘贴之后调用。 Triggered by editor paste event, and passes text as argument
    onSelectionChange Function 当宣州改变时出触发,第一个参数Selection,第二个参数event。triggered by editor selectionChange event, and passes a Selection as it’s first argument and the event as the second
    onCursorChange Function 光标改变时触发。 triggered by editor changeCursor event, and passes a Selection as it’s first argument and the event as the second
    onFocus Function 聚焦时 triggered by editor focus event
    onBlur Function 失去焦点时触发 triggered by editor blur event.It has two arguments event and editor
    onInput Function input事件触发 triggered by editor input event
    onScroll Function triggered by editor scroll event
    onValidate Function triggered, when annotations are changed
    editorProps Object properties to apply directly to the Ace editor instance
    setOptions Object 一些直接应用于ace的选项。options to apply directly to the Ace editor instance
    keyboardHandler String 设置模式,例如vim模式还有emacs模式。 corresponding to the keybinding mode to set (such as vim or emacs)
    commands Array (不是很理解作用)new commands to add to the editor
    annotations Array annotations to show in the editor i.e. [{ row: 0, column: 2, type: 'error', text: 'Some error.'}], displayed in the gutter
    markers Array markers to show in the editor, i.e. [{ startRow: 0, startCol: 2, endRow: 1, endCol: 20, className: 'error-marker', type: 'background' }]. Make sure to define the class (eg. “.error-marker”) and set position: absolute for it.
    style Object camelCased properties

    Q&A

    原文地址点击这里

    怎么调用editor的函数?如何实现redo和undo?

    ReactAce 有一个editor 参数,。可以使用ref来得到component, 然后就可以使用component上的editor来执行你所需要的方法啦~

    const reactAceComponent = this.refs.reactAceComponent;
    const editor = reactAceComponent.editor;
    editor.find(searchRegex, {
      backwards: false,
      wrap: true,
      caseSensitive: false,
      wholeWord: false,
      regExp: true
    });
    

    同样的如果你想要做redo或者rundo

    <button onClick={()=> {this.refs.editor.editor.undo()}}>Undo</button>
    <button onClick={()=> {this.refs.editor.editor.redo()}}>Redo</button>
    
    怎么获得已经选中了的文本 onSelectionChange?

    How you extract the text from the editor is based on how to call methods on the editor.

    Your onSelectionChange should look like this:

    onSelectionChange(selection) {
      const content = this.refs.aceEditor.editor.session.getTextRange(selection.getRange());
      // use content
    }
    
    如何获取选中的文本?
      const selectedText = this.refs.aceEditor.editor.getSelectedText();
      // selectedText contains the selected text.
    }
    
    怎么添加maker?
    const markers = [
      {
        startRow: 3,
        type: "text",
        className: "test-marker"
      }
    ];
    const wrapper = <AceEditor markers={markers} />;
    
    怎么添加annotations?
    const annotations = [
      {
        row: 3, // must be 0 based
        column: 4, // must be 0 based
        text: "error.message", // text to show in tooltip
        type: "error"
      }
    ];
    const editor = <AceEditor annotations={annotations} />;
    
    怎么添加键盘组合键?
    render() {
      return <div>
        <AceEditor
          ref="aceEditor"
          mode="sql"     // Default value since this props must be set.
          theme="chrome" // Default value since this props must be set.
          commands={[{   // commands is array of key bindings.
            name: 'commandName', //name for the key binding.
            bindKey: {win: 'Ctrl-Alt-h', mac: 'Command-Alt-h'}, //key combination used for the command.
            exec: () => { console.log('key-binding used')}  //function to execute when keys are pressed.
          }]}
        />
      </div>;
    }
    
    怎么改变已经存在的键盘组合键?

    Same syntax as above, where exec is given the name of the command to rebind.

    render() {
      return <div>
        <AceEditor
          ref="aceEditor"
          mode="sql"     // Default value since this props must be set.
          theme="chrome" // Default value since this props must be set.
          commands={[{   // commands is array of key bindings.
            name: 'removeline', //name for the key binding.
            bindKey: {win: 'Ctrl-X', mac: 'Command-X'}, //key combination used for the command.
            exec: 'removeline'  // name of the command to rebind
          }]}
        />
      </div>;
    }
    
    怎么添加搜索框?(这一部分还没有实验成功)

    添加如下一行

    import 'brace/ext/searchbox';

    怎么添加自定义mode?
    1. 创建自定义的莫得的 class (pure ES6 code)
    2. 初始化,以一个已经存在的名字命名 (such as “sql”)
    3. 使用 componentDidMount 函数and 用已存在的实例调用 session.setMode .

    My custom mode is:

    import "brace/mode/java";
    
    export class CustomHighlightRules extends window.ace.acequire(
      "ace/mode/text_highlight_rules"
    ).TextHighlightRules {
      constructor() {
        super();
        this.$rules = {
          start: [
            {
              token: "comment",
              regex: "#.*$"
            },
            {
              token: "string",
              regex: '".*?"'
            }
          ]
        };
      }
    }
    
    export default class CustomSqlMode extends window.ace.acequire("ace/mode/java")
      .Mode {
      constructor() {
        super();
        this.HighlightRules = CustomHighlightRules;
      }
    }
    

    And my react-ace code looks like:

    import React, { Component } from "react";
    import brace from "brace";
    import AceEditor from "react-ace";
    import CustomSqlMode from "./CustomSqlMode.js";
    
    import "brace/theme/github";
    
    class App extends Component {
      componentDidMount() {
        const customMode = new CustomSqlMode();
        this.refs.aceEditor.editor.getSession().setMode(customMode);
      }
    
      render() {
        return (
          <div className="App">
            <AceEditor
              ref="aceEditor"
              mode="text"
              theme="github"
              name="UNIQUE_ID_OF_DIV"
              editorProps={{ $blockScrolling: true }}
            />
          </div>
        );
      }
    }
    
    export default App;
    
    展开全文
  • 最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能。...yarn add react-ace //或 npm install react-ace 2.在项目中引入 import AceEditor from 'react-ace';...

    最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等功能。中途在自定义代码提示列表中由于没有相关demo,所以踩了一些坑,遂将其整理如下,以便日后查看。

    1.安装

    yarn add react-ace //或 npm install react-ace

    2.在项目中引入

    import AceEditor from 'react-ace';

    3.在组件中使用

    <AceEditor
      ref="editor"
      mode="mysql"
      theme="xcode"
      onChange={this.onChange.bind(this)}
      name="UNIQUE_ID_OF_DIV"
      editorProps={{ $blockScrolling: true }}
      enableBasicAutocompletion={true}
      enableLiveAutocompletion={true}
      enableSnippets={true}
      style={{ width: "100%", height: "100%", fontSize: "18px" }}
      onLoad={this.complete.bind(this)}
    />

    4.API

    • mode:代码语言,可选类型如下
      代码语言类型
    • theme:主题,可选类型如下
      主题类型
    • enableBasicAutocompletion 普通自动完成,可选类型(true/false)
    • enableLiveAutocompletion 实时自动完成,可选类型(true/false)
    • enableSnippets 代码自动补全,可选类型(true/false)
    • onLoad:加载完成后执行的函数,第一个参数编辑器的实例

    这里主要说一下自定义代码提示列表,实现的功能示例如下
    在这里插入图片描述
    1.首先定义自定义提示列表,如下

    const completers = [
      {
        name: 'name',
        value: 'one',
        score: 100,
        meta: '手动添加1'
      },
      {
        name: 'name',
        value: 'two',
        score: 100,
        meta: '手动添加2'
      },
      {
        name: 'name',
        value: 'three',
        score: 100,
        meta: '手动添加3'
      }
    ];

    2.接着在onLoad函数里执行如下方法即可

    complete(editor) {
        //向编辑器中添加自动补全列表
        editor.completers.push({
          getCompletions: function (callback) {
            callback(null, completers);
          }
        });
      }

    以上。

    这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头

    前端入坑全套教学视频
    那么问题来了,如果你也想入坑前端或者学习更多技术,广交天下朋友(基友),认识更多有趣的灵魂的话,欢迎加入前端交流群鸭~
    扫码加群哦
    扫二维码加为好友就完事了!安排~

    转载于:https://www.cnblogs.com/twodog/p/11320719.html

    展开全文
  • 最近有一个引入sql编辑器插件的需求,要求代码高亮显示,代码智能提示,以及支持自定义代码提示列表等...yarn add react-ace //或 npm install react-ace 2.在项目中引入 import AceEditor from 'react-ace'; 3....

    此文章已永久迁移至个人博客网站,为不影响使用,请打开如下网址访问。


    https://www.iiter.cn/blogs/5

    展开全文
  • 因为之前做的项目中需要一个编辑器,尝试了几种办法后,最终用了react-ace 首先 npm install react-ace import AceEditor from 'react-ace'; import "ace-builds/src-noconflict/mode-javascript"; //导入语言 ...

    因为之前做的项目中需要一个编辑器,尝试了几种办法后,最终用了react-ace

    首先 npm install react-ace
    import AceEditor from 'react-ace';
    import "ace-builds/src-noconflict/mode-javascript"; //导入语言
    import "ace-builds/src-noconflict/theme-xcode";     //导入主题
    
    ...
    <AceEditor
           mode="javascript"
           theme="xcode"
           onChange={this.handleContentChange}
           value={this.state.value}
           style={{width: '100%', height: '100%', fontSize: '14px', lineHeight: '20px'}}
    />
    ...
    
    因为在编写的过程种发生了无法正常输入的问题:可以这样子解决
    shouldComponentUpdate(nextProps, nextState) {
            if (this.state.value !== nextState.value) {
                return false
            } else {
                return true;
            }
    }
    

    也就是判断 this.state.value有变动后修改组件状态,或者简单点,直接让组件继承 PureComponent,它自动完成了 shouldComponentUpdate 的浅比较

    展开全文
  • 需求: 一个代码编辑器,能够补全特定内容,且输入过的内容不可以再在补全...import AceEditor from 'react-ace'; import "brace/mode/json"; import "brace/theme/monokai"; import 'brace/ext/language_tools'; ...

    需求: 一个代码编辑器,能够补全特定内容,且输入过的内容不可以再在补全内容中出现。

    1.下载

     这个很多其他博客有,略过不谈。

    2.引入

    import AceEditor from 'react-ace';
    import "brace/mode/json";
    import "brace/theme/monokai";
    import 'brace/ext/language_tools';

    第一个是必定要引入的,第二个是引入的 编辑器模式,这个可以选的很多,第三个引入的是编辑器主题,第四个引入的是代码补全相关包。我看到网上有说,需要下载其他包才能实现代码补全,但是我直接用 npm/yarn 下载,也可以实现代码补全。

     codeEditorAllList.length !== 0 && <AceEditor
        ref="editor" // 实例引用
        mode="json" // 模式
        theme="monokai" // 主题
        onChange={this.onCodeChange}
        onBlur={this.onCodeBlur}
        enableBasicAutocompletion //允许自动补全选项
        enableLiveAutocompletion
        enableSnippets
        name="UNIQUE_ID_OF_DIV" // 唯一明明
        value={codeRequestvalue}
        editorProps={{ $blockScrolling: true }}
        fontSize={16}
        onLoad={this.complete.bind(this,codeEditorAllList)}
        width="100%"
    />

    主要是在 onload 的 complete 函数下补全,我的代码中补全初始数据是 codeEditorAllList ,这个数据是从数据库加载的。不过要注意一下,可能在 codeEditorAllList 还没有加载的时候, AceEditor 就加载了,所以要做一个简单的判断。

    3.代码补全

     

     complete = (codeEditorAllList,editor) => {
    
          // const {allLexNameList} = this.state;
          const completers = codeEditorAllList.map(item => ({
            name:item,
            value:item,
            score:100,
            meta:'',
          }));
          console.log(completers)
          this.addCompleters(editor, completers); // 第一个参数是引用实体,第二个是补全数组
          // editor.completers.push(completers);
         
      }
    
      addCompleters= (editor,completers,completersNew)=>{
        if(completersNew){ // 如果是传入了新的补全内容,就要将之前的补全内容置空,然后加入新的内容
           const arr = [];
           editor.completers = arr;
           editor.completers.push({
             getCompletions(editor, session, pos, prefix, callback) {
               callback(null, completers);
             },
           });
           return
        }
        editor.completers.push({ // 第一次加载默认加载所有补全内容
          getCompletions(editor, session, pos, prefix, callback) {
            callback(null, completers);
          },
        });
      }

    4.动态修改补全内容

     onCodeChange = (e) => {
         
    
         const eidtor1 = this.refs.editor.editor; // 获取编辑器实体
         const {codeEditorAllList} = this.state;
         const arr = [];
         const str = String(e);
         codeEditorAllList.forEach(item=>{ // 剔除已经选择的补全内容
           if(str.indexOf(item) === -1){
             arr.push(item);
           }
         })
         const arr1 = arr.map(item=>({ // 将制定内容修改为特定格式
           name:item,
           value:item,
           score:100,
           meta:'',
         }))
         this.addCompleters(eidtor1, arr1,true); // 传入新的补全内容
        
       }

    5.获取代码内容、判断格式是否错误

    onCodeBlur = (event,e)=>{
          const value2 = e.getValue(); // 获取代码内容
          console.log(value2);
          if(e.getSession().getAnnotations().length !== 0){ // 判断代码格式是否有误
            message.error("必须输入 json 格式字符串!");
            this.setState({
              apiParamsStatus: false,
              codeRequestvalue:value2,
            })
            return;
          }
          const val3 = (value2 && String(e.getValue()).replace(/[\r\n]/g, "")) || ''; // 去除空行空格,直接获取到的值是有空行的,没办法给后台传成 json 格式
          let val4 = (val3 && val3.replace(/\ +/g, "")) || ''; // 去转义符
          const {codeEditorAllList} = this.state;
          codeEditorAllList.forEach(item => {
            if(val4.indexOf(item) !== -1){
              val4 = val4.replace(`@${item}`,`@${item}@`)
            }
          })
          const val5 = (val4 && JSON.parse(val4)) || ''; // 当然,拿到的内容也可以直接转化为 json 字符串,我这里好像做了一些多余的工作
          const val6 = (val5 && JSON.stringify(val5) ) || '';
          console.log(val6)
          const {apiParams} = this.state;
         if (val6 !== apiParams){
           this.setState({
            apiTest:false,
           })
         }
         e.setValue(value2) // 设置代码编辑器的内容,否则 输入代码后,失去焦点,则编辑器内容置空
        this.setState({
          apiParams: val6,
          apiParamsStatus:true,
          codeRequestvalue: value2,
        })
       }

    6.从后台拿到的 json 数据坐格式转化,使它在代码编辑器中展示时有空行和空格

    (str2 && JSON.stringify(JSON.parse(str2), null, '\t'))|| '',

    以上。

    展开全文
  • 前端项目-react-ace.zip

    2020-07-09 23:30:40
    前端项目-react-ace,A react component for Ace Editor
  • react-ace 的简单应用

    2020-06-17 16:57:22
    ace-editor’ String 用于编辑器的唯一ID mode ‘’ String 解析和代码突出显示的语言 splits 2 Number 视图拆分 orientation ‘beside’ String 拆分的方向在旁边还是在下面 theme ‘’ String 使用的...
  • https://www.npmjs.com/package/react-ace 文档地址 http://securingsincity.github.io/react-ace/ 在线demo编辑 效果图
  • 大家好,我是:じ☆ve朽木,...react项目中有个需求需要对接一个代码编辑器,查看了ant design官方社区精选组件提供了两款代码编辑器,有一款是微软推出的,但是代码提示不是很友好,最后需求又查看了阿里云的相关...
  • import AceEditor from 'react-ace'; // 引用实例 import 'brace/mode/twilight'; // 引用自定义主题 import 'brace/mode/c_cpp'; // 定义为c_cpp代码高亮 import'brace/ext/language_tools'; // 增加代码提示 // ...
  • npm install react-ace 2.导入相关配置 import AceEditor from 'react-ace'; //language_tools语言工具,代码提示工具 import 'brace/ext/language_tools'; //searchbox过滤框,快捷键ctrl+F import 'brace/ext/...
  • react-ace代码编辑

    2019-12-11 16:56:31
    ant design pro中使用react-acereact中使用react-ace,实现编辑代码 安装包 npm install react-ace npm install brace 引入包 import brace from 'brace'; import AceEditor from 'react-ace'; ...
  • 一个可以把文本中多个关键字高亮显示的react组件
  • ACE 5.6版本的编译

    2019-06-27 10:37:36
    5.6的ACE编译非常的简单,从网站下载压缩包,然后解压到目录在目录下的ACE目录下建立一个config.h文件,然后里面包含:#include "ace/config-win32.h"然后编译下debug和release。现在,备份下ac...
  • 另外代码不高亮的问题参考:解决0.25.1 版本的 react-monaco-editor 代码高亮和代码提示问题及我的另一篇文章。 注意: 本文章是基于 react-monaco-editor@0.18.0 版本写的,如果使用新版本,比如 0.25.1 代码无法...
  • 本文主要是介绍实际项目中如何加入语法检测功能。... 代码编辑器ace,使用webworker进行实时语法检查。目前支持JavaScript,json,php,coffeescript,css,xquery模式。 根据官方https://ace.c9.io...
  • react中实现起来似乎更简单一些。 我这里的需求是通过搜索框搜索出新闻列表,在已经获取到新闻列表数据中使用filter函数,获取到每一个新闻的title,并定义关键词正则,返回替换后的样式,react不能直接解析带html...
  • 本文介绍如何使用 Ace和 CodeMirror来实现一个基于 react的 markdown 输入 + 即时预览在线编辑器 Ace版本 Ace算是一个久经考验的老牌编辑器插件了,现在很多大公司都在用这个东西,似乎 Github曾经就使用 Ace用于...
  • react将一段xml格式的字符串格式化输出并有序的缩进 import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class FormatXMML extends Component { constructor(props) { super(props); ...
1 2 3 4 5 ... 20
收藏数 1,702
精华内容 680