Редактор текста и html — TinyMCE

TinyMCE — бесплатный javascript HTML редактор, легко внедрить в сайт, имеет кучу плагинов и гибко настраивается.

  1. Заходим на официальный сайт и скачиваем редактор.
  2. Для новостей я настроил редактор таким образом
    tinymce.init({
        selector: "textarea",
        plugin_preview_width: 550,
        plugin_preview_height: 600,
        plugins: [
                "advlist textcolor nonbreaking link image media emoticons directionality 
    visualchars visualblocks table template pagebreak fullscreen code preview"
        ],
    
        toolbar1: "undo redo bold italic underline strikethrough alignleft aligncenter 
    alignright alignjustify bullist numlist outdent indent blockquote forecolor backcolor nonbreaking",
        toolbar2: "styleselect formatselect link image media emoticons ltr rtl visualchars 
    visualblocks table template pagebreak fullscreen code preview",
    
        menubar: false,
        toolbar_items_size: 'small',
        content_css: ["/Styles/Site.css"],
        templates: [
            {
                title: "Template 1",
                content: "Your HTML"
            }
        ]
    });
    

    где
    plugin_preview_width, plugin_preview_height — ширина и высота preview окна. Ширину нужно указывать на 19px больше желаемой.
    content_css — стили, которые будут подключаться к фрейму.
    плагин directionality — отвечает за направление текста, инструменты — ltr rtl;
    плагин advlist — расширяет инструменты — bullist и numlist;
    плагин textcolor — нужен для инструментов — forecolor backcolor;
    плагины nonbreaking link image media emoticons visualchars visualblocks table template pagebreak fullscreen code preview нужны соответственно для инструментов — nonbreaking link image media emoticons visualchars visualblocks table template pagebreak fullscreen code preview.

    Плагин fullpage — добавляет обертку документа html, поэтому его лучше убрать.

По теме:
Выбираем технологии и инструменты для разработки веб приложений

1 Выбор и настройка инструментов для разработки фронтенда (только самые важные): 1.1 Twitter bootstrap — фреймворк позволяет писать качественную верстку Read more

Внедряем 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

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

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

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

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