xreader 30 янв 2013 в 16:16

Редактирование статических HTML страниц в браузере

3 мин

81K

Веб-разработка*

+58

Комментарии 43

Rastishka 30 янв 2013 в 16:50

А можете добавить описание формата, в котором изменения передаются в скрипт?

Я с node.js не работаю, лишние серверы поднимать мне лень. Поэтому я написал на AutoIt скрипт (компилирующийся в exe) запускаемый одним кликом, сохраняющий измененный CSS от расширения хрома Save CSS. Могу туда же добавить сохранение вашего html.

Мне кажется получился бы удобный toolkit верстальщика.

Статья об этом в черновиках, думаю, стоит ли публиковать…

xreader 30 янв 2013 в 16:55

Для сохранения передаёться всё содержание HTML страницы. На стороне сервера файл переписываеться.

Rastishka 30 янв 2013 в 16:58

А путь к файлу как то передается?
В плагине save css передаются хэдеры:
x-origurl
x-filepath (настраивается в расширении соответствие)
content-length

xreader 30 янв 2013 в 17:03

путь определяеться так:

var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1) || 'index.html';

linuxoid 30 янв 2013 в 16:55

А вы не думайте, вы публикуйте :)

Rastishka 30 янв 2013 в 17:29

Эх, была не была, опубликовал: habrahabr.ru/post/166587/

yanajy 30 янв 2013 в 16:52

хотелось бы увидеть онлайн версию без необходимости что-то скачивать и устанавливать самостоятельно

xreader 30 янв 2013 в 16:55

Работаю над этим, постараюсь быстро добавить

Snapp 30 янв 2013 в 16:59

что-то похожее на shatran для chrome?

xreader 30 янв 2013 в 17:09

Демо можно попробовать здесь: http://xreader.github.com/inplaceeditor/demo.html
Сохранение отключено

yanajy 30 янв 2013 в 17:12

отлично!

чтобы при наведении блоки не прыгали, лучше поставить outline вместо border

xreader 30 янв 2013 в 17:24

Спасибо поправлю

НЛО прилетело и опубликовало эту надпись здесь

KeepYourMind 30 янв 2013 в 17:15

Надо сделать, чтоб после перехода в режим правки исходников отключалась возможность выбора другого блока, иначе мышка начинает подсвечивать куски исходников.

НЛО прилетело и опубликовало эту надпись здесь

xreader 30 янв 2013 в 17:43

Да лучшe. merged

НЛО прилетело и опубликовало эту надпись здесь

valzevul 30 янв 2013 в 21:01

Еще есть createjs.org, может быть вам подойдет.

Elmot 30 янв 2013 в 17:12

Круто, черт возьми! Постараюсь вкрутить в один из проектов.

xreader 30 янв 2013 в 17:17

Спасибо

twenty 30 янв 2013 в 17:17

Чтобы ничего не скакало при наведении, используйте свойство outline вместо border.

xreader 30 янв 2013 в 17:31

Спасибо. В репозитории поправил, демо пока не обновилось

yanajy 30 янв 2013 в 17:30

Вообще идеально было бы так: загружаешь любую html-страничку, и её можно редактировать.

likhter 31 янв 2013 в 14:32

Легко!

document.getElementsByTagName('html')[0].contentEditable=true;

НЛО прилетело и опубликовало эту надпись здесь

Rastishka 30 янв 2013 в 17:50

в них нельзя сохранять, или это сохранение неудобно так как требует много кликов.

НЛО прилетело и опубликовало эту надпись здесь

aver 30 янв 2013 в 17:52

Можно еще посмотреть aloha-editor.org/demos/aloha-world-example/ там тоже неплохая реализация инлайн редактирования.

xreader 30 янв 2013 в 17:57

Безусловно интересный редактор, но там несколько другой подход. В нём ограниченные возможности по правке HTML

Gariks 30 янв 2013 в 18:28

Идея не нова. Используем с давних времен в своей CMS для редактирования контента из пользовательской части. Правда исполнение другое, по нажатию на выбранном элементе страницы, например новости, открывается «модальное окно» с WYSIWYG редактором.

xreader 30 янв 2013 в 18:32

Тоже думал вначле сделать редактор в модальном окне. В результате остановился на inline редактировании. Мне кажеться так более естественно.

bubuq 30 янв 2013 в 19:20

Поделка ничего, только вот голый HTML даже для статических страниц использовать грустно. Если бы он сохранял в в оригинальном языке разметки (Markdown, Jade, HAML etc.) это бы было вещь.

xreader 30 янв 2013 в 19:25

Понимаю, но это уже не статичный контент.

meettya 31 янв 2013 в 02:01

ИМХО как-то не с того конца вопрос решается — все же проще редактировать в любимом редакторе код любимого шаблонизатора и любимого препроцессора CSS, а в браузере по сохранению livereload-ом (который бесплатный плагин для Chrome) обновлять страничку.
А результат уже конвертить в статику для продакшена.

Если желающие найдутся — оформлю заготовку и на github закину.

Alexufo 30 янв 2013 в 20:47

ckeditor.com/demo#inline
sitecake.com/

обожаю эти вещи

xreader 30 янв 2013 в 21:01

CKEditor весьма любопытный. Не могу разобраться как там сохранение изменений реализовано?

Alexufo 30 янв 2013 в 21:05

Точно не могу сказать, ковырять прям на деле еще не приходилось. Может как в гуглдокс, просто аякс через 1 сек после какого либо изменения. Глубоко убежден, что пора пересматривать многие подходы к организации редактирования информации в вебе.

AYShestakov 31 янв 2013 в 01:05

ну где -то это можно применять именно в таком виде.
Но например представьте себе простой сайт на каком-нибудь framework — что вы там он лайн будете редактировать? Ну т.е. если вы редактируете просто страничку.
А для статике возьмем на вооружение — благо парочка проектов скоро будет таких.

xreader 31 янв 2013 в 01:10

Сделано исключительно для редактирования статики.
Если будете использовать на реальном проекте собщите плз. о багах и тп.

AYShestakov 31 янв 2013 в 17:13

очень часто заказчик требует иметь возможность редактировать какие-то надписи, которые изначально в шаблоне захардкорены, например, он хочет иметь возможность поменять слова «адрес» на «адреса» или «наш адрес» При этом это не пункт меню, и не название страницы.
Хранить всё и вся в БД — ну… имхо слишком много лишнего будет будет храниться того, что вообще никогда не поменяется.

Решение иметь возможность редактировать онлайн куски шаблона.
Возможно с помощью вашего решения.

А я как раз и говорил о статичных проектах — сайты визитки — но конечно всегда хотелось бы дать заказчику максимальную возможность изменять под себя проект — иначе он начнет доставать тебя…