Есть ли способ создать работающий текстовый редактор на JavaScript для моего SVG-файла? [закрыто]Html

Программисты Html
Ответить
Anonymous
 Есть ли способ создать работающий текстовый редактор на JavaScript для моего SVG-файла? [закрыто]

Сообщение Anonymous »

Я разрабатываю Card Maker для настольной игры. Card Maker — это лишь первый шаг к созданию прототипа карт, над которыми я работаю, который позже реализую в другом программном обеспечении.
Позвольте мне предварить это тем, что я терпеливо писал весь код, используя искусственный интеллект в сочетании с кодом Visual Studio (в частности, GPT-5, Claude Sonnet 4.5 и Gemini 2.5 Pro).
Это один файл. веб-приложение, которое позволяет мне создавать карточки, сохранять их в локальной базе данных (поскольку я единственный, кто использую приложение, и мне нужна максимально простая настройка), а также импортировать/экспортировать базу данных, когда это необходимо. Наконец, он включает кнопку для сохранения карточки в формате PNG.
Файлы SVG были созданы мной с помощью Adobe Illustrator.
В настоящее время программа находится в альфа-версии, в которой я создал текстовый редактор.
Этот текстовый редактор имеет несколько функций, таких как изменение шрифта, размера, подчеркивание, переключение полужирного или полужирного, подчеркивание и т. д.
К сожалению, текстовый редактор работает некорректно. Например, когда я выделяю текст, удерживая левую кнопку мыши и перетаскивая его, он изменяет весь текстовый атрибут SVG независимо от того, какую часть я на самом деле выбрал.
Вот пример:
Если текст — «EFFETTI:», и я хочу изменить только «-ETTI:», все слово «EFFETTI:» будет изменено.
Та же проблема возникает в другом месте — например, если я пишу «ЭФФЕТТИ: QUESTO È UN EFFETTO». и попробуйте убрать жирный шрифт только из "QUESTO È UN EFFETTO.", к сожалению, "EFFETTI:" тоже потеряет жирное форматирование.
Прошу помощи, поскольку, несмотря на множество подробных подсказок, отправленных различным моделям ИИ, ни одной из них не удалось полностью решить проблему. Каждый раз, когда я применял их предложения, были как улучшения, так и ухудшения.
Я подозреваю, что настоящие ограничения могут быть связаны с исходной структурой SVG-файла, хотя я не совсем уверен.
Я обратился за помощью к ИИ, потому что мне нужно быстро разработать это веб-приложение, и хотя у меня есть некоторые основы программирования, я не знаю JavaScript или CSS. Я знаю только HTML (хотя начинаю немного понимать CSS).
Так что моя проблема не концептуальная; это лингвистическое: у меня просто сейчас нет времени изучать JavaScript из-за большой загруженности и множества университетских экзаменов, которые отнимают много времени (а я уже отстаю...).
Я рад обсудить и уточнить свой вопрос дальше, потому что меня очень волнует этот небольшой проект; он почти завершен.
Осталось только исправить текстовый редактор, чтобы он работал правильно, и разобраться, как обращаться с цветами (например, иметь возможность менять цвет рамки карточки). Тогда я бы закончил.
Еще одна проблема с текстовым редактором заключается в том, что если я выделю часть текста, возникает описанная ранее проблема.
Но если я ничего не выбираю, я просто нажимаю на точку в тексте, а затем применяю жирный, полужирный, прописные буквы или любое другое форматирование. В конечном итоге текст «сворачивается сам по себе».
Я прикрепил файл веб-приложения. Вы можете попробовать его или открыть в любом редакторе кода, чтобы просмотреть исходный код.
Я также загрузил два разных подхода к файлу SVG. Первый — с использованием текстового поля, а второй — с использованием прямоугольника.

Код: Выделить всё

>! https://pastebin.com/PkY6amKk
https://pastebin.com/BAn8A4hV
https://pastebin.com/f84nkL7r >!
Я ожидаю, что созданный мною текстовый редактор будет работать правильно даже при частичном выделении, поэтому, если я захочу изменить всего несколько слов или даже несколько символов, я смогу сделать это без каких-либо проблем.
Я также ожидаю, что текст больше не будет сворачиваться сам по себе.
Я надеюсь, что кто-нибудь поможет мне быстро закончить это. К сожалению, короткие или абстрактные ответы мне не помогут, потому что даже если я пойму логический смысл, я не смогу применить его на практике.
Это потому, что весь код я строил через подсказки ИИ-помощникам, которые генерировали код за меня. Затем, шаг за шагом и все еще посредством подсказок, мне удалось исправить ошибки.
Однако в некоторых случаях я использовал и собственную интуицию — например, когда я замечал циклы ошибок или логические несоответствия, я пытался подсказать ИИ, могут ли они быть причиной проблемы. Благодаря его подтверждению мне удалось решить некоторые проблемы, такие как работа с файлом SVG или отмена потенциально опасных операций в коде или избежание мелких дефектов.
При этом я должен повторить, что я не умею писать код JavaScript или CSS.
То, что мне нужно, — это четкое и упрощенное логическое объяснение, а также практическое руководство — то есть Мне нужен был бы кто-то, кто не только показал бы мне, как решить проблему концептуально, но и предоставил бы точные подсказки для ИИ, шаги, которые необходимо выполнить, или даже прямые изменения в коде для решения двух упомянутых мной проблем.

Подробнее здесь: https://stackoverflow.com/questions/797 ... y-svg-file
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»