Разработка интерактивного web-редактора текста с математическими выражениями - Дипломная работа

Актуальность темы дипломной работы связана со значительным распространением web-приложений и заключается в необходимости разработки программного обеспечения для научных работ в области создания и редактирования документов с математическими выражениями. На данный момент, таких web-приложений нет, но есть отдельные компоненты, не полностью обеспечивающие требуемый функционал, в связи с чем, использование их на практике для создания документов с математическими формулами крайне затруднительно [1]. По этой причине необходимо разработать удобный web-редактор, в котором, конечный пользователь не отвлекался бы от решения своих задач на решение технических вопросов создания документов, которые стандартное не web ориентированное приложение решает самостоятельно. Целью дипломной работы является разработка интерактивного Web-редактора текста с математическими выражениями, который обладает всеми выше перечисленными особенностями обычных приложений и вдобавок к этому работает на большинстве современных web-браузерах. Результатом дипломной работы должно быть web-приложение, состоящее из уже разработанных сторонних свободно распространяемых компонентов и web-приложений.Компоненты используемые в приложении: - Twitter Bootstrap Framework [2]. Twitter Bootstrap подключается к основному файлу проекта дипломной работы index.html, путем подключения CSS таблицы стилей и JS-скриптов [4] перечисленных в таблице 1. Имя файла Описание содержимого bootstrap-responsive.css CSS таблица стилей jquery.js JQUERY JS библиотека bootstrap-transition.js JS скрипт - основной скрипт bootstrap-alert.js JS скрипт - всплывающие диалоги bootstrap-modal.js JS скрипт - модальные окна bootstrap-dropdown.js JS скрипт - выпадающее меню bootstrap-scrollspy.js JS скрипт - скроллинг бар bootstrap-tab.js JS скрипт - вкладки bootstrap-tooltip.js JS скрипт - всплывающие подсказки Имя файла Описание содержимого bootstrap-popover.js JS скрипт - всплывающий напоминания bootstrap-button.js JS скрипт - оформление кнопок bootstrap-collapse.js JS скрипт - визуальный эффект сворачивания разворачивая окна bootstrap-carousel.js JS скрипт - визуальный эффект «Меню-Карусель» bootstrap-typeahead.js JS скрипт - верхнее меню CKEDITOR подключается к основному файлу дипломной работы «index.html», а также его API функции вызываются из файлов «COREIWE.js».При открытии страницы приложения «index.html», в любом из современных web-браузеров с поддержкой HTML5, например: Google Chrome, Mozilla Firefox, MS Internet Explorer, получим web-страницу представленную на рисунке 1. Сверху расположена панель управления документом (рисунок 2) и панель редактирования текста, шрифта и его стиля (рисунок 3). Панель управления документом - меню «Документ» позволяет: - открывать документ с жесткого диска пользователя, загружая его в область редактирования (рисунок 4); сохранять документ на жесткий диск из области редактирования (рисунок 5); Панель управления документом - меню «Вставить объект» позволяет: - Вставить математическую формулу с редактора DRAGMATH (рисунок 7-8);При выборе меню «Документ» - «Открыть файл» с помощью компонента «Twitter Bootstrap» создается диалог представленный на рисунке 4. В открывшемся окне расположена панель со свойством «Drag-and-Drop», отлавливающая событие перетаскивания файла мышкой, и элемент «input», ожидающий нажатия для вызова встроенного в браузер диалога открытия файлов. После того как пользователь выберет необходимый для открытия файл, ему необходимо нажать на кнопку «Открыть», которая устанавливает значение поля редактора CKEDITOR с помощью его API функции: CKEDITOR.instances["editor1"].SETDATA(CONTENTSTRING); При выборе меню «Документ» - «Сохранить файл» создается диалог представленный на рисунке 5.При загрузке Web-редактора осуществляется следующая последовательность действий: - Инициализация компонента «Twitter Bootstrap» и создание интерфейса: - Создание меню документа Создание невидимых диалогов: «Открыть файлы», «Сохраненить файл», «Добавить файл» и «Подключенные плагины». В случае вызова редактора математических формул DRAGMATH происходит открытие нового окна и загрузка Java applet. Процесс экспортирования формулы в документ заключается в передачи ее через интернет на сервис MATHTRAN в виде URL ссылки и получения с него изображения.В ходе работы над данным проектом было исследовано несколько технологий: HTML5, динамическая работа с тегами DOM, работа с регулярными выражениями на языке JAVASCRIPT, построения web-документов XML и HTML. Изучены следующие web-приложения: Twitter Bootstrap Framework, CKEDITOR, DRAGMATH, JQUERY, MATHTRAN.

СОДЕРЖАНИЕ

ВЕДЕНИЕ

1. Подбор компонентов

2. Описание интерфейса

3. Реализация функций открытия и сохранения файлов

4. Алгоритм работы компонентов

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ПРИЛОЖЕНИЕ

ВЕДЕНИЕ

В ходе работы над данным проектом было исследовано несколько технологий: HTML5, динамическая работа с тегами DOM, работа с регулярными выражениями на языке JAVASCRIPT, построения web-документов XML и HTML. Изучены следующие web-приложения: Twitter Bootstrap Framework, CKEDITOR, DRAGMATH, JQUERY, MATHTRAN. Разработана структура их взаимодействия. Исследованы механизмы работы с локальными файлами в HTML5.

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

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

1 Матросов, А. HTML 4.0 Новый уровень создан / А. Матросов, А. Сергеев, М. Чаунин. - СПБ.: «БХВ-Петербург», 2003. - 671 с.

2 Getting Twitter Bootstrap Framework. URL: http://twitter.github.io/bootstrap/getting-started.html (дата обращения 01.03.2013).

3 JQUERY API Documentation. URL: http://api.jquery.com/ (дата обращения 01.03.2013).

4 Htmlweb.ru. (2008). Java Script. Примеры. Методы. Функции. \

URL: http://htmlweb.ru/java/example (дата обращения 01.03.2013).

5 Документация на CKEDITOR. URL: http://docs.cksource.com/Main_Page (дата обращения 01.03.2013).

6 Документация на DRAGMATH. URL: http://www.dragmath.bham.ac.uk/doc/index.html (дата обращения 01.03.2013).

7 W3C, Inc. (1994). Document Object Model (DOM). URL: http://www.w3.org/DOM (дата обращения 01.03.2013).

8 W3C, Inc. (1994). XML DOM Tutorial. URL: http://www.w3schools.com/dom (дата обращения 01.03.2013).Основное

Новый

Открыть

Сохранить

Дополнительно

Добавить файл

Вставить объект

Встроенные

Редактор математических формул DRAGMATH

Подключенные

Список плагинов

Информация

Лицензия

Лицензия GPL

Offline Web-редактор

Загрузить

?

Открыть файлы перетащите сюда

Закрыть

Открыть

?

Добавить файл перетащите сюда

Закрыть

В начало

В конец

?

Сохранить файл

Выберите формат файла

HTML документ

XML документ

Закрыть

Сохранить

?

Подключенные плагины

Подключить

Исключить

Закрыть

<!- javascript

Исходный код «COREIWE.js»

// --------------- ОТКРЫТИЕ ФАЙЛА --------------------------------- var CONTENTSTRING="(empty)";

var reader = new FILEREADER();

var TESTBLOB = new Blob(["Test Blob"], { "type" : "text/plain" });

reader.onload = function(event) {CONTENTSTRING = event.target.result;};

reader.onerror = function(event) {alert("Load error!");};

function HANDLEFILESELECT(evt) { var files = evt.target.files; // FILELIST object

//отображение некоторых сведений о файле var output = [];

for (var i = 0, f; f = files[i]; i ) { output.push("Инфа для отладки: ", escape(f.name), " (", f.type || "n/a", ") - ", f.size, " bytes, last modified: ", f.LASTMODIFIEDDATE.TOLOCALEDATESTRING(), "");

}

//document.GETELEMENTBYID("list").INNERHTML = "" output.join("") "";

try

{ reader.READASTEXT(files[0]/*, "UTF-8"*/);

} catch(err) {alert(err.message);}

} document.GETELEMENTBYID("files").ADDEVENTLISTENER("change", HANDLEFILESELECT, false);

function HANDLEFILESELECT2(evt) { evt.STOPPROPAGATION();

evt.PREVENTDEFAULT();

var files = evt.DATATRANSFER.files; // FILELIST object.

// отображение некоторых сведений о файле var output = [];

for (var i = 0, f; f = files[i]; i ) { output.push("Инфа для отладки: ", escape(f.name), " (", f.type || "n/a", ") - ", f.size, " bytes, last modified: ", f.LASTMODIFIEDDATE.TOLOCALEDATESTRING(), "");

}

//document.GETELEMENTBYID("list").INNERHTML = "" output.join("") "";

try

{ reader.READASTEXT(files[0]/*, "UTF-8"*/);

} catch(err) {alert(err.message);}

//alert(CONTENTSTRING);

} function HANDLEDRAGOVER(evt) { evt.STOPPROPAGATION();

evt.PREVENTDEFAULT();

evt.DATATRANSFER.DROPEFFECT = "copy"; // Explicitly show this is a copy.

}

// Setup the dnd listeners. var DROPZONE = document.GETELEMENTBYID("drop_zone");

DROPZONE.ADDEVENTLISTENER("dragover", HANDLEDRAGOVER, false);

DROPZONE.ADDEVENTLISTENER("drop", HANDLEFILESELECT2, false);

function OPENFILE()

{ if (window.File && window.FILEREADER && window.FILELIST && window.Blob) {

// Great success! All the File APIS are supported. ETARGET = document.GETELEMENTBYID("OPENFILES");

ETARGET.style.display=="none" ? ETARGET.style.display="block" : ETARGET.style.display="none";

ETARGET.display=="none" ? ETARGET.display="block" : ETARGET.display="none";

} else { alert("The File APIS are not fully supported in this browser.");

}

} function OPENFILE1()

{

CKEDITOR.instances["editor1"].SETDATA(CONTENTSTRING);

}

// --------------- ДОБАВЛЕНИЕ ОБЪЕКТА ---------------------------- document.GETELEMENTBYID("files2").ADDEVENTLISTENER("change", HANDLEFILESELECT, false);

var DROPZONE = document.GETELEMENTBYID("drop_zone2");

DROPZONE.ADDEVENTLISTENER("dragover", HANDLEDRAGOVER, false);

DROPZONE.ADDEVENTLISTENER("drop", HANDLEFILESELECT2, false);

function ADDFILE1(position)

{ if(position == 1)

{

CKEDITOR.instances["editor1"].SETDATA(CONTENTSTRING CKEDITOR.instances["editor1"].GETDATA());

} else

{

CKEDITOR.instances["editor1"].SETDATA(CKEDITOR.instances["editor1"].GETDATA() CONTENTSTRING);

}

}

// --------------- СОХРАНЕНИЕ ФАЙЛА ------------------------------ function SAVEFILE1()

{ var format = document.GETELEMENTBYID("SAVEFORMAT").value;

//alert(format);

var str = CKEDITOR.instances["editor1"].GETDATA();

var str11 = "empty";

if(format == ".html")

{ str11 = "









" str "



";

} if(format == ".xml")

{ str11 = "

" str;

} var ua = navigator.USERAGENT.TOLOWERCASE();

if(ua.INDEXOF("msie") != -1 && ua.INDEXOF("opera") == -1 && ua.INDEXOF("webtv") == -1) { var mydoc = window.open();

mydoc.document.write(str11);

mydoc.document.EXECCOMMAND("SAVEAS",true,format);

} else { var mydoc = window.open("data:application/download;charset=utf-8;base64," btoa(str11));

} var str12 = str.TOLOWERCASE();

var ind=0;

var ind2=0;

var imgurl;

while(str12.INDEXOF("img src=\"",ind) != -1)

{ ind = str12.INDEXOF("img src=\"",ind) 9;

ind2=ind;

ind2= str12.INDEXOF("\"",ind2);

imgurl=str12.slice(ind, ind2);

var win = window.open (imgurl);

SETTIMEOUT("win.document.EXECCOMMAND("SAVEAS")", 500);

}

}

// --------------- РАБОТА С ПЛАГИНАМИ ----------------------------- var OBJECTPL = document.GETELEMENTBYID("plist");

var ARRPLUGINS = [["Нет подключенных плагинов", "-"]];

function PLIST()

{

//отображение подключенных плагинов в списке for(i = 0; i < ARRPLUGINS.length; i )

{ var opt=document.CREATEELEMENT("option");

opt.text=ARRPLUGINS[i][0];

opt.value=ARRPLUGINS[i][1];

OBJECTPL.add(opt,null);

}

} var firstadd=1;

function PCONNECT()

{ var file = document.GETELEMENTBYID("files3").files[0].name; // FILELIST object

//добавление в массив плагинов var opt=document.CREATEELEMENT("option");

opt.text=file;

opt.value=file;

OBJECTPL.add(opt,null);

if(firstadd)

{

OBJECTPL.remove(0); firstadd-;

}

ARRPLUGINS[ARRPLUGINS.length][0] = file;

ARRPLUGINS[ARRPLUGINS.length][1] = file;

//подключение var script = document.CREATEELEMENT("SCRIPT");

script.src = file;

document.GETELEMENTSBYTAGNAME("HEAD").APPENDCHILD(script);

//Запуск функции инициализации плагина file[file.length-3]=0;

eval("Init" file "()");//"Init()"

} function PDISABLE()

{

//исключение var script = document.CREATEELEMENT("SCRIPT");

script.src = OBJECTPL.value;

document.GETELEMENTSBYTAGNAME("HEAD").REMOVECHILD(script);

OBJECTPL.remove(OBJECTPL.SELECTEDINDEX);

}

Исходный код «DRAGMATH.html»

DRAGMATH

To use this page you need a Java-enabled browser. Download the latest Java plug-in from Java.com

Исходный код «TESTPLUGIN.js»

//Пример плагина function INITTESTPLUGIN() // функция инициализации Init()

{ alert("Test Plugins Work");

}

Размещено на