Javascript-форум - Новая HTMLJS-Примерочная

Javascript-форум (https://javascript.ru/forum/)

- Сайт Javascript.ru (https://javascript.ru/forum/site/)

- - Новая HTMLJS-Примерочная (https://javascript.ru/forum/site/12821-novaya-htmljs-primerochnaya.html)

Новая HTMLJS-Примерочная

Вот - для примеров кода с сохранением и живым показом.

http://javascript.info/play/rus

По идее, можно интегрировать с сайтом и форумом, если оно надо, сделать инлайн-вставку.
Основная мысль - чтобы не надо было редактировать длинные примеры в [ js ], а также сделать доступными запускаемые HTML-ки и JS-ки для редактирования в таком окне.

Глючит: если левую часть (с кодом) свернуть, а потом развернуть, код проподает (везде, кроме ie, но там с кодировкой бяка какая-то).

Юзаю подобную чтуку, если вдруг хочется чтонить накодить не дома)

~~Кстати весьма подозрительно схожа подсветка.)))~~

Че то сохранение не работает.

Так, вижу недостаток есть - не секурится там контент, т.е выполняется на том же домене. Будет поправлено.

Просьба по багам конкретнее - что под чем браузером делать, а то я воспроизвести не могу..

Цитата:

Сообщение от Илья Кантор (Сообщение 77382)

Просьба по багам конкретнее - что под чем браузером делать, а то я воспроизвести не могу..

Изменяю документ. Жму сохранить. Получаю ссылку. Перехожу по ней. Выдается страничка по умолчанию.

opera 10.63.
firefox 3.6.12

Спасибо, поправлено.

Очень, хорошая идея.
Однако может сделать по образу jsFiddle?

Лексер игнорирует унарный оператор ~.

В результате этого

~/foo/*42

воспринимается как начало комментария, а не попытка извращенно получить −42.

Небольшой баг при подсветки флагов у регулярок: http://s006.radikal.ru/i214/1011/ac/718074dfda65.jpg

UPD: Вот ещё: http://s002.radikal.ru/i200/1011/7e/7d94ca3c2f7c.jpg (минус зелёного цвета, а плюс — серого).

UPD2: Операторы ^ и ~ не подсвечиваются.

UPD3: При записи вида 0..property вторая точка не подсвечивается. Зато, "оператор" ==== подсвечивается, причём "=" можно написать сколько угодно раз.

Редактор codeMirror ... В нем есть некоторые недостатки да, надеюь, не критичные.

Баг с секурити поправлен, выполнение теперь на другом домене

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

не подсвечиваются стили и скрипты внутри атрибутов
не посвечиваются различные элементы селекторов в стилях
не подсвечиваются метки строк в скриптах
не подсвечивает скрипты в стилях
не подсвечивает this в скриптах

инструкции процессору преобразуются в комментарии

цветовая гамма для стилей и скриптов слишком слабоконтрастная, что делает подсветку малополезной.

При сохранении кода с textarea всё, что после неё, отображается в нижнем блоке. Т.е. тупо детская ошибка: в textarea вставляется код(закрывающий тег соответственно) без какой либо обработки прям в потоке.
http://javascript.ru/play/4cdd9b498544d
код, который должен быть:

<textarea></textarea><font size="7" color="red">~~~~~~</font>

Получается код примерочной без обработки браузером:

<!DOCTYPE html>
<html>
<head>
<title>A Javascript Playground</title>
<script>
var path = '/modules/play/'
var editorPath = '/modules/play/codemirror/'
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="/modules/play/js/jquery.layout-latest.js"></script>
<script src="/modules/play/js/jquery-ui-latest.js"></script>
<script src="/modules/play/codemirror/js/codemirror.js" type="text/javascript"></script>
<script src="/modules/play/codemirror/js/mirrorframe.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="/modules/play/play.css" />
</head>
<body>

<div class="ui-layout-center">	
</div>

<div class="ui-layout-north">
<div class="edit_click" style="float:left">
<input type="button" id="save-button" accesskey="s" saving="Сохраняю.." value="Сохранить">
<input type="button" id="show-button" accesskey="r" value="Показать >>"></div>
<div style="float:right;margin-right:10px">На сайт <a href="/">javascript.ru</a></div>
</div>
<div class="ui-layout-south">
Введите код выше и нажмите <i>Показать</i>. Вы также можете <a id="full" href="#">Открыть код в полном окне</a><br/>
Сочетания (кроме Opera):<ul style="margin-top:0;margin-bottom:0">
<li>Alt-S: Сохранить</li>
<li>Alt-R: Показать</li>
</ul>
</div>
<div class="ui-layout-west">

<form action="http://testbin.ru/html" method="post" target="view">

<textarea class="code_input" id="code" name="code"><textarea></textarea><font size="7" color="red">~~~~~~</font>
</textarea>
</form>

</div>

<script src="/modules/play/play.js"></script>

</body>
</html>

Примерочная в переработке. Надеюсь в скором времени ее завершить. В следующей версии будут табы, картинки, html/js/css, ревизии и форк.

Демонстрация постепенных изменений в коде это очень даже хорошо :victory:
Может есчё и поддержку редактирования нескольких файлов в пределах одного примера надо добавить :yes:

Да, и несколько файлов в пределах примера. В процессе. Уже даже чето работает ;)

P.S. Детский баг с текстариа в новой примерочной кнешна тоже пофиксан, он там точнее не актуален. спасибо ;)

А хто хочет потестить новое творение? Тестинг закрытый пока.

Пишите в приват плиз. Оно не на сайте javascript.ru, и пока только на англ.

Там и доступ к английской версии сайта заодно будет для вычитки. 5 человек, только пока, ок?

UPDATE: еще 4

2 человека со всего форума не поленились написать ПМ. Спасибо SV0L0CH и monolith ;)

Хотелось бы чтобы при перемещении ползунка размерности не было
глюка, фокусировки различных частей страницы.
И морганий.
В Chrome точно есть

Избавиться от этого, к сожалению, сложно. Используется jQuery layout. Надеюсь, это некритичный недостаток.

Нижний блок ("Edit the code above and click "View" see the result. Hotkeys (except Opera) are "ALT+key". ") - ниачём, лишний расход рабочего пространства.

Также, имхо, нужна возможность (почти)фулскрин режма.(типа как http://jsbin.com/#html)

upd
Кстати ещё хотелосб бы видеть сию прекрасную чтуку подключённой, хотяюы опцонально.)

А как у штуки с подсветкой яваскрипт хтмл цсс?

Эт к чему? По ссылке вродь html подсвечивает, но подсветку имхо свою оставить и применять после преобразования.

...ещё кстати можно добавить пользоватетельскую настройку цветов... тфу, блин, опять на комбайн потянуло))

О штуке подробнее тут. Просто с тех пор как попробовал стало оч. лениво писать html вручную.)

Примерочная обновлена

http://javascript.info/play/rus