api
Form Editor

How To Use Snow Editor and Bubble Editor

This documentation provides instructions on how to use Snow Editor and Bubble Editor in your web application. Both editors are built using the FhyEditor library, and you can integrate them by including their respective scripts.

Snow Editor

Snow Editor is a rich text editor with a minimalist design. It allows users to create and format content in a clean and simple interface.

Code Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FhyEditor</title>

  <script src="https://api.i-as.dev/api/fhy-editor/snow.dev"></script>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f7f7f7;
      color: #333;
    }

    h1 {
      text-align: center;
      margin: 20px 0;
      font-size: 24px;
      color: #444;
    }

    #snow-editor {
      width: 80%;
      margin: 0 auto;
      border: 2px solid #ccc;
      border-radius: 8px;
      padding: 15px;
      background-color: #ffffff;
    }

    .fhy-editor {
      font-size: 16px;
      line-height: 1.5;
      padding: 10px;
      min-height: 200px;
      border-radius: 6px;
      border: 1px solid #ddd;
      background-color: #f4f4f4;
    }

    .fhy-editor:focus {
      border-color: #007bff;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    }
  </style>
</head>
<body>
  <h1>Snow Editor</h1>
  <div id="snow-editor" class="fhy-editor" style="height: 300px;"></div>
</body>
</html>

Explanation:

  • Script: The Snow Editor script is loaded via the URL https://api.i-as.dev/api/fhy-editor/snow.dev.
  • Editor Container: The editor is placed inside a <div> element with id="snow-editor".
  • Styles: Custom styles are applied for a clean and simple interface. You can adjust the width, height, and other styles as needed.

Bubble Editor

Bubble Editor is a variant of the Snow Editor that features a more interactive and modern interface. It is perfect for more visually rich content creation.

Code Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FhyEditor</title>

  <script src="https://api.i-as.dev/api/fhy-editor/bubble.dev"></script>

  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f7f7f7;
      color: #333;
    }

    h1 {
      text-align: center;
      margin: 20px 0;
      font-size: 24px;
      color: #444;
    }

    #bubble-editor {
      width: 80%;
      margin: 0 auto;
      border: 2px solid #ccc;
      border-radius: 8px;
      padding: 15px;
      background-color: #ffffff;
    }

    .fhy-editor {
      font-size: 16px;
      line-height: 1.5;
      padding: 10px;
      min-height: 200px;
      border-radius: 6px;
      border: 1px solid #ddd;
      background-color: #f4f4f4;
    }

    .fhy-editor:focus {
      border-color: #007bff;
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
    }
  </style>
</head>
<body>
  <h1>Bubble Editor</h1>
  <div id="bubble-editor" class="fhy-editor" style="height: 300px;"></div>
</body>
</html>

Explanation:

  • Script: The Bubble Editor script is loaded via the URL https://api.i-as.dev/api/fhy-editor/bubble.dev.
  • Editor Container: The editor is placed inside a <div> element with id="bubble-editor".
  • Styles: Similar to the Snow Editor, but you can modify the styles to suit the Bubble Editor’s unique design.

Common Setup Instructions

  1. Include the Script: For either editor, add the respective script tag in the <head> section of your HTML.
  2. Editor Container: Create a <div> with a unique ID for the editor (e.g., snow-editor or bubble-editor).
  3. Custom Styles: Apply custom styles to adjust the appearance of the editor. Adjust properties such as width, height, border, and background-color to match your design preferences.

Both editors can be embedded and styled as needed to suit your content management system or project.