Привет мир 1
HTML контент
<p id='test_code'>Пример HTML. <br>Ещё пример... </p>
<section id="text" class="vidim" contenteditable="true">
<h3>Внеси изменения в стиль...</h3>
<style scoped>
.vidim style {
display:block;
padding:10px;
white-space:pre;
background:rgba(200,200,200,.8);
}
.vidim[contenteditable="true"] {
top:1px;
left:10px;
display:block;
position: fixed; padding:10px;
width: auto;
height: auto;
margin-top: calc(5vmax + -10px);
margin-left: calc(60vw + -40%);
font-family:Consolas, Monaco, monospace;
transform: scale(1);
}
.vidim[contenteditable="true"] {
outline:2px dashed #ccc;
background-color:rgba(100,200,200,.2);
}
.vidim[contenteditable="true"]:hover{
z-index: 10;
outline:3px solid #28a;
background-color:rgba(100,200,200,1);
}
p[contenteditable="true"] {color:red;}
</style>
</section>
CSS контент
body {background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#243844;
background-size:16px 16px;
}
#test_code {background-color: #ccc;}
.vidim {
top:1px;
left:10px;
display:block;
position: fixed;
padding:10px;
width: auto;
height: auto;
margin-top: calc(5vmax + -10px);
margin-left: calc(60vw + -40%);
transform: scale(1);
font-family:Consolas, Monaco, monospace;
background-color:rgba(100,200,200,.2);
}
JavaScript контент
console.log("HI !!");
Вот результат
Песочница:
Произвольные примеры
HTML контент
<!-- HTML контент примера -->
<main class="vid">
<div><h1>- Наведи мыша на квадрат...</h1>
<p>Это будет чёрным.</p>
<section id="text" class="vidim" contenteditable="true">
<h1>Масштабируй это окно колесом мыши</h1>
<h3>Внеси изменения в стиль...</h3>
<style scoped>
.vidim style {
display:block;
padding:10px;
white-space:pre;
background:rgba(200,200,200,.6);
}
.vidim {
display:block;
position: fixed;
top:1px;
left:10px;
width: auto;
height: auto;
margin-top: calc(5vmax + -10px);
margin-left: calc(60vw + -40%);
padding:10px;
font-family:Consolas, Monaco, monospace;
transform: scale(1);
}
.vidim[contenteditable="true"] {
outline:2px dashed #ccc;
background-color:rgba(100,200,200,.4);
}
.vidim[contenteditable="true"]:hover {
z-index: 10;
outline:3px solid #28a;
background-color:rgba(100,200,200,1);
}
p[contenteditable="true"] {color:red;}
</style>
</section>
<p contenteditable="true">Это будет красным. <br>Ещё и редактируемым... </p>
<p>Это будет чёрным.</p>
</div>
</main>
CSS контент
/* CSS контент примера */
body {background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#243844;
background-size:16px 16px;}
.vid {
margin: 5px;
padding: 5px;
border: 1px solid white;
background-color: rgba(220,220,220,.9);
}
JavaScript контент
/* JavaScript контент примера */
function addOnWheel(elem, handler)
{if (elem.addEventListener)
{if ('onwheel' in document)
{elem.addEventListener("wheel", handler);}
else if ('onmousewheel' in document)
{elem.addEventListener("mousewheel", handler);}
else
{elem.addEventListener("MozMousePixelScroll", handler);}
}
else
{text.attachEvent("onmousewheel", handler);}
}
var scale = 1;
addOnWheel(text, function(e)
{
var delta = e.deltaY || e.detail || e.wheelDelta;
if (delta > 0) scale += 0.05;
else scale = Math.max(scale -0.05, 0.05);
text.style.transform = text.style.WebkitTransform = text.style.MsTransform = 'scale(' + scale + ')';
e.preventDefault();
} )
Возможности
- Масштабирование окошечка div
- Демонстрация
contenteditable="true"
- Редактирование
style scoped
- Пользовательские шаблоны
- Допустимое содержимое Нет, так как это bla.
- Допустимое содержимое Нет, так как это empty element.