Войти Регистрация

Загрузка картинок в TinyMCE, с помощью PHP


TinyMCE – это отличный онлайновый WYSIWYG редактор, который можно использовать для проектов любой сложности. Визуальный редактор можно применить везде, где необходимо создавать html страницы, или наполнять контентом сайт. TinyMCE это бесплатный редактор, который будет понятен даже моей бабушке, так как его интерфейс похож на MSOffice.

Загрузка изображений в 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

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

Это пример быстрого и бесплатного применения, если вы не хотите покупать официальный менеджер для загрузки картинок в редактор. Если вы используете другой способ загрузки изображений в редактор TinyMCE, буду рад узнать в комментариях ниже!


Дальше: JavaScript error! Как исправить ошибку в JavaScript коде?


Дискуссия по теме     0 Комментариев
Добавить комментарий
Просмотров: 7088