Как программно добавить фрагмент в Ace Editor? - PullRequest
Новая
       45

Как программно добавить фрагмент в Ace Editor?

1 голос
/ 14 октября 2019

Я хочу добавить свои собственные фрагменты кода в поле ввода моего редактора ace.

Как мне их добавить?

Из документации Редактор Ace относительно фрагментов:

В настоящее время единственным способом добавления пользовательских фрагментов в проект является создание плагина (как описано здесь).

Я видел проект под названием ace-snippet-extension , но он не обновлялся с 2016 года и делает больше вещей, чем просто позволяет мне добавить фрагмент.

Кроме того, я использую ES6 + / ES2015 +, поэтомуоператоры require также сбивают с толку.

Вот результат, который я ищу:

Ace Editor, showing a snippet suggestion for text 'build' after pressing Ctrl + Space

1 Ответ

1 голос
/ 14 октября 2019

После некоторых исследований я извлек полезные биты из расширения ace-snippet-extension. Еще одна хитрость заключается в том, что для фрагментов кода требуется определенный тип отступа, для которого я сделал функцию (однако не очень хорошо протестирован)

Вот код библиотеки, названный ace-snippets-extension-simple.js: 

import ace from 'ace-builds'

export const registerSnippets = function(editor, session, mode, snippetText) {
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
    })

    var snippetManager = ace.require('ace/snippets').snippetManager

    var id = session.$mode.$id || ''
    var m = snippetManager.files[id]

    m.scope = mode
    m.snippetText = snippetText
    m.snippet = snippetManager.parseSnippetFile(snippetText, m.scope)

    snippetManager.register(m.snippet, m.scope)
}

export const createSnippets = snippets =>
    (Array.isArray(snippets) ? snippets : [snippets])
        .map(({ name, code }) =>
            [
                'snippet ' + name,
                code
                    .split('\n')
                    .map(c => '\t' + c)
                    .join('\n'),
            ].join('\n')
        )
        .join('\n')

Вот пример «потребительского» кода:

Используйте это для импорта вышеуказанного. 

import ace from 'ace-builds'
import { Range, EditSession } from 'ace-builds'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/webpack-resolver'

import {
    registerSnippets,
    createSnippets,
} from './ace-snippets-extension-simple'

const editor = ace.edit(/*HTMLElement reference or css selector string*/)

// ...
// ...
// ...

editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: false,
})

editor.setTheme('ace/theme/monokai')
editor.session.setMode('ace/mode/javascript')

registerSnippets(
    editor,
    editor.session,
    'javascript',
    createSnippets([
        { name: 'build', code: 'console.log("build")' },
        { name: 'destroy', code: 'console.log("destroy")' },
    ])
)
...