Разработка электронных устройств

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

Прототипы и серийное производство

Разработка и изготовление корпусов и передних панелей. Разработка и изготовление печатных платы любой сложности. Монтаж печатных плат.

Написание программного обеспечения

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

Разработка механизмов различной степени сложности

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

Создание, продвижение и обслуживание сайтов

Написание php/perl/c кода или использование cms. Собственный сервер для размещения Ваших проектов под любые нагрузки. Поддержание сайта в актуальности и продвижение в поисковых системах.

 
 

Пишем плагин для TinyMCE - кнопка "Прикрепить файл"

Автор: от 30 Январь 2013 года, просмотров 7813

Google

Начнём с того, что однажды нам на сайте понадобилась возможность загружать и прикреплять файлы к статье. Раньше сайт был на движке DLE, так вот там эта возможность была из коробки, а здесь понадобиться поднапречся.

Задача такая - необходимо сделать кнопочку и окошко для вставки файла в документ. Ссылка должна выглядить вот так

[ Файл: diglogo.zip ]

Для нчала скчаем и посмотрим что из себя представляет плагин для редактора, пример лежит в папке /tinymce/jscripts/tiny_mce/plugins/example.

/css Таблицы стилей для окна плагина
/img Изображения. Тут и не нужно ничего больше придумывать.
/js  Скрипты, обрабатывающие данные диалоговой формы плагина. Основной код и реализация функций
 /langs  Языковые файлы описывающие различные языки.
 /editor_plugin.js  Скрипт для загрузки файла в редактор, описание кнопки и диалога. Сжатый файл
 /editor_plugin_src.js  Тоже самое но без сжатия
 /dialog.htm  HTML файл диалога

Из всего набора данных файлов обязательным является лишь editor_plugin.js.

Для начала переименуем и назовём папку подходящим для нас именем (у меня mics_link) и далее отредактируем файл editor_plugin_src.js

Изменим данный файл необходимым для нас образом.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
(function() {
 
   tinymce.create('tinymce.plugins.MicsLink', {
 
         // инициализируем плагин 
         // ed - экземляр редактора 
         // url - абсолютный url плагина 
      init : function(ed, url) {
 
            // Регестрирум комаду, для открытия окна плагина
          ed.addCommand('mceMics', function() {
 
             //  параметры окна
             ed.windowManager.open({
                 file: url + '/dialog.htm',
                width: 390 + ed.getLang('mics_link.delta_width', 0),
                 height: 150 + ed.getLang('mics_link.delta_height', 0),
                 inline: 1
             }, {
 
                 // данные для плагина - его абсолютный URL
                 plugin_url : url
 
             });
            });
 
            // регестрируем иконку плагина
            ed.addButton('micslink', {
             title: 'Вставка файла',
             cmd: 'mceMics',
             image: url + '/img/fileup.ico'
            });
        },
 
 
        // "Выходные данные" плагина
        getInfo : function() {
            return {
             longname : 'Upload file Plugin',
             author: 'devprodest outme',
               authorurl: 'http://www.outme.ru/',
             version: "0.1"
            };
        }
    });
 
 
    // Регестрируем плагин
      tinymce.PluginManager.add('mics_link', tinymce.plugins.MicsLink);
})();

 Здесь думаю пояснять нечего, всё и так понятно из комментаниев.

И так скрипт инициализации готов, осталось реализовать диалоговое окно, и так начнём, открываем файл dialog.htm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Прикрепление файла.</title>
   <script type="text/javascript" src="js/dialog.js"></script>
   <link type="text/css" href="css/dialog.css" rel="stylesheet" />
</head>
<body>
 
<form onsubmit="MicsDialog.insert();return false;" action="#">
<table>
   <tr>
      <td>Имя файла:</td>
      <td><input id="mtext" name="mtext" type="text" class="text" onclick="MicsDialog.getfile();"/></td>
   </tr>
   <tr>
      <td>URL: </td>
      <td><input id="mhref" name="mhref" type="text" class="text"/>
      </td>
   </td>
   </tr>
</table>
 
<div class="mceActionPanel">
   <input type="button" id="insert" name="insert" value="{#insert}" onclick="MicsDialog.insert();" >
   <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
</div>
</form>
 
</body>
</html>

 Ну и наконец таки нужно реализовать необходимые нам функции в файле /js/dialog.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
tinyMCEPopup.requireLangPack();
 
var MicsDialog = {
 
   // Инициализируем наш плагин
   init : function() {
 
      // Получаем экземплян формы в диалоге
      var f = document.forms[0];
 
      // устанавливаем начальные значения
      f.mtext.value = '';   // Значение имени файла
      f.mhref.value = '';   // Ссылка на файл
 
      val = document.forms[0].mhref.value;
      document.forms[0].mtext.value = val.substring(val.lastIndexOf('/')+1,val.length);
 
   getfile : function() {
   val = document.forms[0].mhref.value;
   document.forms[0].mtext.value = val.substring(val.lastIndexOf('/')+1);
 
   },
 
   // Функция обработки и вставки ссылки
   insert : function() {
      // настроим нашу ссылку заменим все пробелы и заодно узнаем тип файла
      var hfile = document.forms[0].mhref.value.replace(/s/g,"%20");
      var subhfile = hfile.substring(hfile.lastIndexOf(".")+1);
 
      var tfile = document.forms[0].mtext.value;
      tfile = tfile.replace(/s/g," ");
      var nameclass = '';
 
      // Проверим какого же типа наш документ
      switch (subhfile) {
 
         // архивы file_zip.ico
           case "rar":
         case "zip":
         case "tar":
         case "7z":
             nameclass = 'filezip';
             break;
 
         // Таблицы file_xls.ico
         case "xls":
         case "xlsx":
         case "ods":
         case "ots":
             nameclass = 'filexls';
             break;
 
         // Текстовые файлы file_txt.ico
         case "txt":
         case "cpp":
         case "xml":
         case "html":
         case "htm":
         case "php":
         case "js":
         case "css":
         case "c":
         case "h":
         case "vp":
         case "cs":
            nameclass = 'filetxt';
            break;
 
         // PDF файлы file_pdf.ico
         case "pdf":
            nameclass = 'filepdf';
            break;
 
         // Презентации file_ppt.ico
         case "ppt":
         case "pptx":
         case "odp":
         case "otp":
             nameclass = 'fileppt';
             break;      
 
         // документы file_doc.ico
         case "doc":
         case "docx":
         case "rtf":
         case "odt":
         case "ott":
             nameclass = 'filedoc';
             break;
 
         // торрент file_torrent.ico
         case "torrent":
            nameclass = 'filetorrent';
            break;
 
         // Изображения file_img.ico
         case "jpg":
         case "bmp":
         case "ico":
         case "png":
         case "gif":
            nameclass = 'fileimg';
            break;
 
         // другие файлы file_other.ico
           default:
             nameclass = 'filother';
            break;
      }
 
      // Скомпонуем все детали в единое целое
      mlink= ";
      mlink+= "[ Файл:  + nameclass + "" href="";
      mlink+= hfile + ">" + tfile + " ] ";
 
      // отправим нашу свежесозданую ссылку в документ
      tinyMCEPopup.editor.execCommand('mceInsertContent', false, mlink);
 
      tinyMCEPopup.close();
    }
 
};
 
tinyMCEPopup.onInit.add(MicsDialog.init, MicsDialog);

 Здесь Кажется тоже нечего объяснять, я старался сделать код как можно более читабельным ипрокомментировал все наиболее значимые места.

теперь осталось подключить наш плагин. 

1
2
3
4
5
6
7
8
9
tinyMCE.init({
  // General options
  mode : "textareas",
  theme : "advanced",
  plugins : "mics_link, safari,syntaxhl,pagebreak,spellchecker,style,layer,..."
 
  // Theme options
  theme_advanced_buttons1 : "..., ..., micslink,...",
  theme_advanced_buttons2 : "cut,cop ..."

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

Кнопка плагина

А при нажатии появляется вот такое диалоговое окно

Диалоговое окно

Всё вроде красиво и удобно, но НЕТ... Хочется именно выбирать файл и загружать его, а выбирать мы будем в стандартном менеджере файлов, ну или в том, который подключен к tinymce. Для этого необходимо добавить кнопочку "просмотр" - вы такую уже наверняка видели при вставке медиа файлов и изображений.

для этого нам необходимо проделать небольшие манипуляции с 2 файлами - dialog.js и dialog.htm

Для начала разберёмся с HTML. Что бы сделать данную фичу пришлось не много поковырять уже готовый плагин advimg, который как раз таки служит для добавления и редактирования изображений. вот что я в нём откапал, ну и сразу же изменил код нашего диалога.

1
<td><input id="mhref" name="mhref" type="text" class="text"/></td>

 вместо него я вставил вот это, тем самым не много расширил его функционал

1
2
3
4
5
6
<table role="presentation" border="0" cellspacing="0" cellpadding="0">
   <tr> 
      <td><input id="mhref" name="mhref" type="text" class="text"/></td> 
      <td id="srcbrowsercontainer"> </td>
   </tr>
</table>

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

1
2
<script type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script type="text/javascript" src="../../utils/form_utils.js"></script>

 Теперь займёмся файлом со скриптом, в него нужно добавить лишь несколько строк в любое место функции Init

1
2
3
document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','mhref','micslink');
if (isVisible('srcbrowser'))
   document.getElementById('mhref').style.width = '260px';

 Всё, теперь наш плагин полностью готов. можно обновлять страницу с редактором и радоваться.

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

Ссылка на скачивание архива [ Файл: diglogo.zip ]

Ссылка на скачивание таблицы [ Файл: diglogo.xls ]

Ссылка на скачивание текстового файла [ Файл: diglogo.txt ]

Ссылка на скачивание PDF [ Файл: diglogo.pdf ]

Ссылка на скачивание презентации [ Файл: diglogo.ppt ]

Ссылка на скачивание документа MS Word [ Файл: diglogo.doc ]

Ссылка на скачивание торрента [ Файл: diglogo.torrent ]

Ссылка на скачивание изображения [ Файл: diglogo.png ]

Ссылка на скачивание других файлов [ Файл: diglogo.dll ]

Извиняюсь за то что ссылка ни куда не ведёт, всё только для наглядности . Вот собственно и код классов css, описывающих внешний вид каждой ссылки.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*архивы file_zip.ico*/
.filezip {
	background: url('file/file_zip.ico') no-repeat;
	padding-left: 22px;
}
/*Таблицы file_xls.ico*/
.filexls {
	background: url('file/file_xls.ico') no-repeat;
	padding-left: 22px;
}
/*Текстовые файлы file_txt.ico*/
.filetxt {
	background: url('file/file_txt.ico') no-repeat;
	padding-left: 22px;
}
/*PDF файлы file_pdf.ico*/
.filepdf {
	background: url('file/file_pdf.ico') no-repeat;
	padding-left: 22px;
}
/*Презентации file_ppt.ico*/
.fileppt {
	background: url('file/file_ppt.ico') no-repeat;
	padding-left: 22px;
}
/*документы file_doc.ico*/
.filedoc {
	background: url('file/file_doc.ico') no-repeat;
	padding-left: 22px;
}
/*торрент file_torrent.ico*/
.filetorrent {
	background: url('file/file_torrent.ico') no-repeat;
	padding-left: 22px;
}
/*другие файлы file_other.ico*/
.filother {
	background: url('file/file_other.ico') no-repeat;
	padding-left: 22px;
}
/*Изображения file_img.ico*/
.fileimg {
	background: url('file/file_img.ico') no-repeat;
	padding-left: 22px;
}

Вот и всё, последнюю на момент написания статьи версию можно скачать по этой ссылке

 [ Файл: plugin.zip ]

В последствии функционал данного плагина постараюсь расширить, есть желание прикрутить функцию генерации QR кода, что сейчас стало весьма популярно.

Категория: