/flavor

rich text editor using vanilla javascript

Primary LanguageCSS

🔥 🔥 flavor

Inspired by WYSIWYG - What You See Is What You Get.

Simple yet powerful web text editor. Its features, customization and lightweightness is taken care efficiently.

Contents

Screenshot

  • At first look it might not please the aesthetic eyes ( let's say Iam more concerned about the editor features rather than looks ) but give it a try it won't disappoint you like your ex 😡 (who Iam I kidding 😞 I am so lonely 😩) .

🔧 Flavor Actions Bar

Screenshot

  • It handles all the features of the flavor editor.
  • You can add three flavors - code, paragraph, images

🕹️ Code

Screenshot

  • The code will be automatically detected thanks to highlight.js and you choose the programming language (in case the code is not detected)

📝 Paragraph

Screenshot

  • You get a simple yet powerful text editor to meet all of your needs (atleast my meet mine). If you want to see a new feature please raise a pull request.

📷 Images

  • You will be prompted for a image link and the rest is handled by the scripts.

💾 Save

  • It downloads a html file with all the content. Note that it won't include any headers or any script tags.
  • It only contains plain html of the flavor elements.
  • In this way you can add your custom stylesheets and scripts or else just add the /styles/flavor.css/

🎉 Getting started

  • Download the assets, scripts, styles folder

  • Create a html file <file_name>.html

  • Add the corresponding css files

    • While using flavor editor
      <link rel="stylesheet" href="./styles/flavor-editor.css">
    • For displaying the saved flavor documents
      <link rel="stylesheet" href="./styles/flavor.css">

  • Create a div and add a class flavor to it

  <div class="flavor"></div>
  • Add script tags to the html file
  <script src="./scripts/flavor.js"></script>
  • For automatic code recognization add the following script tags
  <script src="./scripts/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

🌟 Simple setup

  • copy and paste the below code in your html file and place it along with the assets, styles and scripts folders.
  <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Title</title>
      <link rel="stylesheet" href="./styles/flavor-editor.css">
      <link rel="stylesheet" href="./styles/dark.css">
  </head>

  <body>
      <div class="flavor"></div>
      <script src="./scripts/flavor.js"></script>
      <script src="./scripts/highlight.pack.js"></script>
      <script>hljs.initHighlightingOnLoad();</script>
  </body>

  </html>

🤝 Contribute