1

2025-11-21 01:42:54 +08:00
parent ff026c6f32
commit f89196c73c
1953 changed files with 9 additions and 15246 deletions
@@ -0,0 +1,190 @@
+<!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) {
+      const $ = 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>