Вот три очень популярных бесплатных зарубежных редакторов:
Можно сделать и самому визуальный онлайн редактор HTML, CSS, JavaScript кода. Его не нужно скачивать, он очень простой в создании и использовании и совершенно бесплатный. ㋛ У меня, например, есть такие статьи, где можно прямо на странице подправить CSS. Очень удобно.
Атрибут contenteditable
Атрибут contenteditable позволяет редактировать любой элемент.
<div contenteditable>это тег div</div>
<style contenteditable class="style"> /* это стиль CSS */
[contenteditable] {
display:block;
margin: 10px 0px 10px 10px;
padding: 10px;
border: 1px dashed #d2bf94;
font: 90% normal helvetica, sans-serif;
white-space: pre-wrap;
word-wrap: break-word;
background: #fff5d7;
color: #3f0309;
}
[contenteditable]:focus {
border: 1px solid #d2bf94;
background: #fff;
}
.style[contenteditable]:before {content: "\3cstyle\3e"; color: #8f494f;}
.style[contenteditable]:after {content: "\3c\2fstyle\3e"; color: #8f494f;}
</style>
А, если пройти по этой ссылке или ввести в адресную строку
data:text/html, <html contenteditable>то можно страницу браузера использовать как блокнот.
Динамически изменяемый HTML (а-ля редактор HTML)
Создадим поле, куда можно ввести код HTML, ниже другое поле, которое показывает его отображение. Поскольку textarea сам переводит < > в спец. символы, то скрипт будет минимальным:
<textarea oninput="document.getElementById('divHTML').innerHTML = this.value"></textarea>
<div id="divHTML"></div>
JavaScript на лету
Для того, чтобы внешний JavaScript выполнялся после загрузки HTML документа, применяют атрибуты defer и async.
<script src="script.js" defer></script>
Для того, чтобы JavaScript подгружался на лету, можно создать новый тег script
<script>
var Script = document.createElement('script');
Script.src = "script.js";
document.getElementsByTagName('head')[0].appendChild(Script);
</script>
Или так
<textarea id="scriptContent" onchange="changeScript()">
//содержание нового скрипта
</textarea>
<script>
function changeScript() {
var Script = document.createElement('script');
Script.textContent = document.getElementById('scriptContent').value;
document.getElementsByTagName('head')[0].appendChild(Script);
Script.replaceChild(Script, document.getElementById('scriptContent').firstChild);
}
</script>
12 комментариев:
И получается что это не онлайн редактор HTML, css и js, т.к. используя его вы редактируете не только строго отведённое вам место, а всю страницу включая онлайн редактор, и следовательно результат может быть влиянием онлайн редактора на страницу, которая влияет на онлайн редактор, результат не предсказуем.
Можете избавиться пожалуйста от этого упущения, или изменить заголовок на онлайн редактор страницы.
Единственное применение вижу - онлайн редактор самой страницы, например редактировать сразу стилей или иной блок, но нужно сделать отправку отредактированного кода на сайт.
be great. I do not recognize who you might be but definitely you are going
to a famous blogger in the event you aren't already. Cheers!
web explorer, could check this? IE still is the market leader and a huge portion
of other people will leave out your excellent writing because of this
problem.
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
style - куда можно добавить цвет и шрифт color: #6425a5;font-family: Verdana, sans-serif; ?