Скрипты

ips-community-suite-v4-3-beta-2 Создавайте Потрясающие Онлайн-Сообщества. Invision Community-это гибкая, многофункциональная и простая в настройке Платформа, которая поддерживает...
easy-video-player-v6-1-мощный-адаптивный-видеоплеер Easy Video Player-это мощный адаптивный видеоплеер, который может воспроизводить локальное видео или аудио, потоковое видео с сервера, видео Youtube или...
chatbull-pro-v5-1-2-php-live-chat-с-настольным-и-мобильным-приложением Chatbull Pro является Php Live chat плагин, чтобы обеспечить поддержку чата для посетителей сайта. Он построен на новейших фреймворках и технологиях,...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Froala WYSIWYG редактор

Froala WYSIWYGFroala WYSIWYG - это легкий текстовый редактор с красивым адаптивным дизайном. Это первый редактор WYSIWYG с изменяем размера изображения , и это работает даже на мобильных устройствах. Редактор охватывает много функциональных кнопок по умолчанию, но иногда необходимо добавить дополнительную возможность для редактирования.
В этой статье вы увидите как добавить дополнительные две пользовательские кнопки: это кнопка для сброса всех HTML тегов в обрабатываемой области и ещё вставить определенный HTML-рядом с курсором.

 

Froala WYSIWYG

Froala WYSIWYG - это плагин прост в использовании и который легко подключить .
Также необходимо подключить библиотеку jQuery.

Спойлер
<!DOCTYPE html>
<html>
    <head>
        <link href="/../css/font-awesome.min.css" rel="stylesheet" type="text/css"
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <link href="/../css/froala editor.min.css" rel="stylesheet" type="text/css">
        <script src="/../js/froala editor.min.js"></script>
    </head>
    <body>
        <!-- To add the editor on your website all you need is a line of HTML -->
        <div id=”edit”></div>
    </body>
</html>

Теперь пишем следующий метод для инициализации редактора.

 

<script>
    $(function() {
        $('#edit').editable()
    });
</script>

Froala WYSIWYG

 

На данный момент мы можем написать смотреть тут и отредактировать всё что угодно в редактируемой области.
Всплывающее окно с опциями редактирования по умолчанию будут отображаться, когда вы набираете или выделяете текст, (настраивается с помощью параметра опции "alwaysVisible'), это называется встроенное редактирование. Вы также можете использовать простой редактор, панель которого всегда расположена в верхней части.
Для этого необходимо выключить режим встроенного редактора при инициализации.

<script>
    $(function() {
        $('#edit').editable({inlineMode: false})
    });
</script>

Кнопки редакторы могут быть легко настроены, можно выбрать какие именно будут отображаться, вариант их группировки или даже создать свои собственные кнопки.
Это можно сделать с помощью “customButtons” и “buttons” опций. Опция “customButtons” является JSON, который определяет новые кнопки.

Код определения новой кнопки показан ниже:

buttonName: {
  title: 'Title',
  icon: {
    type: 'icon-type',
    value: 'icon-value'
  },
  callback: function (editor) {
  }
}

- title – это всплывающая подсказка которая появляется когда вы наводите курсор на кнопку. Если вы используете перевод убедитесь что вы добавили его в массив перевода языка. - icon – это значок кнопки, он имеет два свойства которые должны быть установлены: type – может иметь несколько параметров: font (шрифт иконка), txt (простой текст), или img (изображение). value - должен быть шрифт Высокий класс для шрифта (fa fa-*), свойство для txt или URL для img. После того как мы определим новые кнопки через JSON "customButtons”, мы должны включить своё имя в опции ‘buttons’ позиции где хотим чтобы они были размещены.

Спойлер
<script>
    $(function() {
        $('#edit').editable({
            // Define custom buttons.
            customButtons: {
              // Clear HTML button with text icon.
              clear: {
                title: 'Clear HTML',
                icon: {
                  type: 'font',
                  value: 'fa fa-times'
                },
                callback: function (editor){
                  editor.setHTML('');
                }
              },
  
              // Insert HTML button.
              insertHTML: {
                title: 'Insert HTML',
                icon: {
                  type: 'txt', 
                  value: '+'
                },
                callback: function (editor){
                  // Focus on editor if it's not.
                  if (!editor.selectionInEditor()) {
                    editor.$element.focus();
                  }
                  
                  // Insert HTML.
                  editor.insertHTML('My new HTML');
                  
                  // Save HTML in undo stack.
                  editor.saveUndoStep();
                }
              }
            },

            // Set what buttons to display with separator between them. Also include the name 
            // of the buttons  defined above in 'customButtons'.
            buttons: ['undo', 'redo' , 'bold', 'sep', 'clear', 'insertHTML']
        })
    });
</script>


  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...