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

 

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования

«КУБАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»

Кафедра математического моделирования

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ (ДИПЛОМНАЯ) РАБОТА

РАЗРАБОТКА ИНТЕРАКТИВНОГО WEB-РЕДАКТОРА ТЕКСТА С МАТЕМАТИЧЕСКИМИ ВЫРАЖЕНИЯМИ

Работу выполнил C.C. Любарский

Научный руководитель, доцент, канд. физ.-мат наук М.С.Капустин

Краснодар 2013

РЕФЕРАТ

Дипломная работа 9 рис., 3 таблицы, 8 источников, 1 прил.

Объектом исследования является интерактивный web-редактор текста с математическими выражениями.

Цель работы:

-рассмотреть необходимые компоненты;

-создать интерфейс приложения;

-решить задачи открытия и сохранения документов на жесткий диск компьютера;

-исследовать распространенные форматы файлов;

-решить задачу взаимодействия компонентов;

-решить задачу подключения дополнительных компонентов.

Разработка приложения проводилась на языке JavaScript c использованием языка разметки HTML.

Результаты работы могут быть использованы в научно-исследовательской деятельности.

СОДЕРЖАНИЕ

ВЕДЕНИЕ

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

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

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

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

ЗАКЛЮЧЕНИЕ

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

ПРИЛОЖЕНИЕ

ВЕДЕНИЕ

Актуальность темы дипломной работы связана со значительным распространением web-приложений и заключается в необходимости разработки программного обеспечения для научных работ в области создания и редактирования документов с математическими выражениями. На данный момент, таких web-приложений нет, но есть отдельные компоненты, не полностью обеспечивающие требуемый функционал, в связи с чем, использование их на практике для создания документов с математическими формулами крайне затруднительно [1]. По этой причине необходимо разработать удобный web-редактор, в котором, конечный пользователь не отвлекался бы от решения своих задач на решение технических вопросов создания документов, которые стандартное не web ориентированное приложение решает самостоятельно.

Рассматривая такие приложения можно выделить их основные особенности:

-возможность создания, открытия, сохранения документа на жесткий диск компьютера, в нескольких распространенных форматах;

-наличие средств стилизации текста;

-свойство «что видишь, то и получишь» - WYSIWYG - в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию;

-достаточный набор математических элементов и алфавитных символов для описания всевозможных формул;

-возможность редактирования формул.

Целью дипломной работы является разработка интерактивного Web-редактора текста с математическими выражениями, который обладает всеми выше перечисленными особенностями обычных приложений и вдобавок к этому работает на большинстве современных web-браузерах. Решение актуальных проблем связанных с удобством использования разработанного приложения: интуитивность дизайна и простота навигации. Поставленные задачи для достижения конечной цели:

-рассмотреть необходимые компоненты;

-создать интерфейс;

-решить задачи открытия и сохранения документов на жесткий диск компьютера;

-исследовать распространенные форматы файлов;

-решить задачу взаимодействия компонентов;

-решить задачу подключения дополнительных компонентов.

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

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

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

Для решения задач дипломной работы были использованы следующие методы:

-анализ технической литературы и web-сайтов данной тематики;

-анализ общепринятых и утвержденных стандартов;

-изучение практики написания подобного рода программ;

-сравнение технологий программирования;

-моделирование и конкретизация задач;

-проведения аналогии с другими решениями.

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

Примеры известных web-приложений:

-Microsoft Office Web App - позволяющий создавать, открывать, редактировать и сохранять документы Word, Excel, PowerPoint и использовать OneNote через браузер;

-GoogleDocs - также как и Microsoft Office Web App позволяет редактировать и сохранять документы у себя на сервере;

-Photoshop Express Editor - является экспресс версией студии Photoshop, позволяет загружать и редактировать изображения.

Хотя их функционал не достаточно обширен как у обычных приложений - факт того что их можно использовать бесплатно и на разных ОС, включая и мобильные версии для планшетов и телефонов, дает им все большую популярность. С введением стандарта HTML5, разрабатывать такие приложения стало гораздо проще. И даже появились ОС полностью ориентированные на такие приложения, например Google Chrome OS.

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

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

Компоненты используемые в приложении:

-Twitter Bootstrap Framework [2]. Гладкий, интуитивно понятный, и мощный front-end интерфейс для быстрой и легкой разработки. Был положен в основу интерфейса Web-редактора.

Основные причины, по которым использовался именно он:

-его интерфейс достаточно популярен на данное время;

-сменить его не составляет особого труда;

-поддержка разнообразных тем и стилей оформления;

-широкие возможности по изменению интерфейса;

-встроенная поддержка таких необходимых вещей как выпадающее меню, всплывающие окна;

-обновляется.

Реализован на библиотеке JQuery [3]. Twitter Bootstrap подключается к основному файлу проекта дипломной работы index.html, путем подключения CSS таблицы стилей и JS-скриптов [4] перечисленных в таблице 1.

Таблица 1 - Файлы Twitter Bootstrap Framework

Имя файлаОписание содержимогоbootstrap-responsive.cssCSS таблица стилейjquery.jsJQuery JS библиотекаbootstrap-transition.jsJS скрипт - основной скриптbootstrap-alert.jsJS скрипт - всплывающие диалогиbootstrap-modal.jsJS скрипт - модальные окнаbootstrap-dropdown.jsJS скрипт - выпадающее менюbootstrap-scrollspy.jsJS скрипт - скроллинг барbootstrap-tab.jsJS скрипт - вкладкиbootstrap-tooltip.jsJS скрипт - всплывающие подсказкиИмя файлаОписание содержимогоbootstrap-popover.jsJS скрипт - всплывающий напоминанияbootstrap-button.jsJS скрипт - оформление кнопокbootstrap-collapse.jsJS скрипт - визуальный эффект сворачивания разворачивая окнаbootstrap-carousel.jsJS скрипт - визуальный эффект «Меню-Карусель»bootstrap-typeahead.jsJS скрипт - верхнее меню

-CKEditor [5]. Один из лучших текстовых web-редакторов.

Его особенности:

-Предоставляет комплекс внутренних API-функций для взаимодействия с другими компонентами.

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

-Интернациональный интерфейс.

CKEditor подключается к основному файлу дипломной работы «index.html», а также его API функции вызываются из файлов «CoreIWE.js». Включенные файлы и папки представлены в таблице 2.

Таблица 2 - Файлы и папки CKEditor

Имя файла или папкиОписание содержимогоckeditor.jsОсновной JS скриптconfig.jsНастройка плагинаstyles.jsУстановка стиляcontents.cssCSS таблица стилейru.jsИнтернационализация: Русский языкИмя файла или папкиОписание содержимогоPluginsПапка с плагинамиSkinsПапка с настроенным интерфейсом

DragMath [6]. Свободный «drag and drop» редактор математических выражений. Представляет собой Java applet, который может быть запущен в web-браузере, с установленной платформой JRE, на большинстве компьютеров.

Редактор позволяет пользователям легко создавать математические выражения в традиционном для человека виде, и экспортировать результат в корректном виде, на разных синтаксисах.

Подключается к проекту в файле «DragMath.html» и «index.html».

Таблица 3 - Файлы и папки DragMath

Имя файла или папкиОписание содержимогоDragMath.jarОсновной Java applet файлConfig.xmlФайл настройкиMainApplet.classJava класс для отображенияFormatsПапка с набором форматов в xmlLangПапка с языкамиLibПапка дополнительных библиотек

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

При открытии страницы приложения «index.html», в любом из современных web-браузеров с поддержкой HTML5, например: Google Chrome, Mozilla Firefox, MS Internet Explorer, получим web -страницу представленную на рисунке 1.

Рисунок 1 - Начало работы с web-редактором

Сверху расположена панель управления документом (рисунок 2) и панель редактирования текста, шрифта и его стиля (рисунок 3). Панель управления документом - меню «Документ» позволяет:

-открывать документ с жесткого диска пользователя, загружая его в область редактирования (рисунок 4);

-сохранять документ на жесткий диск из области редактирования (рисунок 5);

-добавлять файлы к документу в начало или в конец (рисунок 6).

Рисунок 2 - Панель управления документом

Поддерживаемые форматы html, xml, txt, jpg.

Панель управления документом - меню «Вставить объект» позволяет:

-Вставить математическую формулу с редактора DragMath (рисунок 7-8);

-Подключить другие плагины (рисунок 9).

Рисунок 3 - Панель стилизации и редактирования текста

Рисунок 4 - Диалог открытия файла

На рисунке 7 представлена возможность стилизации текста и подготовлена математическая формула в DragMath для вставки в текст (рисунок 8). Чтобы подготовить формулы был вызван редактор DragMath «Вставить объект» > «Вставить математическую формулу DragMath».

Рисунок 5 - Диалог сохранения файла

Рисунок 6 - Диалог добавления файла

Рисунок 7 - Документ без математической формулы

Рисунок 8 - Документ со вставленными математическими формулами

В области для редактирования документа отображаются текст и математические выражения в таком виде, в каком их принято видеть на страницах обычных учебников по математике (рисунок 8).

Рисунок 9 - Диалог подключения плагинов

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

При выборе меню «Документ» - «Открыть файл» с помощью компонента «Twitter Bootstrap» создается диалог представленный на рисунке 4. В открывшемся окне расположена панель со свойством «Drag-and-Drop», отлавливающая событие перетаскивания файла мышкой, и элемент «input», ожидающий нажатия для вызова встроенного в браузер диалога открытия файлов. Как только одно из этих событий произойдет, будет вызвана функция чтения файла в переменную «ContentString». После того как пользователь выберет необходимый для открытия файл, ему необходимо нажать на кнопку «Открыть», которая устанавливает значение поля редактора CKEditor с помощью его API функции:

CKEDITOR.instances["editor1"].setData(ContentString);

Файлы HTML, XML, TXT должны быть в кодировке UTF-8. Также браузер должен поддерживать последнюю технологию HTML5.

При выборе меню «Документ» - «Сохранить файл» создается диалог представленный на рисунке 5. В открывшемся окне расположен список выбора формата сохранения файла: HTML или XML. При нажатии «Сохранить» происходит следующая последовательность действий:

-Содержимое области редактирования извлекается с помощью еще одной API CKEditor.instances["editor1"].getData();

-Обрамляется в соответствующие теги [7]:

-Для HTML вначале

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE html PUBLIC "" "">

<HTML lang="ru">

<HEAD></HEAD>

<BODY>

и в конце

</BODY>

</HTML>

-Для XML только вначале [8]

<?xml version="1.0" encoding="utf-8"?>

-Конвертирование изображений документа в формат BASE64 по схеме data: URL, для сохранения их в теле файла. По типу

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

-Отправка, через открытие нового окна в браузере, запроса пользователю на сохранение документа. Кодировка для сохранения UTF-8.

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

программный редактирование математический интерфейс

При загрузке Web-редактора осуществляется следующая последовательность действий:

-Инициализация компонента «Twitter Bootstrap» и создание интерфейса:

-Создание меню документа

-Создание невидимых диалогов: «Открыть файлы», «Сохраненить файл», «Добавить файл» и «Подключенные плагины».

-Инициализация компонента «CKEditor» в заданной области документа, настройка меню редактирования и стилизации текста.

-Подгрузка JS-скрипта с функциями: открытия файла, сохранения файла и добавления плагинов.

В случае вызова редактора математических формул DragMath происходит открытие нового окна и загрузка Java applet. Поэтому для его работы необходима установленная JRE среда.

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

Подключение дополнительных плагинов (рисунок 9) происходит по простому принципу подключения обычных JS-скриптов в тело документа, и вызов функции инициализации плагина

Init<имя_плагина>();

Код разработанного web-редактора представлен в приложении А.

ЗАКЛЮЧЕНИЕ

В ходе работы над данным проектом было исследовано несколько технологий: 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: #"justify">jQuery API Documentation. URL: #"justify">Htmlweb.ru. (2008). Java Script. Примеры. Методы. Функции. \

URL: #"justify">Документация на CKEditor. URL: #"justify">Документация на DragMath. URL: #"justify">7 W3C, Inc. (1994). Document Object Model (DOM). URL: #"justify">8 W3C, Inc. (1994). XML DOM Tutorial. URL: #"justify">ПРИЛОЖЕНИЕ

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE html PUBLIC "" "">

<HTML lang="ru">

<HEAD>

<META charset="utf-8">

<TITLE>Интерактивный Web-редактор текста с математическими выражениями</TITLE>

<META name="viewport" content="width=device-width, initial-scale=1.0">

<META name="description" content="">

<META name="author" content="">

<!-- Стиль твитер бутстрап -->

<LINK href="Bootstrap,%20from%20Twitter_files/bootstrap.css" rel="stylesheet">

<STYLE type="text/css">{top: 40px;bottom: 40px;

}

.sidebar-nav {: 9px 0;

}

#drop_zone {: 2px dashed #bbb;

moz-border-radius: 5px;

webkit-border-radius: 5px;radius: 5px;: 25px;align: center;: 20pt bold 'Vollkorn';: #bbb;

}

#drop_zone2 {: 2px dashed #bbb;

moz-border-radius: 5px;

webkit-border-radius: 5px;radius: 5px;: 25px;align: center;: 20pt bold 'Vollkorn';: #bbb;

}

.thumb {: 75px;: 1px solid #000;: 10px 5px 0 0;

}

</STYLE>

<LINK href="Bootstrap,%20from%20Twitter_files/bootstrap-responsive.css"="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

<!--[if lt IE 9]>

<script src="#"justify"><![endif]-->

<meta charset="utf-8">

<script src="ckeditor/ckeditor.js"></script>

<META name="GENERATOR" content="MSHTML 10.00.9200.16540">

</HEAD>

<BODY>

<textarea>

</textarea>

<DIV>

<DIV>

<DIV>

<DIV>

<!-- <P>

</P> -->

<UL>

<li>

<a href="#">

<ul>

<li>

<li><a href="">Новый</a></li>

<li><a data-toggle="modal" href="#OpenFiles">Открыть</a></li>

<li><a data-toggle="modal" href="#SaveFile">Сохранить</a></li>

<li>

<li>

<li><a data-toggle="modal" href="#ImportFrame">Добавить файл</a></li>

</ul>

</li>

<li>

<a href="#">

<ul>

<li>

<li><a href="DragMath.html" target="_blank" onClick="dmWin = window.open(this.href, 'DragMath', 'location,width=545,height=344,top=100,left=700'); dmWin.focus(); return false;">Редактор математических формул DragMath</a></li>

<li>

<li>

<li>

<li><a data-toggle="modal" href="#PluginsList" onclick="PList(); return false;">Список плагинов</a></li>

</ul>

</li>

<li>

<a href="#">

<ul>

<li>

<li>

<li><a href="LICENSE-gpl.txt" target="_blank">Лицензия GPL</a></li>

<li>

<li><a href="Offline.zip" target="_blank">Загрузить</a></li>

</ul>

</li>

</UL></DIV><!--/.nav-collapse -->

</DIV></DIV></DIV>

<DIV>

<DIV>

<DIV>

<div>

<div>

<button>="modal">×</button>

<h3>Открыть файлы</h3>

</div>

<div>

<div id="drop_zone">перетащите сюда</div>

<br />

<center><input>

<output id="list"></output>

</div>

<div>

<a data-toggle="modal" href="#OpenFiles">

<a data-toggle="modal" href="#OpenFiles">

</div>

</div>

<div>

<div>

<button>

<h3>Добавить файл</h3>

</div>

<div>

<div id="drop_zone2">перетащите сюда</div>

<br />

<center><input>

<output id="list2"></output>

</div>

<div>

<a data-toggle="modal" href="#ImportFrame">

<a data-toggle="modal" href="#ImportFrame">

<a data-toggle="modal" href="#ImportFrame">

</div>

</div>

<div>

<div>

<button>

<h3>Сохранить файл</h3>

</div>

<div>

<br />Выберите формат файла <br /> <br />

<select id="SaveFormat">

<option value=".html">HTML документ</option>

<option value=".xml">XML документ</option>

</select>

<br />

</div>

<div>

<a data-toggle="modal" href="#SaveFile">

<a data-toggle="modal" href="#SaveFile">

</div>

</div>

<div>

<div>

<button>

<h3>Подключенные плагины</h3>

</div>

<div>

<select id="plist" size="10" style="width:100%;"></select>

<br /><input type="file" id="files3" name="files3[]" multiple />

</div>

<div>

<div>

<button>

<button>

</div>

<a data-toggle="modal" href="#PluginsList">

</div>

</div>

<HR>

<FOOTER></FOOTER>

</DIV>

</DIV>

</DIV>

<!--/.fluid-container-->

<!-- javascript

<SCRIPT src="Bootstrap,%20from%20Twitter_files/jquery.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-transition.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-alert.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-modal.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-dropdown.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-scrollspy.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-tab.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-tooltip.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-popover.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-button.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-collapse.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-carousel.js"></SCRIPT>

<SCRIPT src="Bootstrap,%20from%20Twitter_files/bootstrap-typeahead.js"></SCRIPT>

<SCRIPT src="CoreIWE.js"></SCRIPT>

</BODY>

</HTML>

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

// --------------- ОТКРЫТИЕ ФАЙЛА ---------------------------------

var ContentString='(empty)';reader = new FileReader();testBLOB = new Blob(['Test Blob'], { "type" : "text/plain" });.onload = function(event) {ContentString = event.target.result;};.onerror = function(event) {alert('Load error!');};handleFileSelect(evt) {files = evt.target.files; // FileList object

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

for (var i = 0, f; f = files[i]; i++) {.push('<li>Инфа для отладки: <strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',.size, ' bytes, last modified: ',.lastModifiedDate.toLocaleDateString(), '</li>');

}

//document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

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

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

}.getElementById('files').addEventListener('change', handleFileSelect, false);handleFileSelect2(evt) {.stopPropagation();.preventDefault();files = evt.dataTransfer.files; // FileList object.

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

for (var i = 0, f; f = files[i]; i++) {.push('<li>Инфа для отладки: <strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',.size, ' bytes, last modified: ',.lastModifiedDate.toLocaleDateString(), '</li>');

}

//document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';

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

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

//alert(ContentString);

}handleDragOver(evt) {.stopPropagation();.preventDefault();.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.

}

// Setup the dnd listeners.dropZone = document.getElementById('drop_zone');.addEventListener('dragover', handleDragOver, false);.addEventListener('drop', handleFileSelect2, false);OpenFile()

{(window.File && window.FileReader && window.FileList && window.Blob) {

// Great success! All the File APIs are supported.= document.getElementById("OpenFiles");.style.display=="none" ? eTarget.style.display="block" : eTarget.style.display="none";.display=="none" ? eTarget.display="block" : eTarget.display="none";

} else {('The File APIs are not fully supported in this browser.');

}

}OpenFile1()

{.instances["editor1"].setData(ContentString);

}

// --------------- ДОБАВЛЕНИЕ ОБЪЕКТА ----------------------------.getElementById('files2').addEventListener('change', handleFileSelect, false);dropZone = document.getElementById('drop_zone2');.addEventListener('dragover', handleDragOver, false);.addEventListener('drop', handleFileSelect2, false);AddFile1(position)

{(position == 1)

{.instances["editor1"].setData(ContentString + CKEDITOR.instances["editor1"].getData());

}

{.instances["editor1"].setData(CKEDITOR.instances["editor1"].getData() + ContentString);

}

}

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

{format = document.getElementById("SaveFormat").value;

//alert(format);str = CKEDITOR.instances["editor1"].getData();str11 = "empty";(format == ".html")

{= "<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN>\r\n<!DOCTYPE html PUBLIC >\r\n<HTML lang=ru>\r\n<HEAD><\/HEAD>\r\n<BODY>\r\n" + str + "\r\n<\/BODY>\r\n<\/HTML>";

}(format == ".xml")

{= "<?xml version=1.0 encoding=utf-8?>\r\n" + str;

}ua = navigator.userAgent.toLowerCase();(ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1 && ua.indexOf("webtv") == -1) {mydoc = window.open();.document.write(str11);.document.execCommand("saveAs",true,format);

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

}str12 = str.toLowerCase();ind=0;ind2=0;imgurl;(str12.indexOf("img src=",ind) != -1)

{= str12.indexOf("img src=",ind)+9;=ind;= str12.indexOf("",ind2);=str12.slice(ind, ind2);win = window.open (imgurl);('win.document.execCommand("SaveAs")', 500);

}

}

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

var arrPlugins = [['Нет подключенных плагинов', '-']];PList()

{

//отображение подключенных плагинов в списке

for(i = 0; i < arrPlugins.length; i++)

{opt=document.createElement('option');.text=arrPlugins[i][0];.value=arrPlugins[i][1];.add(opt,null);

}

}firstadd=1;PConnect()

{file = document.getElementById('files3').files[0].name; // FileList object

//добавление в массив плагиновopt=document.createElement('option');.text=file;.value=file;.add(opt,null);(firstadd)

{.remove(0); firstadd--;

}[arrPlugins.length][0] = file;[arrPlugins.length][1] = file;

//подключениеscript = document.createElement("SCRIPT");.src = file;.getElementsByTagName("HEAD").appendChild(script);

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

eval("Init"+file+"()");//"Init<имя_плагина>()"

}PDisable()

{

//исключениеscript = document.createElement("SCRIPT");.src = objectPL.value;.getElementsByTagName("HEAD").removeChild(script);.remove(objectPL.selectedIndex);

}

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

<html>

<head>

<title>DragMath</title>

</head>

<body>

<applet width="540" height="333" archive="DragMath.jar" code="Display.MainApplet.class" codebase="applet" name="DragMath">

<param value="ru" name="language" />To use this page you need a Java-enabled browser. Download the latest Java plug-in from <a href="#"justify"></applet>

</body>

</html>

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

//Пример плагина

function InitTestPlugin() // функция инициализации Init<название_плагина>()

{("Test Plugins Work");

}

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования

Больше работ по теме: