Программы dashboard на русском. Как запилить свой дешборд на все случаи жизни? Мой дэшборд для офиса

Дать пользователям возможность форматирования текста без изучения дополнительного кода – это то, над чем разработчики усердно стараются последние несколько лет. И все не напрасно, они уже добились значительно прогресса. Представляем вам 10 наиболее используемых WYSIWYG-редакторов . Надеемся, что вы подберете что-то для собственных проектов.

01. NicEdit

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

02. TinyMCE

03. CKEditor

04. YUI Rich Text Editor

06. FreeTextBox

07. MooEditable

08. OpenWysiwyg?

09. Spaw Editor - сайт умер

10. jHtmlArea

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

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

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

Простой jquery скрипт для редактирования HTML5 текста и его сохранения с помощью ajax Демонстрация работы редактируемого HTML5 текста, с последующей передачей и записью посредством Jquery-Ajax-Php-mysql. Пример редактируемого текста html 5. Для редактирования нажмите мышкой на любой текст. Для записи просто нажмите мышкой в другое место или на кнопку сохранить. Сохранить

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

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

Простой скрипт jquery для редактирования текста и сохранением с помощью ajax

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); //записываем присланные данные от сервера в элемент, который редактировался $("Данные успешно сохранены:"+data+"") //выводим сообщение об успешном ответе сервера.insertAfter("#"+elementidsave) .addClass("success") .fadeIn("fast") .delay(1000) .fadeOut("slow", function() {this.remove();}); //уничтожаем элемент } else { $("Запрос завершился ошибкой:"+data+"") // выводим данные про ошибку.insertAfter("#"+elementidsave) .addClass("error") .fadeIn("fast") .delay(3000) .fadeOut("slow", function() {this.remove();}); //уничтожаем элемент } } }); } $(document).ready(function() { $("") //редактируемый элемент.mousedown(function (e) //обрабатываем событие нажатие мышки { e.stopPropagation(); elementid=this.id; contentold=$(this).html(); //текст до редактирования $(this).bind("keydown", function(e) { //обработчик нажатия Escape if(e.keyCode==27){ e.preventDefault(); $(this).html(contentold); //возвращаем текст до редактирования } }); $("#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) //если текст изменился { savedata(elementidsave,contentsave); //отправляем на сервер } }); });

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

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