Редактирование текстовых элементов

Начиная с версии 5.5, в Internet Explorer ввели очень интересное свойство contentEditable. Оно сохранилось и в Microsoft Edge. Применив это свойство к любому элементу HTML-документа, вы можете этот элемент редактировать прямо в окне браузера (elementID.contentEditable=true). А самое главное то, что после внесения изменений, можно отключить редактирование и наслаждаться результатом, не перезагружая сам документ (elementID.contentEditable=false). Итак Microsoft Edge можно использовать как простенький WYSIWYG-редактор.

Добавим кнопку, которая будет переключать режимы редактирования (включить/отключить). В этом поможет свойство isContentEditable, которое возвращает true, если объект можно редактировать, или false, если нельзя.

Для изменения начертания редактируемого текста, вы можете использовать клавиатурные сокращения:

Картинки можно вставлять по copy -> paste...

Редактируемый блок

Исходный код этого примера:

<style>
    .eDiv2 {
        border: 1px solid #666;
        padding: 10px;
    }
</style>
<script type="text/javascript">
    function onOff(){
        document.getElementById("sButton").value = (eDiv2.isContentEditable) ? "включить редактирование" : "отключить редактирование";
        document.getElementById("eDiv2").contentEditable =(eDiv2.isContentEditable) ? false : true;
        return false;
    }
</script>
<h3>Редактируемый блок</h3>
<div class="eDiv2">
    <div id="eDiv2" contentEditable="false">
        Этот текст редактируемый.<br>
        Этот текст редактируемый.<br>
        Этот текст редактируемый.<br>
        Этот текст редактируемый.<br>
    </div>
    <p></p><button id="sButton" onClick=onOff();>ВКЛЮЧИТЬ РЕДАКТИРОВАНИЕ</button></p>
</div>

А теперь, можете войти на любой сайт в интернете (к другу - пошутить, к врагу - напакостить) и в адресной строке вашего браузера (как я заметил в начале, это должен быть IE или Edge) написать следующую строчку:

javascript:void(document.body.contentEditable = true);

...и нажать ENTER.

После этого переделываете страничку так, как вам вздумается, а готовую «работу» выводите на принтер.

Для последующих редизайнов можно создать JS-закладку, состоящую из одной строчки:

javascript:void(document.body.contentEditable = (document.body.isContentEditable) ? false : true);