search

summernote / summernote

Super simple WYSIWYG editor
https://summernote.org
MIT License
11.45k stars 2.25k forks source link

[Nice to have- Plugin] iconpicker #842

Closed lenamtl closed 8 years ago

lenamtl commented 9 years ago

It will be nice to have an iconpicker as a plugin https://github.com/victor-valencia/bootstrap-iconpicker http://mjolnic.github.io/fontawesome-iconpicker/

prabhu commented 9 years ago

I have a version working on CoLearnr. Need to clean it up and create a separate project. Please give me few days. Screenshot attached.

note tagging

lenamtl commented 9 years ago

Ok great :)

renanleandrof commented 9 years ago

I'm trying to do exactly as that!

Can someone help me on how to create a plugin button that shows a list of font awesome icons to insert?

I cannot find any documentation on how to create a plugin =/

Thanks! PS: I love summernote! ;)

EDIT: Nevermind... Just found the summernote-ext-hello example... Gonna do a font awesome plugin.

renanleandrof commented 9 years ago

Here, i've done a small plugin that lists all the font-awesome plugins.

image

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(window.jQuery);
    }
}(function ($) {
    var tmpl = $.summernote.renderer.getTemplate();
    var editor = $.summernote.eventHandler.getEditor();

    var webAppIcons = ['fa-adjust','fa-anchor','fa-archive','fa-area-chart','fa-arrows','fa-arrows-h','fa-arrows-v','fa-asterisk','fa-at','fa-automobile','fa-ban','fa-bank','fa-bar-chart','fa-bar-chart-o','fa-barcode','fa-bars','fa-beer','fa-bell','fa-bell-o','fa-bell-slash','fa-bell-slash-o','fa-bicycle','fa-binoculars','fa-birthday-cake','fa-bolt','fa-bomb','fa-book','fa-bookmark','fa-bookmark-o','fa-briefcase','fa-bug','fa-building','fa-building-o','fa-bullhorn','fa-bullseye','fa-bus','fa-cab','fa-calculator','fa-calendar','fa-calendar-o','fa-camera','fa-camera-retro','fa-car','fa-caret-square-o-down','fa-caret-square-o-left','fa-caret-square-o-right','fa-caret-square-o-up','fa-cc','fa-certificate','fa-check','fa-check-circle','fa-check-circle-o','fa-check-square','fa-check-square-o','fa-child','fa-circle','fa-circle-o','fa-circle-o-notch','fa-circle-thin','fa-clock-o','fa-close','fa-cloud','fa-cloud-download','fa-cloud-upload','fa-code','fa-code-fork','fa-coffee','fa-cog','fa-cogs','fa-comment','fa-comment-o','fa-comments','fa-comments-o','fa-compass','fa-copyright','fa-credit-card','fa-crop','fa-crosshairs','fa-cube','fa-cubes','fa-cutlery','fa-dashboard','fa-database','fa-desktop','fa-dot-circle-o','fa-download','fa-edit','fa-ellipsis-h','fa-ellipsis-v','fa-envelope','fa-envelope-o','fa-envelope-square','fa-eraser','fa-exchange','fa-exclamation','fa-exclamation-circle','fa-exclamation-triangle','fa-external-link','fa-external-link-square','fa-eye','fa-eye-slash','fa-eyedropper','fa-fax','fa-female','fa-fighter-jet','fa-file-archive-o','fa-file-audio-o','fa-file-code-o','fa-file-excel-o','fa-file-image-o','fa-file-movie-o','fa-file-pdf-o','fa-file-photo-o','fa-file-picture-o','fa-file-powerpoint-o','fa-file-sound-o','fa-file-video-o','fa-file-word-o','fa-file-zip-o','fa-film','fa-filter','fa-fire','fa-fire-extinguisher','fa-flag','fa-flag-checkered','fa-flag-o','fa-flash','fa-flask','fa-folder','fa-folder-o','fa-folder-open','fa-folder-open-o','fa-frown-o','fa-futbol-o','fa-gamepad','fa-gavel','fa-gear','fa-gears','fa-gift','fa-glass','fa-globe','fa-graduation-cap','fa-group','fa-hdd-o','fa-headphones','fa-heart','fa-heart-o','fa-history','fa-home','fa-image','fa-inbox','fa-info','fa-info-circle','fa-institution','fa-key','fa-keyboard-o','fa-language','fa-laptop','fa-leaf','fa-legal','fa-lemon-o','fa-level-down','fa-level-up','fa-life-bouy','fa-life-buoy','fa-life-ring','fa-life-saver','fa-lightbulb-o','fa-line-chart','fa-location-arrow','fa-lock','fa-magic','fa-magnet','fa-mail-forward','fa-mail-reply','fa-mail-reply-all','fa-male','fa-map-marker','fa-meh-o','fa-microphone','fa-microphone-slash','fa-minus','fa-minus-circle','fa-minus-square','fa-minus-square-o','fa-mobile','fa-mobile-phone','fa-money','fa-moon-o','fa-mortar-board','fa-music','fa-navicon','fa-newspaper-o','fa-paint-brush','fa-paper-plane','fa-paper-plane-o','fa-paw','fa-pencil','fa-pencil-square','fa-pencil-square-o','fa-phone','fa-phone-square','fa-photo','fa-picture-o','fa-pie-chart','fa-plane','fa-plug','fa-plus','fa-plus-circle','fa-plus-square','fa-plus-square-o','fa-power-off','fa-print','fa-puzzle-piece','fa-qrcode','fa-question','fa-question-circle','fa-quote-left','fa-quote-right','fa-random','fa-recycle','fa-refresh','fa-remove','fa-reorder','fa-reply','fa-reply-all','fa-retweet','fa-road','fa-rocket','fa-rss','fa-rss-square','fa-search','fa-search-minus','fa-search-plus','fa-send','fa-send-o','fa-share','fa-share-alt','fa-share-alt-square','fa-share-square','fa-share-square-o','fa-shield','fa-shopping-cart','fa-sign-in','fa-sign-out','fa-signal','fa-sitemap','fa-sliders','fa-smile-o','fa-soccer-ball-o','fa-sort','fa-sort-alpha-asc','fa-sort-alpha-desc','fa-sort-amount-asc','fa-sort-amount-desc','fa-sort-asc','fa-sort-desc','fa-sort-down','fa-sort-numeric-asc','fa-sort-numeric-desc','fa-sort-up','fa-space-shuttle','fa-spinner','fa-spoon','fa-square','fa-square-o','fa-star','fa-star-half','fa-star-half-empty','fa-star-half-full','fa-star-half-o','fa-star-o','fa-suitcase','fa-sun-o','fa-support','fa-tablet','fa-tachometer','fa-tag','fa-tags','fa-tasks','fa-taxi','fa-terminal','fa-thumb-tack','fa-thumbs-down','fa-thumbs-o-down','fa-thumbs-o-up','fa-thumbs-up','fa-ticket','fa-times','fa-times-circle','fa-times-circle-o','fa-tint','fa-toggle-down','fa-toggle-left','fa-toggle-off','fa-toggle-on','fa-toggle-right','fa-toggle-up','fa-trash','fa-trash-o','fa-tree','fa-trophy','fa-truck','fa-tty','fa-umbrella','fa-university','fa-unlock','fa-unlock-alt','fa-unsorted','fa-upload','fa-user','fa-users','fa-video-camera','fa-volume-down','fa-volume-off','fa-volume-up','fa-warning','fa-wheelchair','fa-wifi','fa-wrench'];
    var fileTypeIcons = ['fa-file','fa-file-archive-o','fa-file-audio-o','fa-file-code-o','fa-file-excel-o','fa-file-image-o','fa-file-movie-o','fa-file-o','fa-file-pdf-o','fa-file-photo-o  ','fa-file-picture-o  ','fa-file-powerpoint-o','fa-file-sound-o  ','fa-file-text','fa-file-text-o','fa-file-video-o','fa-file-word-o','fa-file-zip-o'];
    var spinnerIcons = ['fa-circle-o-notch','fa-cog','fa-gear  ','fa-refresh','fa-spinner'];
    var formIcons = ['fa-check-square','fa-check-square-o','fa-circle','fa-circle-o','fa-dot-circle-o','fa-minus-square','fa-minus-square-o','fa-plus-square','fa-plus-square-o','fa-square','fa-square-o'];
    var paymentIcons = ['fa-cc-amex','fa-cc-discover','fa-cc-mastercard','fa-cc-paypal','fa-cc-stripe','fa-cc-visa','fa-credit-card','fa-google-wallet','fa-paypal'];
    var chartIcons  = ['fa-area-chart','fa-bar-chart','fa-bar-chart-o ','fa-line-chart','fa-pie-chart'];
    var currencyIcons = ['fa-bitcoin','fa-btc','fa-cny','fa-dollar','fa-eur','fa-euro','fa-gbp','fa-ils','fa-inr','fa-jpy','fa-krw','fa-money','fa-rmb','fa-rouble','fa-rub','fa-ruble','fa-rupee','fa-shekel','fa-sheqel ','fa-try','fa-turkish-lira ','fa-usd','fa-won','fa-yen'];
    var textEditorIcons  = ['fa-align-center','fa-align-justify','fa-align-left','fa-align-right','fa-bold','fa-chain','fa-chain-broken','fa-clipboard','fa-columns','fa-copy','fa-cut','fa-dedent','fa-eraser','fa-file','fa-file-o','fa-file-text','fa-file-text-o','fa-files-o','fa-floppy-o','fa-font','fa-header','fa-indent','fa-italic','fa-link','fa-list','fa-list-alt','fa-list-ol','fa-list-ul','fa-outdent','fa-paperclip','fa-paragraph','fa-paste','fa-repeat','fa-rotate-left','fa-rotate-right','fa-save','fa-scissors','fa-strikethrough','fa-subscript','fa-superscript','fa-table','fa-text-height','fa-text-width','fa-th','fa-th-large','fa-th-list','fa-underline','fa-undo','fa-unlink'];
    var directionalIcons = ['fa-angle-double-down','fa-angle-double-left','fa-angle-double-right','fa-angle-double-up','fa-angle-down','fa-angle-left','fa-angle-right','fa-angle-up','fa-arrow-circle-down','fa-arrow-circle-left','fa-arrow-circle-o-down','fa-arrow-circle-o-left','fa-arrow-circle-o-right','fa-arrow-circle-o-up','fa-arrow-circle-right','fa-arrow-circle-up','fa-arrow-down','fa-arrow-left','fa-arrow-right','fa-arrow-up','fa-arrows','fa-arrows-alt','fa-arrows-h','fa-arrows-v','fa-caret-down','fa-caret-left','fa-caret-right','fa-caret-square-o-down','fa-caret-square-o-left','fa-caret-square-o-right','fa-caret-square-o-up','fa-caret-up','fa-chevron-circle-down','fa-chevron-circle-left','fa-chevron-circle-right','fa-chevron-circle-up','fa-chevron-down','fa-chevron-left','fa-chevron-right','fa-chevron-up','fa-hand-o-down','fa-hand-o-left','fa-hand-o-right','fa-hand-o-up','fa-long-arrow-down','fa-long-arrow-left','fa-long-arrow-right','fa-long-arrow-up','fa-toggle-down','fa-toggle-left','fa-toggle-right','fa-toggle-up'];
    var videoIcons = ['fa-arrows-alt','fa-backward','fa-compress','fa-eject','fa-expand','fa-fast-backward','fa-fast-forward','fa-forward','fa-pause','fa-play','fa-play-circle','fa-play-circle-o','fa-step-backward','fa-step-forward','fa-stop','fa-youtube-play'];
    var brandIcons = ['fa-adn','fa-android','fa-angellist','fa-apple','fa-behance','fa-behance-square','fa-bitbucket','fa-bitbucket-square','fa-bitcoin','fa-btc','fa-cc-amex','fa-cc-discover','fa-cc-mastercard','fa-cc-paypal','fa-cc-stripe','fa-cc-visa','fa-codepen','fa-css3','fa-delicious','fa-deviantart','fa-digg','fa-dribbble','fa-dropbox','fa-drupal','fa-empire','fa-facebook','fa-facebook-square','fa-flickr','fa-foursquare','fa-ge','fa-git','fa-git-square','fa-github','fa-github-alt','fa-github-square','fa-gittip','fa-google','fa-google-plus','fa-google-plus-square','fa-google-wallet','fa-hacker-news','fa-html5','fa-instagram','fa-ioxhost','fa-joomla','fa-jsfiddle','fa-lastfm','fa-lastfm-square','fa-linkedin','fa-linkedin-square','fa-linux','fa-maxcdn','fa-meanpath','fa-openid','fa-pagelines','fa-paypal','fa-pied-piper','fa-pied-piper-alt','fa-pinterest','fa-pinterest-square','fa-qq','fa-ra','fa-rebel','fa-reddit','fa-reddit-square','fa-renren','fa-share-alt','fa-share-alt-square','fa-skype','fa-slack','fa-slideshare','fa-soundcloud','fa-spotify','fa-stack-exchange','fa-stack-overflow','fa-steam','fa-steam-square','fa-stumbleupon','fa-stumbleupon-circle','fa-tencent-weibo','fa-trello','fa-tumblr','fa-tumblr-square','fa-twitch','fa-twitter','fa-twitter-square','fa-vimeo-square','fa-vine','fa-vk','fa-wechat','fa-weibo','fa-weixin','fa-windows','fa-wordpress','fa-xing','fa-xing-square','fa-yahoo','fa-yelp','fa-youtube','fa-youtube-play'];
    var medicalIcons = ['fa-ambulance','fa-h-square','fa-hospital-o','fa-medkit','fa-plus-square','fa-stethoscope','fa-user-md','fa-wheelchair'];

    function addIconsList(titulo, array) {
        var list = '';
        $.each(array, function(i,v){
            list += '<a data-event="fontAwesomeIcons" href="#" data-value="' + v + '"><span class="fa ' + v + '"></span></a>';
        });
        return '<li role="presentation" class="dropdown-header">' + titulo + '</li><li>' + list + '</li>';
    }

    // add plugin
    $.summernote.addPlugin({
        name: 'fontAwesomeIcons',
        buttons: {
            fontAwesomeIcons: function () {
                var dropdown = '<ul class="dropdown-menu fontAwesomeIconsDropdown">';

                dropdown += addIconsList("Ícones de Aplicação Web", webAppIcons);
                dropdown += addIconsList("Ícones de Arquivos", fileTypeIcons);
                dropdown += addIconsList("Ícones Spinners ", spinnerIcons);
                dropdown += addIconsList("Ícones de Formulários", formIcons);
                dropdown += addIconsList("Ícones de Pagamento", paymentIcons);
                dropdown += addIconsList("Ícones de Gráficos", chartIcons);
                dropdown += addIconsList("Ícones Monetários", currencyIcons);
                dropdown += addIconsList("Ícones de Texto", textEditorIcons);
                dropdown += addIconsList("Ícones Direcionais", directionalIcons);
                dropdown += addIconsList("Ícones de Vídeos", videoIcons);
                dropdown += addIconsList("Ícones de Marcas", brandIcons);
                dropdown += addIconsList("Ícones Médicos ", medicalIcons);

                dropdown += "</ul>";

                return tmpl.iconButton('fa fa-smile-o', {
                    title: 'Ícones',
                    hide: true,
                    dropdown : dropdown
                });
            }
        },
        events: {
            fontAwesomeIcons: function (layoutInfo, value) {
                var $editable = layoutInfo.editable();
                var icon = $('<span class="fa ' + value + '"></span>');
                editor.insertNode($editable, icon[0], true);
            }
        }
    });
}));

Also, add this CSS to your code:

.fontAwesomeIconsDropdown {
    width: 400px;
    height: 400px;
    overflow: auto;
}
.fontAwesomeIconsDropdown a {
    padding: 3px !important;
    display: inline-block !important;
}
lqez commented 9 years ago

Thank you @prabhu and @renanleandrof for creating great plugins on summernote. We have a plan to introduce useful and popular plugins to our site and docs. So please inform us again when you ready to place your plugin as an open source.

renanleandrof commented 9 years ago

Feel free to make it better and to publish this code... ;) Em 26/01/2015 10:47, "Park Hyunwoo" notifications@github.com escreveu:

Thank you @prabhu https://github.com/prabhu and @renanleandrof https://github.com/renanleandrof for creating great plugins on summernote. We have a plan to introduce useful and popular plugins to our site and docs. So please inform us again when you ready to place your plugin as an open source.

— Reply to this email directly or view it on GitHub https://github.com/summernote/summernote/issues/842#issuecomment-71455678 .

nilobarp commented 9 years ago

Here is a quick plugin for emojis https://github.com/nilobarp/summernote-ext-emoji

Suggestions and improvements are welcome.

easylogic commented 9 years ago

@nilobarp :+1:

hackerwins commented 8 years ago

We have hint popover at develop branch. If You want to how it works, check out below links. https://github.com/summernote/summernote/pull/1352

This will be released at v0.7.0

2braincells2go commented 7 years ago

Anyone have working fontawesome plugin for latest version of summernote? Be really nice to be able to edit / insert fontawesome icons. Seems just about every bootstrap based site/template has fontawesome icons these days.