ushio
/
video_system


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
							<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../css/froala_editor.css">
  <link rel="stylesheet" href="../../css/froala_style.css">

  <style>
    body {
      text-align: center;
    }

    section {
      width: 81%;
      margin: auto;
      text-align: left;
    }

    .custom-layer {
      text-align: center;
      padding: 10px;
    }
  </style>
</head>

<body>
  <section id="editor">
    <div id='edit' style="margin-top: 30px;">
      <h1>Custom Popup example</h1>
      <p>This is an example of how to create your own popup.</p>
    </div>
  </section>

  <script type="text/javascript" src="../../js/froala_editor.min.js"></script>

  <script>
    // Define popup template.
    Object.assign(FroalaEditor.POPUP_TEMPLATES, {
      'customPlugin.popup': '[_BUTTONS_][_CUSTOM_LAYER_]'
    })

    // Define popup buttons.
    Object.assign(FroalaEditor.DEFAULTS, {
      popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'],
    })

    // The custom popup is defined inside a plugin (new or existing).
    FroalaEditor.PLUGINS.customPlugin = function (editor) {
      // Create custom popup.
      function initPopup() {
        // Load popup template.
        var template = FroalaEditor.POPUP_TEMPLATES.customPopup
        if (typeof template == 'function') template = template.apply(editor)

        // Popup buttons.
        var popup_buttons = ''

        // Create the list of buttons.
        if (editor.opts.popupButtons.length > 1) {
          popup_buttons += '<div class="fr-buttons fr-tabs">'
          popup_buttons += editor.button.buildList(editor.opts.popupButtons)
          popup_buttons += '</div>'
        }

        // Load popup template.
        var template = {
          buttons: popup_buttons,
          custom_layer: '<div class="custom-layer">Hello World!</div>'
        }

        // Create popup.
        var $popup = editor.popups.create('customPlugin.popup', template)

        return $popup
      }

      // Show the popup
      function showPopup() {
        // Get the popup object defined above.
        var $popup = editor.popups.get('customPlugin.popup')

        // If popup doesn't exist then create it.
        // To improve performance it is best to create the popup when it is first needed
        // and not when the editor is initialized.
        if (!$popup) $popup = initPopup()

        // Set the editor toolbar as the popup's container.
        editor.popups.setContainer('customPlugin.popup', editor.$tb)

        // If the editor is not displayed when a toolbar button is pressed, then set BODY as the popup's container.
        // editor.popups.setContainer('customPlugin.popup', $('body'));

        // Trigger refresh for the popup.
        // editor.popups.refresh('customPlugin.popup');

        // This custom popup is opened by pressing a button from the editor's toolbar.
        // Get the button's object in order to place the popup relative to it.
        var $btn = editor.$tb.find('.fr-command[data-cmd="myButton"]')

        // Compute the popup's position.
        var left = $btn.offset().left
        var top = $btn.offset().top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10)

        // Show the custom popup.
        // The button's outerHeight is required in case the popup needs to be displayed above it.
        editor.popups.show('customPlugin.popup', left, top, $btn.outerHeight())
      }

      // Hide the custom popup.
      function hidePopup() {
        editor.popups.hide('customPlugin.popup')
      }

      // Methods visible outside the plugin.
      return {
        showPopup: showPopup,
        hidePopup: hidePopup
      }
    }

    // Define an icon and command for the button that opens the custom popup.
    FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star', SVG_KEY: 'star' })
    FroalaEditor.RegisterCommand('myButton', {
      title: 'Show Popup',
      icon: 'buttonIcon',
      undo: false,
      focus: false,
      popup: true,
      // Buttons which are included in the editor toolbar should have the plugin property set.
      plugin: 'customPlugin',
      callback: function () {
        if (!this.popups.isVisible('customPlugin.popup')) {
          this.customPlugin.showPopup();
        }
        else {
          if (this.$el.find('.fr-marker')) {
            this.events.disableBlur()
            this.selection.restore()
          }
          this.popups.hide('customPlugin.popup')
        }
      }
    })

    // Define custom popup close button icon and command.
    FroalaEditor.DefineIcon('popupClose', { NAME: 'times', SVG_KEY: 'close' });
    FroalaEditor.RegisterCommand('popupClose', {
      title: 'Close',
      undo: false,
      focus: false,
      callback: function () {
        this.customPlugin.hidePopup();
      }
    })

    // Define custom popup 1.
    FroalaEditor.DefineIcon('popupButton1', { NAME: 'bell-o', SVG_KEY: 'anchors' });
    FroalaEditor.RegisterCommand('popupButton1', {
      title: 'Button 1',
      undo: false,
      focus: false,
      callback: function () {
        alert("popupButton1 was pressed");
      }
    })

    // Define custom popup 2.
    FroalaEditor.DefineIcon('popupButton2', { NAME: 'bullhorn', SVG_KEY: 'tags' });
    FroalaEditor.RegisterCommand('popupButton2', {
      title: 'Button 2',
      undo: false,
      focus: false,
      callback: function () {
        alert("popupButton2")
      }
    })

      new FroalaEditor("#edit", {
        toolbarButtons: [ ['bold', 'italic', 'underline', 'strikeThrough', 'myButton'], ['undo', 'redo'] ],
        pluginsEnabled: ['customPlugin']
      })
  </script>
</body>

</html>