- → Программирование
- → PHP
- → Статьи
Загрузка картинок в TinyMCE, с помощью PHP
Если он бесплатен, как они получают прибыль? Проект tinymce держится на продаже плагинов для своего редактора. Например, плагины для загрузки картинок, или управления ссылками.
Сейчас мы решим проблему с загрузкой картинок в редактор TinyMCE. Редактор имеет два режима: простой и расширенный. В расширенном режиме функция загрузки картинок имеет опцию выбора картинки из списка. Этот список формируется с помощью простого куска JavaScript кода, который хранит имя файла (картинки) и текст подписи.
var tinyMCEImageList = new Array(["Logo", "logo.jpg"]);
Используя PHP мы можем генерировать этот лист динамически. Но, сначала надо реализовать загрузку картинок на сервер (хостинг) и хранение их в БД. Мы будем использовать готовый PHP класс, который вы можете скачать: upload_class.zip (33 kb).
Вот применение этого класса, все просто: форма, которая загружает файл в папку fotos.
<?php
include_once ('upload_class.php');
$max_size = 1024*250;
$error = '';
if(isset($_POST['Submit'])) {
$my_upload = new file_upload;
$my_upload->upload_dir = $_SERVER['DOCUMENT_ROOT']."/fotos/";
$my_upload->extensions = array(".png", ".gif", ".jpg");
$my_upload->rename_file = false;
$my_upload->the_temp_file = $_FILES['upload']['tmp_name'];
$my_upload->the_file = $_FILES['upload']['name'];
$my_upload->http_error = $_FILES['upload']['error'];
$my_upload->replace = "n";
if ($my_upload->upload()) {
$conn = mysql_connect("localhost", "user", "pw");
mysql_select_db("database", $conn);
mysql_query(sprintf("INSERT INTO foto_table SET file_name = '%s', alt_txt = '%s'",
$my_upload->file_copy),
mysql_real_escape_string($_POST['alt_txt'], $conn)
);
}
$error = $my_upload->show_error_string();
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Upload (database)</title>
</head>
<body>
<h3>Пример загрузчика</h3>
<p>Максимальный размер файла = <?php echo $max_size; ?> bytes.</p>
<form name="form1" enctype="multipart/form-data" method="post" action="">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_size; ?>" />
<label for="upload">Выберите файл</label>
<input type="file" name="upload" size="25" />
<label for="alt_txt">Alt текст</label>
<input type="text" name="alt_txt" value="" size="15" />
<input type="submit" name="Submit" value="Upload" />
</form>
<p><?php echo $error; ?></p>
</body>
</html>
Далее нам необходимо создать скрипт, который будет генерировать список листа картинок. Все данные скрипт будет брать из базы данных mysql.
< ?php
$conn = mysql_connect("localhost", "user", "pw");
mysql_select_db("database", $conn);
$dir = '/fotos/';
$sql = "SELECT * FROM foto_table";
$res = mysql_query($sql);
$js = 'var tinyMCEImageList = new Array(
// Name, URL';
while ($obj = mysql_fetch_object($res)) {
$js .= '
["'.$obj->alt_txt.'", "'.$dir.$obj->file_name.'"],';
}
$js = rtrim($js, ',').');';
echo $js;
?>
Теперь мы можем использовать динамический лист, для загрузки картинок в TinyMCE. Следующий JavaScript код, показывает базовую конфигурацию. Скрипт tinymce имеет огромное количество опций и настроек.
<script type="text/javascript"><!--mce:0--></script>
Наиболее важная часть – это декларация плагина и листа картинок. С этими настройками, вы можете использовать диалоговое окно:
Как вы видите, альтернативное название используется в листе, а также другие атрибуты изображения.
Это пример быстрого и бесплатного применения, если вы не хотите покупать официальный менеджер для загрузки картинок в редактор. Если вы используете другой способ загрузки изображений в редактор TinyMCE, буду рад узнать в комментариях ниже!Дальше: JavaScript error! Как исправить ошибку в JavaScript коде?
Development — Taras Moroz