Как визуально изменить текст на сайте

Об этой статье

Была ли эта статья полезной?

Перейти к содержимому

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

Консоль разработчика (через «Просмотреть код») в Google Chrome

Это самый простой и быстрый способ. Просто выделяете любой текст или его часть, которую хотите редактировать. Затем жмете правую кнопку мыши и выбираете «Просмотреть код».

Откроется блок в правой части страницы, в который можно вносить изменения. Кликаете правой клавишей мыши на выделенный фрагмент и выбираете «Редактировать как HTML».

Рассмотрим на примере. Допустим, вы зашли в группу «Барахолка». Увидели пост о продаже автомобиля «Газель» с ценой и прочими характеристиками.

Ради шутки внесли изменения. Взяли и поменяли стоимость на 16 р – потом сделали скрин и отправили другу, который ищет такую машину по дешевой цене.

Таким же способом вы сможете изменять все элементы на любом сайте.

Firefox и инструменты веб-разработчика

Если вы работаете в Firefox, то можете аналогичным способом редактировать контент на любой web-page в пару кликов.

Пошаговая инструкция:

1. Откройте браузер и конкретную страницу.

2. Кликните на три линии наверху и выберите «Другие инструменты» в раскрывшемся окне.

3. Нажмите «Инструменты веб-разработчика».

4. Это должно открыть специальную панель в нижней части окна браузера для просмотра исходного кода страницы и редактирования текста или других элементов.

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

6. Приступайте к редактированию элементов.

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

Inspect Element (расширение для Google Chrome)

Есть такой инструмент для временного редактирования элементов на сайте, который поддерживается большинством web-браузеров, – называется Inspect Element. Широко используется разработчиками, дизайнерами и другие специалистами для тестирования web-ресурса, без рисков что-то сломать в верстке. Ниже подробно расскажу, что такое Inspect и как его использовать для временного редактирования кода.

Inspect Element – это отдельное расширение от Google Chrome. Позволяет видеть и редактировать коды HTML, Javascript и CSS конкретного сайта. Например, легко изменять цвета, шрифты и многое другое. Установить его можно из магазина Хрома по этой ссылке.

Разработчики чаще всего используют Inspect для временного редактирования кода. Это полезно, потому что можно сразу тестить изменения в своем браузере в рамках одного сеанса. Это означает, что получится определить причины практически любых ошибок в коде, не рискуя нарушить функциональность сайта или вызвать дополнительные проблемы.

Как работать в Inspect

Подробная инструкция по работе:

• Установите расширение с официальной страницы.
• Перейдите на сайт, который хотите редактировать.
• Кликните на расширения и выберите Inspect.

• Щелкните на тот элемент, который хотите изменить в режиме онлайн. Например, выбрав Border Sideline.

Кто и для чего может использовать изменение содержимого страницы через код элемента?

Этот инструмент можно использовать для разных задач, поэтому он облюбован специалистами различных сфер деятельности. Кому же он приглянулся?

1. Web-дизайнеры. Они могут использовать инструменты разработчика перед реализацией цветовых элементов, общего дизайна или макетов, установкой адаптивной верстки – короче, для предварительного анализа. Например, внести какие-то изменения, сделать скрин и отправить заказчику. Если последнему понравится, то приступают уже к настоящим изменениям.
2. Маркетологи. Они применяют инструмент для принятия конкретных маркетинговых решений. Например, анализируют с помощью этого инструмента сайт конкурента, чтобы протестить элементы, которые могут увеличить конверсию.
3. Разработчики. Быстро проверяют изменения, которые необходимо внести.

Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов HTML5 — contenteditable, Jquery, Ajax и PHP создадим простой редактор текста HTML5 сайта.

Наш редактор будет обладать следующими свойствами:
— при клике мышкой на тексте предназначенном для редактирования этот текст сразу можно редактировать;
— при нажатии клавиши Escape после редактирования текста, все изменения в текущий текст отменяются;
— при потере фокуса, либо клике для редактирования другого текста, измененный текст отправляется на сервер, выводится сообщение о статусе отправки и ответа сервера.

Ниже приводится HTML код редактируемой страницы:

<!DOCTYPE html>
<html lang="ru">
<body>
<div id="wrap">
<h1 id="item1_title" contenteditable="true" ><a href="http://jquery.ua-opt.com/htm5-text-edit.html">Простой jquery скрипт для редактирования  HTML5 текста и его сохранения с помощью ajax</a></h1>
<h3 id="item1_subtitle" contenteditable="true">Демонстрация работы  <i>редактируемого HTML5 текста</i>, с последующей передачей и записью посредством Jquery-Ajax-Php-mysql.</h3>
<div id="item1_content" contenteditable="true">Пример редактируемого текста html 5. Для редактирования нажмите мышкой на любой текст. Для записи просто нажмите мышкой в другое место или на кнопку сохранить.</div>
<button id="save">Сохранить</button>
</div>
</body>
</html>

Как видим, каждый редактируемый текст заключен в тег с включенным свойством contenteditable — фишкой HTML5, которая позволяет редактировать текст прямо в браузере. Для сохранения на сервере нужно точно идентифицировать редактируемый текст, поэтому id у нас содержит идентификатор материала и поле базы данных, разделенных нижним подчеркиванием, например — id=«item1_title».

Кнопка «сохранить» тут для тех, кто привык нажимать на кнопку сохранить. Никакой особой нагрузки не выполняет, так как, при нажатии на кнопке наш текст теряет фокус и сохраняется (если изменен).

В заголовке нашей страницы подключаем style.css и jquery:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<title>Простой скрипт jquery для редактирования текста и сохранением с помощью ajax</title>
                <link rel="stylesheet" href="css/style.css">
                 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Далее идет собственно и наш скрипт:

<script>
var contentold={};   //объявляем переменную для хранения неизменного текста

function savedata(elementidsave,contentsave) {  
              //функция для сохранения отредактированного текста с помощью ajax
  $.ajax({
          url: 'save.php',    //url который обрабатывает и сохраняет наш текст
          type: 'POST',
          data: {
                     content: contentsave,     //наш пост запрос
                      id:elementidsave
                 },				
          success:function (data) { //получили ответ от сервера - обрабатываем
          if (data == contentsave)
        //сервер прислал нам отредактированный текст, значит всё ok
            {                                                                      
               $('#'+elementidsave).html(data);   
//записываем присланные данные от сервера в элемент, который редактировался
               $('<div id="status">Данные успешно сохранены:'+data+'</div>')   
                       //выводим      сообщение об успешном ответе сервера
                        .insertAfter('#'+elementidsave)
                        .addClass("success")
                        .fadeIn('fast')
                        .delay(1000)
                        .fadeOut('slow', function() {this.remove();}); 
                            //уничтожаем элемент
                }
                  else
                 {
                   $('<div id="status">Запрос завершился ошибкой:'+data+'</div>')
                                                // выводим данные про ошибку
                       .insertAfter('#'+elementidsave)
                       .addClass("error")
                       .fadeIn('fast')
                       .delay(3000)
                       .fadeOut('slow', function() {this.remove();}); 
                             //уничтожаем элемент
                        }
                    }
               });
       }               
    $(document).ready(function() {
       	$('[contenteditable="true"]')     //редактируемый элемент
            .mousedown(function (e)    //обрабатываем событие нажатие мышки 
                  {
                    e.stopPropagation();                                
                    elementid=this.id;
                    contentold[elementid]=$(this).html();  //текст до редактирования
                    $(this).bind('keydown', function(e) {    //обработчик нажатия Escape
                        if(e.keyCode==27){
                             e.preventDefault();
                             $(this).html(contentold[elementid]);
                                       	//возвращаем текст до редактирования	
                             }
                           });
                           $("#save").show();//показываем кнопку "сохранить"
                              })
              .blur(function (event)      //обрабатываем событие потери фокуса
                  {
                      var elementidsave=this.id;             //id элемента потерявшего фокус         
                      var  contentsave = $(this).html();           //текст для сохранения
                      event.stopImmediatePropagation();
                      if (elementid===elementidsave)   
                                    // если id не совпадает с id элемента, потерявшего фокус,
                      {$("#save").hide(); } 
                           // значит фокус  в редактируемом элементе, кнопку не прячем
                      if (contentsave!=contentold[elementidsave])  //если текст изменился           
                            {    
                                savedata(elementidsave,contentsave);   //отправляем на сервер
                                }
                    });      
	});
</script>

Принимаем наш отредактированный текст на сервере — файл save.php

<?php
	//include("db.php");
                      $id= filter_input (INPUT_POST ,  'id' , FILTER_SANITIZE_STRING );
                      $id=explode('_', $id);
                      $itemid=mysql_real_escape_string($id[0]);
                      $itempole=mysql_real_escape_string($id[1]);
                      $content = $_POST['content']; //get posted data
	//$content = mysql_real_escape_string($content);	//escape string	
	//$sql = "UPDATE content SET $itempole = '$content' WHERE element_id = '$itemid' ";
	if ($content) 
                     {
                       print $content;
                     }
                     else print '№1';
  ?>

Особенно удобен наш редактор для табличных данных (например прайс), где не нужно текстовое оформление, а необходимо быстро поправить, либо внести новые данные (модернизируем скрипт). Для себя я модернизирую скрипт, чтобы вносить, заполнять базу данных товаров. Заполнять базу таким способом будет также удобно, как в Excel-е, которому мы так привыкли.

Демо версия нашего простого скрипта для редактирования HTML[5.
Скачать пример.

При редактировании текстовых полей открывается панель визуального редактора.

Вставить изображение

Открывает окно, при помощи которого можно вставить изображение в редактируемое текстовое поле.

Вставить видео

Таблица

Позволяет создать и отредактировать созданную таблицу.

Вставить

При выборе данного инструмента появится сообщение о том, что вставку необходимо делать при помощи сочетаний клавиш «CTRL+X» (вырезать), «CTRL+C» (скопировать), «CTRL+V» (вставить).

Вставить как текст

Если скопированный текст был отформатирован, то при выборе данного инструмента и последующей вставке (CTRL+V) текст будет вставлен без заданного формата (со стандартным цветом, шрифтом и размером).

В противном случае текст будет вставлен в том же виде, в котором он был скопирован.

Примечание: по умолчанию данный инструмент является неактивным.

Очистить формат

При выделении форматированного текста в редактируемом поле и выборе данного инструмента, текст будет очищен от форматирования (текст будет отображаться со стандартным цветом, шрифтом и размером).

Вставить/редактировать ссылку/ссылку на файл

Открывается окно для вставки ссылки с возможностью задать внешнюю или внутреннюю ссылку, задать отображаемый текст и выбрать, будет ссылка открываться в новом окне или нет.

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

Внутренняя ссылка

Если ссылка должна осуществлять переход на одну из страниц сайта, то необходимо нажать на //скрин в поле «Адрес ссылки».

Внешняя ссылка

Если ссылка должна осуществлять переход на сторонний ресурс, то необходимо установить галочку в поле «Внешняя ссылка» и ввести адрес в поле «Адрес ссылки» вручную.

Ссылку можно добавить как к тексту, так и к изображению.

Ссылка для текста

Вставить ссылку для текста можно двумя способами:

1. Установить курсор в поле, нажать на , ввести адрес ссылки и заполнить поле «Отображаемый текст». В результате появится «Отображаемый текст» с прикрепленной к нему ссылкой.
2. Выделить необходимый текст при помощи курсора, нажать на , ввести адрес ссылки. Поле «Отображаемый текст» уже будет заполнено выделенным текстом. В результате, к выделенному тексту прикрепится ссылка.

Поле «Отображаемый текст» не является аналогом тега «Alt». Заполнять данное поле имеет смысл только при добавлении ссылки к тексту. При задании ссылки для текста нет возможности добавить поясняющий комментарий.

Изменить стиль отображения ссылки (убрать подчёркивание) в текстовом поле можно через функцию визуального редактора «Исходный код». Для этого, в коде ссылки, между «a» и «href» необходимо разместить style=»text-decoration: none;»

Ссылка для изображения

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

Удалить ссылку

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

Специальные символы

Открывает окно со специальными символами, которые добавляются в текстовое поле при нажатии. Когда все необходимые символы добавлены, окно можно закрыть.

Исходный код

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

В визуальном редакторе также имеются инструменты для редактирования текста.