Контакты
Адрес: г. Ростов-на-Дону, Ворошиловский район, ул. Орбитальная 88/2.
Телефон: +7 (908) 172-0007
Email: s@trustcode.ru
Skype: trustcode.ru
Наша группа Вконтакте - vk.com/trustcodes

Политика конфиденциальности
Ваши персональные данные, в частности номер телефона и электронный почтовый адрес будут использоваться только в целях ответа на ваши вопросы и передачи коммерческих предложений по услугам компании «TRUST CODE». Просим обратить внимание, что мы не передаем данные 3м лицам.
Обратная связь




HC

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

TinyMCE визуальный редактор с возможностью загрузки изображений. Вы можете встроить его в любой участок вашего сайта где есть textarea. Чаще всего его используют в админках сайта для более удобного управления контентом. Используем версию TinyMCE 4.1.3.

Вот так будет выглядеть ваше поле TEXTAREA:


Итак, начнем с того, что нам необходимо залить на сайт папку tinymce с самим скриптом который отвечает за визуальный редактор. (Скачать этот скрипт вы можете внизу страницы кликнув на кнопку исходник). Скачиваем и заливаем в нужное вам место.

Далее необходимо разместить код который вызывает наш скрипт. Код размещаем перед вашим полем TEXTAREA.
<script type="text/javascript" src="/tinymce/tinymce.min.js"></script> // Указываем путь до скрипта
<script type="text/javascript">
    tinymce.init({
	language : "ru",
    selector: "textarea",
	plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern jbimages"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | forecolor backcolor emoticons | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image jbimages | formatselect fontselect fontsizeselect bold italic underline forecolor backcolor | link image | numlist bullist indent outdent | alignleft aligncenter alignright | code",
    relative_urls: false
    });
 </script>
Далее необходимо зайти в файл: tinymce/plugins/jbimages/config.php и найти стоку:
$config["img_path"] = "/images";
В данной строке необходимо указать папку в которую будут загружаться изображения.
Важно! Данная папка должна существовать или что-то пойдет не так)

В завершении к данной статье, хочу сказать что при переносе строки в TEXTAREA нажатием enter будет инициализироваться тег <p>. Чтобы заменить его на <br> требуется в нашем коде после:
selector: "textarea",
Дописать:
forced_root_block : false,
force_p_newlines : false,
force_br_newlines : true,
Все готово, делитесь своим мнением и оставляйте комментарии.
Исходник
Автор: Иван Цынтару
06.03.16, 14:16

0

3
705
Комментарии:
Добавить комментарий
Нам очень важно ваше мнение.
0

К сожалению комментариев пока нету((, Может ваш будет первым?
Добавить комментарий