react json editor ajrm
Locale Support & Other
Предупреждение:
Как вы, возможно, уже знаете, оригинальный проект response-json-editor-ajrm активно не поддерживается и в конечном итоге устареет. Поэтому я решил установить официальную дату прекращения поддержки. Ориентировочная дата этого — 15 июня 2023 года.
Я хотел бы поблагодарить тех, кто использовал его в своих проектах, и тех, кто каким-то образом внес свой вклад в проект. Я просто больше не хочу поддерживать этот проект. Он был создан в первые дни моей карьеры инженера-программиста и не соответствовал ни сегодняшним стандартам, ни моим.
Но не волнуйтесь. Я намерен вдохнуть новую жизнь в этот проект, переписав его с нуля.
Я хотел бы воспользоваться уроками прошлого и избежать некоторых проблем, с которыми в настоящее время сталкивается реакция-json-editor-ajrm. Я также хотел бы отметить то, что было сделано хорошо, и я хотел бы продолжать это делать.
Я создал дом для этого нового проекта здесь, enio. Я также организовал здесь обсуждение, если у вас есть какие-либо вопросы или комментарии.
Стильный, похожий на редактор, модульный компонент реагирования для просмотра, редактирования и отладки синтаксиса объектов JavaScript!
$ npm i --save react-json-editor-ajrm
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';
<JSONInput
id = 'a_unique_id'
placeholder = { sampleObject }
colors = { darktheme }
locale = { locale }
height = '550px'
/>
Подсказка : существует два разных корневых пути: react-json-editor-ajrm и react-json-editor-ajrm/es . Первый содержит полизаполненный код ES5, второй — незаполненный код ES6. Версия react-json-editor-ajrm/es несовместима с create-react-app . Если вы не уверены, какой из них вам нужен, выберите первый — он лучше всего совместим с инструментами и браузерами.
Папка ./examples содержит два примера:
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
$ npm i
$ npm start
http://localhost:8080 в веб-браузере. placeholder для отображения после монтирования компонента.English , German , Spanish , Chinese , French , Indonesian , Russian , Hindi , Japanese и Tamil языков. | Имя | Описание | Тип | Необходимый |
|---|---|---|---|
| локаль | Язык вашего редактора. Импортируйте локали следующим образом: import locale from 'react-json-editor-ajrm/locale/en' . Узнать больше | объект | Обязательный |
| идентификатор | Необязательный id , который можно назначить фактическому узлу DOM ввода текста. Помимо текстового ввода, следующие узлы также получат идентификатор: {id}-outer-box , {id}-container , {id}-warning-box , {id}-labels | нить | Необязательный |
| заполнитель | Отправьте действительный объект JavaScript, который будет показан после монтирования компонента. Присвойте другое значение, чтобы повторно отобразить исходное содержимое компонента. | объект | Необязательный |
| перезагрузить | Отправьте true , чтобы компонент всегда повторно отображал или «сбрасывал» значение, указанное в свойстве placeholder . | логическое значение | Необязательный |
| viewOnly | Отправьте true если вы хотите, чтобы отображаемый контент был недоступен для редактирования. | логическое значение | Необязательный |
| onChange | Всякий раз, когда происходит событие onKeyPress , оно возвращает значения содержимого. | объект | Необязательный |
| onBlur | Всякий раз, когда происходит событие onBlur , оно возвращает значения содержимого. | объект | Необязательный |
| подтвердитьХорошо | Отправьте false если вы хотите, чтобы галочка, подтверждающая правильный синтаксис, была скрыта. | логическое значение | Необязательный |
| высота | Сокращенное свойство для установки определенной высоты для всего компонента. | нить | Необязательный |
| ширина | Сокращенное свойство для установки определенной ширины для всего компонента. | нить | Необязательный |
| onKeyPressUpdate | Отправьте false если вы хотите, чтобы компонент не обновлялся автоматически при нажатии клавиши. | логическое значение | Необязательный |
| ждатьAfterKeyPress | Количество миллисекунд ожидания перед повторной отрисовкой содержимого после нажатия клавиши. Значение по умолчанию равно 1000 , если оно не указано. Другими словами, компонент обновится, если после последнего нажатия клавиши в течение 1 секунды не будет выполнено дополнительное нажатие. Менее 100 миллисекунд не имеет значения. | число | Необязательный |
| изменитьErrorText | Пользовательская функция для изменения исходного текста предупреждения компонента. Эта функция получит один параметр типа string и в равной степени должна вернуть string . | функция | Необязательный |
| ошибка | Содержит следующие свойства: | объект | Необязательный |
| ошибка.причина | Строка, содержащая пользовательское сообщение об ошибке. | нить | Необязательный |
| ошибка.строка | Число, указывающее номер строки, связанной с пользовательским сообщением об ошибке. | число | Необязательный |
| тема | Укажите, какую встроенную тему использовать. | нить | Необязательный |
| цвета | Содержит следующие свойства: | объект | Необязательный |
| цвета.по умолчанию | Шестнадцатеричный цветовой код для любых символов, таких как фигурные braces и comma . | нить | Необязательный |
| цвета.строка | Шестнадцатеричный цветовой код для токенов, идентифицируемых как string значения. | нить | Необязательный |
| цвета.номер | Шестнадцатеричный цветовой код для токенов, идентифицируемых как integeter , double значения или значения float . | нить | Необязательный |
| цвета.двоеточие | Шестнадцатеричный цветовой код для токенов, обозначенных colon . | нить | Необязательный |
| цвета.ключи | Шестнадцатеричный цветовой код для токенов, идентифицируемых как keys или имена свойств. | нить | Необязательный |
| цвета.keys_whiteSpace | Шестнадцатеричный цветовой код для токенов, идентифицируемых как keys заключенные в кавычки. | нить | Необязательный |
| цвета.примитив | Шестнадцатеричный цветовой код для токенов, идентифицированных как boolean значения и ноль. | нить | Необязательный |
| цвета.ошибка | Шестнадцатеричный цветовой код для жетонов, помеченных тегом error . | нить | Необязательный |
| цвета.фон | Шестнадцатеричный цветовой код фона компонента. | нить | Необязательный |
| цвета.background_warning | Шестнадцатеричный цветовой код для отображения предупреждающего сообщения вверху компонента. | нить | Необязательный |
| стиль | Содержит следующие свойства: | объект | Необязательный |
| style.outerBox | Свойство для изменения стиля по умолчанию внешнего контейнера div компонента. | объект | Необязательный |
| стиль.контейнер | Свойство для изменения стиля container компонента по умолчанию. | объект | Необязательный |
| style.warningBox | Свойство для изменения стиля по умолчанию контейнера div предупреждающего сообщения. | объект | Необязательный |
| style.errorMessage | Свойство для изменения стиля предупреждающего сообщения по умолчанию. | объект | Необязательный |
| стиль.тело | Свойство для изменения стиля по умолчанию контейнера div меток строк и кода. | объект | Необязательный |
| style.labelColumn | Свойство для изменения стиля по умолчанию контейнера div меток строк. | объект | Необязательный |
| стиль.метки | Свойство для изменения стиля по умолчанию для каждой метки строки. | объект | Необязательный |
| style.contentBox | Свойство для изменения стиля по умолчанию контейнера div кода. | объект | Необязательный |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
Всякий раз, когда RJEA повторно отображает свое содержимое, любая функция, переданная в свойство onChange получит один параметр объекта со следующими ключами и значениями:
| Ключ | Описание |
|---|---|
| обычный текст | Строковое представление содержимого, включающее разрывы строк и отступы. Отлично подходит для console.log() |
| разметкаТекст | Строковое представление автоматически созданной разметки, используемой для отрисовки контента. |
| JSON | Версия контента в формате JSON.stringify. |
| jsObject | Версия содержимого javascript object . Вернет undefined , если синтаксис содержимого неверен. |
| линии | Количество строк, отображаемых для отображаемого контента. |
| ошибка | Возвращает false если синтаксис содержимого неверен. В этом случае возвращается объект с token и номером line , который соответствует месту, в котором произошла ошибка, и reason |
RJEA поддерживает встроенную тему. Вот список.
Этот проект лицензируется по лицензии MIT — подробности см. в файле LICENSE.md.
Спасибо этим замечательным людям?:
Эндрю Редикан ? ? | Патрик Сакс ? | Аллан Кель ? | эсбенвб | Маркус Петриковски | Рик Брунстедт | ADirtyCat ? |
Седрик ? | Радит ? | аскеты ? | CGВедант ? | Шехбаз Джафри ? | Васанта Кумар РБ ? | Адитья Перивал ? |
Алексей Ляхов | Теренс Хьюнь | Ричард Халл | Тонингюенит18 |
Этот проект соответствует спецификации всех участников. Любой вклад приветствуется!
