Архив метки: jQuery

Подключение визуального редактора TinyMCE с менеджером картинок к любой CMS

Опубликовано автором
4

TinyMCE — это очень распространенный и функциональный визуальный (WYSIWYG) редактор для CMS. Сделан редактор на JavaScript с использованием фреймворка jQuery. Хотя подключить его и не сложно, многие сталкиваются с проблемой отсутствия в стандартной поставке менеджера загрузки картинок. Конечно же без него работа с сайтом не будет полноценной. Одним из вариантов решения данной задачи — использование плагина TinyMCE Image Manager.
Предлагаю свой вариант сборки редактора с расширенными настройками и уже подключенным и настроенным плагином Image Manager. Скачать его можно здесь. Все что требуется для начала работы — это распаковать скачанный архив в корень сайта. А затем вставить вот эти 3 строчки кода в шапку сайта, отображаемую в CMS:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/tiny_mce/tiny_mce_init.js"></script>

Для каталогов pic2 и upload2 необходимо назначить достаточные права (это можно сделать через FTP-клиент или через bash-консоль сервера командой chmod). Все настройки вынесены в отдельный файл (/tiny_mce/tiny_mce_init.js), чтобы в случае каких либо изменений не пришлось вновь редактировать шапку.
После установки все поля TEXTAREA будут редактироваться визуально, как показано на скриншоте.
tiny-mce
Если для какого-либо поля необходимо сделать исключение, то нужно назначить ему атрибут: class=’mceNoEditor’. Пример:

<textarea class="mceNoEditor" name="descr"><?php echo $descr; ?></textarea>

В этом случае поле будет редактироваться как обычно.

Hello world в jQuery AJAX

Опубликовано автором
Добавить комментарий

Начать использовать jQuery очень просто, а вместе с ним и AJAX, который также становится очень простым в этой связке. Смотрите пример ниже. Для простоты библиотека jQuery берется с сайта googleapis.com, но вы можете разместить ее и локально. Обратите внимание, что все файлы должны быть в кодировке UTF-8.

Итак, листинг ajax.html (это файл, который необходимо вызвать в браузере):

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <div id="content"></div>
  <input id="show_btn" type="button" value="Показать"/>
  <input id="close_btn" type="button" value="Закрыть"/>
  <input id="pos_id" type="hidden" value="5"/>
  <script src="ajax.js" type="text/javascript"></script>
</body>
</html>

Далее листинг ajax.js:

$(document).ready(function(){ 
  $('#show_btn').click(function(){ 
    $.ajax({ 
      url: 'ajax_servlet.php', 
      data: 'id='+$('#pos_id').val(), 
      cache: false, 
      success: function(html){ 
        $('#content').html(html); 
      } 
    }); 
  }); 
  $('#close_btn').click(function(){ 
    $('#content').html(''); 
  });
});

Ну и наконец файл, отвечающий на AJAX-запрос на стороне сервера, ajax_servlet.php:

<?php
echo
  "Привет мир!<br/>".
  "Скрытый параметр id=".$_GET['id']
;
?>