Хотя… не изобрел, а собрал. Я собрал свой MVP Simple Data Editor, т.к. хотел простое и миниатюрное решение, работающее везде, где есть браузер и чтобы при этом не происходило никаких обращений во вне. Но не только. Основная идея в реализации возможности представления одной и той же информации, но в разных форматах: текстовом, табличном ну а в перспективе и в графическом.
Описание
Постановка задачи была простой: загрузка одного или нескольких csv-файлов (при выборе нескольких файлов происходит склейка содержимого), отображение содержимого как в текстовом виде, так и в табличной форме. Возможность простого редактирования и сохранения.
Проект написан на Javascript/Typescript на базе фреймворка Vue.js. В качестве редактора текста был выбран MonacoEditor, думаю большинству из Вас он знаком по VSCode. Достаточно нажать «F1» на вкладке чтобы увидеть знакомое меню.
В качестве компонента для табличного представления использовал HandsOnTable.
В части кода оба представления разнесены по отдельным файлам. Отдельная логика также вынесена в файлы в папке ./libs
Особенности
Ньюансы связаны со спецификой работы браузеров. Вы можете через браузер открыть локальный файл, но сохранить изменения в него же — нет.
Поэтому:
-
При редактировании данных в текстовом виде — отредактированный текст сохранятся в local storage браузера. И если вы, к примеру, обновляете страницу — то на экране отобразится уже не содержимое файлов, а отредактированный текст.
-
Сохранение файла. Здесь сохранение == загрузка нового файла.
Установка
Вот код проекта на ГитХаб
git clone https://github.com/BazDen/SimpleDataEditor.gitpnpm installpnpm devpnpm build
Использование ИИ
Использую, но в части подготовки отдельных участков кода, в частности в данном проекте ныне суверенная ИИ с приятным женским именем помогла мне подготовить функции чтения одного/нескольких файлов.
Ограничения
Обращаю ваше внимание — это MVP — минимальный жизнеспособный продукт. В этой ситуации проще описывать не ограничения, а функционал, что я собственно и сделал выше. Но есть неявные ограничения, которые важно знать тем отважным энтузиастам, кто возьмет мой код для своих проектов
-
В табличной части ограниченное количество колонок, только от A до Z
-
Редактируемая информация в текстовом виде хранится в local storage браузера, у которого есть свои ограничения на размер
-
При загрузке csv файла, только символ “;” является разделителем.
Дальнейшее развитие
Планирую развивать данный MVP в первую очередь как общедоступный шаблон для других проектов. Не испытываю иллюзий в части того, что в части редактирования текста/таблиц данное решение будет лучше существующих текстовых или табличных редакторов. Поэтому шаблон, который будет дорабатываться по мере сил и наличию свободного времени.
ссылка на оригинал статьи https://habr.com/ru/articles/1084652/