Реализуем менеджер картинок в редакторе tinymce

На официальном сайте tinymce предлагают подключить файловый менеджер MoxieManager. Но этот менеджер вовсе не бесплатный. СнимокРеализуем свой менеджер для картинок.

  1. Покажем кнопку «обзор». Для этого при инициализации плагина tinymce передадим такие настройки:
    setup : function(ed) {
        file_browser_callback_types: 'image', // файловый менеджер будет работать только для картинок
        file_browser_callback : function(field_name, url, type, win){
        var filebrowser = "/Images/ImageManagerSearch?type=" + options.folder;
        tinymce.activeEditor.windowManager.open({
            title : "Менеджер картинок",
            width : 620,
            height : 450,
            url : filebrowser
        }, {
            window : win,
            input : field_name
        });
        return false;
    }
    
  2. Теперь при нажатии на эту кнопку будет открываться страница во фрейме. На этой странице можно отобразить все что угодно. К примеру список картинок, форму поиска новых картинок и форму загрузки новой картинки.
    И так страница будет содержат такой html код (я использую razor):

    @{
     Layout = null;
    }
    <h3>Найдите картинку или загрузите новую</h3>
    <!-- Форма поиска новых картинок -->
    <form>
        <input type="hidden" name="type" value="@(ViewBag.Folder)" />
        <input type="text" name="query" value="@ViewBag.Query" placeholder="Введите название картинки" />
        <button>Найти</button>
    </form>
    <!-- Форма загрузки новой картинки -->
    <form method="post" enctype="multipart/form-data" action="/Images/ImageManagerUpload">
        <input type="hidden" name="type" value="@(ViewBag.Folder)" />
        <input type="file" name="file" />
        <button>Загрузить</button>
    </form>
    <!-- Список картинок -->
    <div class="image-manager-container">
        @if (Model.Count > 0)
        {
            <ul class="image-manager-list clearfix">
            @foreach (var im in Model)
            {
                <li class="image-manager-item">
                    <img src="/Content/Images/@(ViewBag.Folder)/normal/@(im.Id).jpg" 
    title="@(im.Title != null ? im.Title : "Нет названия картинки")" />
                </li>
            }
            </ul>
            if (ViewBag.CurrentPage > 1)
            {
                 <a href="@Url.Action("ImageManagerSearch", "Images", new { type = ViewBag.Folder, 
    query = ViewBag.Query, page = ViewBag.CurrentPage - 1 })">&lt;&lt; Предыдущие</a><span> | </span>
            }
            <a href="@Url.Action("ImageManagerSearch", "Images", new { type = ViewBag.Folder, 
    query = ViewBag.Query, page = ViewBag.CurrentPage + 1 })">Следующие &gt;&gt;</a>
        }
        else
        {
            if (ViewBag.CurrentPage == 1)
            {
                @:Не найдены картинки по запросу: "@ViewBag.Query"
            }
            else
            {
                @:Нет картинок на текущей странице
                <a href="@Url.Action("ImageManagerSearch", "Images", new { type = ViewBag.Folder, 
    query = ViewBag.Query, page = ViewBag.CurrentPage - 1 })">&lt;&lt;Предыдущие</a>
            }
        }
    </div>
    
    
  3. Страница будет содержать такие стили
    <style>
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .image-manager-list {
        margin: 30px 0 0;
        padding: 0;
        list-style: none;
    }
    
    .image-manager-item {
        width: 100px;
        height: 75px;
        float: left;
        margin: 5px;
        border: 1px solid gray;
        padding: 5px;
        text-align: center;
        white-space: nowrap;
        text-decoration: none;
    }
    
    .image-manager-item:after {
        content: "";
        visibility: hidden;
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0;
    }
    
    .image-manager-item > *:first-child {
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }
    
    .image-manager-item img {
        max-width: 100%;
        max-height: 100%;
    }
    
    form {
        display: inline-block;
        border: 1px solid gray;
        padding: 5px;
        border-radius: 2px;
    }
    a {
        color: black;
        text-decoration: none;
        font-style:italic;
    }
    </style>
    
  4. Страница будет содержать такой js код:
    <script src="~/Content/Javascripts/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(document).on("click", "img", function () {
        itemUrl = $(this).attr("src").replace("/normal/", "/max/");
        var args = top.tinymce.activeEditor.windowManager.getParams();
        win = (args.window);
        input = (args.input);
        win.document.getElementById(input).value = itemUrl;
        top.tinymce.activeEditor.windowManager.close();
    });
    </script>
    
  5. На сервере должны быть реализованы два контроллера
    public ActionResult ImageManagerSearch(string type, string query = "", int page = 1)
    {
        // Ваш код
    }
    [HttpPost]
    public ActionResult ImageManagerUpload(HttpPostedFileBase file, string type)
    {
        // Ваш код
        return RedirectToAction("ImageManagerSearch", "Images", new { type = type });
    }
    

Вот и все! Должно получится что то подобное вот этому:
Менеджер картинок

Ссылки:

По теме:
Внедряем js модуль в query plugin

Например написан модуль SelectControl по принципу amd : define("SelectControl", ["jquery"/* TODO uncomment: , "addJqueryPlugin" */], function($) { function SelectControl() { this.init.apply(this, Read more

Soap вызов, используя jquery.ajax

Иногда не хочется делать запрос с клиента на свой сервер, который в свою очередь, используя soap клиент, делает запрос еще на Read more

Работаем с JQuery Deferred

В JQuery есть такой удобный объект — Deferred, который позволяет выполнять отложенные действия в зависимости от состояния, которое нужно установить Read more

Пишем модули на javascript и загружаем их при помощи requirejs

В ECMAScript 6 есть уже классы. Но думаю их пока рано еще использовать. Опишу способ создания модулей, которым пользуюсь я. Создадим файл Read more

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *