data-flip을 허용하고, summernote에 img 태그에 data-flip을 추가하도록

e_lib/summernote/plugin/image-sammo/summernote-image-flip.js

@@ -0,0 +1,154 @@
+/* Forked from https://github.com/asiffermann/summernote-image-title */
+
+(function (factory) {
+  /* Global define */
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node/CommonJS
+    module.exports = factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(window.jQuery);
+  }
+}(function ($) {
+  $.extend(true, $.summernote.lang, {
+      'en-US': {
+          imageFlip: {
+              edit: 'Flip image',
+              flipLabel: 'Alternative Image'
+          }
+      },
+      'ko-KR': {
+          imageFlip: {
+              edit: '이미지 전환',
+              flipLabel: '대체 이미지'
+          }
+      },
+  });
+  $.extend($.summernote.options, {
+    imageFlip: {
+      icon: '<i class="note-icon-pencil"/>',
+      tooltip: 'Image Flip'
+    }
+  });
+  $.extend($.summernote.plugins, {
+      'imageFlip': function (context) {
+          var self = this;
+
+          var ui = $.summernote.ui;
+          var $note = context.layoutInfo.note;
+          var $editor = context.layoutInfo.editor;
+          var $editable = context.layoutInfo.editable;
+          var $toolbar  = context.layoutInfo.toolbar;
+
+          if (typeof context.options.imageFlip === 'undefined') {
+              context.options.imageFlip = {};
+          }
+
+          var options = context.options;
+          var lang = options.langInfo;
+
+          context.memo('button.imageFlip', function () {
+              var button = ui.button({
+                  contents: ui.icon(options.icons.pencil),
+                  container: false,
+                  tooltip: lang.imageFlip.edit,
+                  click: function (e) {
+                      context.invoke('imageFlip.show');
+                  }
+              });
+
+              return button.render();
+          });
+
+          this.initialize = function () {
+              var $container = options.dialogsInBody ? $(document.body) : $editor;
+
+              var body = '<div class="form-group">' +
+                           '<label>' + lang.imageFlip.flipLabel + '</label>' +
+                           '<input class="note-image-flip-text form-control" type="text" />' +
+                         '</div>';
+
+              var footer = '<button href="#" class="btn btn-primary note-image-flip-btn">' + lang.imageFlip.edit + '</button>';
+
+              this.$dialog = ui.dialog({
+                  title: lang.imageFlip.edit,
+                  body: body,
+                  footer: footer
+              }).render().appendTo($container);
+          };
+
+          this.destroy = function () {
+              ui.hideDialog(this.$dialog);
+              this.$dialog.remove();
+          };
+
+          this.bindEnterKey = function ($input, $btn) {
+              $input.on('keypress', function (event) {
+                  if (event.keyCode === 13) {
+                      $btn.trigger('click');
+                  }
+              });
+          };
+
+          this.show = function () {
+              var $img = $($editable.data('target'));
+              console.log($img);
+              var imgInfo = {
+                  imgDom: $img,
+                  flip: $img.data('flip'),
+              };
+              this.showLinkDialog(imgInfo).then(function (imgInfo) {
+                  ui.hideDialog(self.$dialog);
+                  var $img = imgInfo.imgDom;
+
+                  console.log(imgInfo.flip);
+                  if (imgInfo.flip) {
+                      $img.attr('data-flip', imgInfo.flip);
+                  }
+                  else {
+                      $img.removeData('flip');
+                  }
+
+                  $note.val(context.invoke('code'));
+                  $note.change();
+              });
+          };
+
+          this.showLinkDialog = function (imgInfo) {
+              return $.Deferred(function (deferred) {
+                  var $imageFlip = self.$dialog.find('.note-image-flip-text');
+                  var $editBtn = self.$dialog.find('.note-image-flip-btn');
+
+                  ui.onDialogShown(self.$dialog, function () {
+                      context.triggerEvent('dialog.shown');
+
+                      $editBtn.click(function (event) {
+                          event.preventDefault();
+                          deferred.resolve({
+                              imgDom: imgInfo.imgDom,
+                              flip: $imageFlip.val(),
+                          });
+                      });
+
+                      $imageFlip.val(imgInfo.flip).trigger('focus');
+                      self.bindEnterKey($imageFlip, $editBtn);
+
+                  });
+
+                  ui.onDialogHidden(self.$dialog, function () {
+                      $editBtn.off('click');
+
+                      if (deferred.state() === 'pending') {
+                          deferred.reject();
+                      }
+                  });
+
+                  ui.showDialog(self.$dialog);
+              });
+          };
+      }
+  });
+}));

hwe/b_dipcenter.php

@@ -55,6 +55,7 @@ var editable = <?=($me['level']>=5?'true':'false')?>;
 <?=WebUtil::printJS('../e_lib/bootstrap.bundle.min.js')?>
 <?=WebUtil::printJS('../e_lib/summernote/summernote-bs4.min.js')?>
 <?=WebUtil::printJS('../e_lib/summernote/lang/summernote-ko-KR.js')?>
+<?=WebUtil::printJS('../e_lib/summernote/plugin/image-sammo/summernote-image-flip.js')?>
 <?=WebUtil::printJS('../d_shared/common_path.js')?>
 <?=WebUtil::printJS('js/common.js')?>
 <?=WebUtil::printJS('js/dipcenter.js')?>

hwe/js/dipcenter.js

@@ -37,6 +37,14 @@ jQuery(function($){
                 ['para', ['ul', 'ol', 'paragraph']],
                 ['height', ['height', 'codeview']]
             ],
+            popover: {
+                image: [
+                    ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
+                    ['float', ['floatLeft', 'floatRight', 'floatNone']],
+                    ['remove', ['removeMedia']],
+                    ['custom', ['imageFlip']],
+                ],
+            },
             fontNames: ['맑은 고딕', 'Nanum Gothic', 'Nanum Myeongjo', 'Nanum Pen Script', '굴림', '굴림체', '바탕', '바탕체', '궁서', '궁서체'],
             fontSizes: ['8', '9', '10', '11', '12', '14', '16', '20', '24', '28', '32', '36', '40', '46', '52', '60'],
             callbacks: {

src/sammo/WebUtil.php

@@ -132,6 +132,8 @@ class WebUtil
         }
 
         $config = \HTMLPurifier_HTML5Config::createDefault();
+        $def = $config->getHTMLDefinition();
+        $def->info_global_attr['data-flip'] = new \HTMLPurifier_AttrDef_Text;
         $purifier = new \HTMLPurifier($config);
         return $purifier->purify($text);
     }