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

[Rastishka]

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

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

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

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

[xreader]

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

[Rastishka]

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

[xreader]

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

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

[linuxoid]

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

[Rastishka]

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

[yanajy]

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

[xreader]

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

[Snapp]

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

[xreader]

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

[yanajy]

отлично!

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

[xreader]

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

[KeepYourMind]

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

[xreader]

Да лучшe. merged

[valzevul]

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

[Elmot]

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

[xreader]

Спасибо

[twenty]

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

[xreader]

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

[yanajy]

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

[likhter]

Легко!

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

[Rastishka]

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

[aver]

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

[xreader]

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

[Gariks]

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

[xreader]

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

[bubuq]

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

[xreader]

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

[meettya]

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

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

[Alexufo]

ckeditor.com/demo#inline
sitecake.com/

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

[xreader]

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

[Alexufo]

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

[AYShestakov]

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

[xreader]

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

[AYShestakov]

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

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

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

[avsej]

Тут интереснее и по-короче написано habrahabr.ru/post/167677/ :)

[xreader]

Да видел это на lifehacker.com, но оно не лучше: там нет подсветки кода ;)

[KlonKaktusa]

для подсветки можно вставить скрипт
ace.ajax.org/#nav=embedding