React-ace: Как добавлять сниппеты вручную без скобок?

Созданный на 15 нояб. 2019  ·  40Комментарии  ·  Источник: securingsincity/react-ace

Привет, я хочу добавить свои собственные фрагменты в AceEditor .
Я нашел это: https://github.com/denvash/react-json-snippet-editor . Но я читал, что Brace больше не поддерживается для React Ace.
Как мне их добавить сейчас?

Мой компонент

<AceEditor
        placeholder="Type here..."
        mode="json"
        theme="monokai"
        id="blah2"
        onChange={this.onTextChange}
        fontSize={14}
        showPrintMargin={true}
        showGutter={true}
        highlightActiveLine={true}
        value={this.state.text}
        editorProps={{ $blockScrolling: true }}
        enableBasicAutocompletion={true}
        enableLiveAutocompletion={true}
        enableSnippets={true}
/>
Documentation question

Самый полезный комментарий

Выполнено . Это ссылка на codeandbox с демонстрацией и некоторой документацией:
https://codesandbox.io/s/react-acesnippets-sk2uq?file=/src/App.js

Все 40 Комментарий

ударяться

у меня такая же проблема

Также есть эта проблема. Пробовал просто тестировать с включенным сниппетом python, и это не сработало.

import React, {Component} from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/snippets/python";
import "ace-builds/src-noconflict/theme-monokai";

<AceEditor
          mode="python"
          theme="monokai"
          onChange={this.onChange}
          name="editor"
          enableSnippets={true}
          editorProps={{ $blockScrolling: true }}
        />

Одно дело, непонятно, как добавлять кастомные сниппеты

пон., 23 мар 2020, 21:22 użytkownik Джесси Чуа [email protected]
написал:

Также есть эта проблема. Пробовал просто тестировать с включенным питоном
фрагмент, и это не сработало.

импортировать React, {Component} из "react";
импортировать AceEditor из "react-ace";
импортировать "ace-builds / src-noconflict / ext-language_tools";
импортировать "ace-builds / src-noconflict / mode-python";
import «ace-builds / src-noconflict / snippets / python»;
импортировать "ace-builds / src-noconflict / theme-monokai";

mode = "питон"
theme = "monokai"
onChange = {this.onChange}
name = "редактор"
enableSnippets = {true}
editorProps = {{$ blockScrolling: true}}
/>

-
Вы получили это, потому что оставили комментарий.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/securingsincity/react-ace/issues/742#issuecomment-602834865 ,
или отписаться
https://github.com/notifications/unsubscribe-auth/ABK7F6NVYNF3TFKAEWD3OE3RI7AIXANCNFSM4JNTXATQ
.

Я узнал, как добавлять фрагменты кода. Я пришлю образец кода, как только открою свой компьютер.
Это довольно просто.

Я сделал для вас демонстрацию codeandbox о том, как добавлять сниппеты:
https://codesandbox.io/s/react-acesnippets-sk2uq?file=/src/App.js

Скажите, было ли это полезно.

Если вы получили сообщение об ошибке, например, неожиданный токен <. в песочнице кода.
Просто перезагрузите его | закройте ошибку. Это просто проблема с песочницей кода !!!

Привет, @ mohsinxx365, похоже, твоя демонстрация не обновляется. Закрытие неожиданного окна токена просто показывает пустой редактор.

Не знаю, почему возникает проблема. У меня это сработало.
Я проверю еще раз
Попробуйте свое приложение. Я уверен, что это сработает.

Я постараюсь исправить проблему с кодом и ящиком. Чтобы любой, у кого есть проблема, мог обратиться к нему.
А пока вы можете просто скопировать код и попробовать его в своем приложении.
Я уверен, что это сработает.

Попробуйте ввести в редакторе двойное подчеркивание (__), и вы увидите фрагмент с именем info. Это будет работать .

Затем просто нажмите ввод

Сообщите мне, сработало ли это

Похоже, теперь он работает после двойного подчеркивания! Есть ли способ автоматически отображать фрагмент без автозаполнения двойных подчеркиваний?

Вы можете просто изменить префикс фрагмента, чтобы не использовать (__).
Фрагменты хранятся в файле CompleteData.

Так это сработало?

Здравствуйте, я попытался перейти по ссылкеcodeandbox, но кажется, что ссылка больше не работает?

Это проблема с codeandbox. Просто скопируйте код и попробуйте, все заработает.

Нет, я не видел кодов. Я щелкнул ссылку и получил сообщение "Не найдено
Мы не смогли найти искомую песочницу "

Скоро пришлю новую ссылку

Есть какие-нибудь обновления по этому поводу?

С нетерпением жду решения этой проблемы.

Выполнено . Это ссылка на codeandbox с демонстрацией и некоторой документацией:
https://codesandbox.io/s/react-acesnippets-sk2uq?file=/src/App.js

Если отображается неожиданный токен '<'
Просто закройте оверлей ошибок и продолжайте.
Это проблема с codeandbox.

Скажите, помогло ли это вам

Скажите, помогло ли это вам

image

хорошо!

@orzzt приятно

var langTools = ace.acequire('ace/ext/language_tools'); langTools.addCompleter({ getCompletions: function (editor, session, pos, prefix, callback) { if (prefix.length === 0) { return callback(null, []); } else { return callback(null, [ { name: 'name', value: 'value', caption: 'caption', meta: 'snippet', type: 'local', message: 'message', score: 1000 // }, { caption: 'snippet', snippet: Это способ реализовать
фрагменты в редакторе react ace
А еще есть бонус 👌.
Вы видите этот файл customTheme.scss
вы можете настроить тему там
просто настроив в нем переменные css. , type: 'snippet' } ]); } } });

Это моя предыдущая модификация кода. Я не знаю что будет

@orzzt приятно

Я использовал предыдущий код, чтобы изменить его, и обнаружил, что его можно использовать, но я не знаю, возникнут ли другие проблемы.

Я рекомендую вам использовать подход, который я предоставил, потому что он более сложный (короткий). И понятно.

Вы можете удалить свой предыдущий код

Я не думаю, что это вызовет проблемы

Я не думаю, что это вызовет проблемы

хорошо, большое спасибо.

например

@ mohsinxx365 как насчет фрагментов кода с заполнителями вроде:

values: [${1:values}]

Для этого тоже есть какой-то механизм, насколько я помню.

Проверю и скоро скажу

Для этого тоже есть какой-то механизм, насколько я помню.

@ mohsinxx365 есть обновления по этому
в любом случае, спасибо.

@danilafrolov @piotrkochan, используя реализацию, описанную выше, вы можете использовать такие заполнители (пример функции lua):

{
    caption: 'function',
    snippet: 'function ${1:name}(${2:arguments})\n\t${3:body}\nend\n',
    meta: 'snippet', //display the keyword "snippet" next to your snippet title in the editor pop-up
}
Была ли эта страница полезной?
0 / 5 - 0 рейтинги