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.
- Thanks to highlight.js and flaticons for making my life easy 😎 😎.
- 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 😩) .
- It handles all the features of the flavor editor.
- You can add three flavors - code, paragraph, images
- The code will be automatically detected thanks to highlight.js and you choose the programming language (in case the code is not detected)
- 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.
- You will be prompted for a image link and the rest is handled by the scripts.
- 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/
-
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>
- 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>
- Any suggestions and contributions are highly appreciated.
- Feel free to raise a PR or drop a message at suryasantosh14523@gmail.com