What's new

Welcome to GloTorrents Community

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

Resources for HTML Editors

_.:=iTake=:._

Administrator
Staff member
ZeuS
Super Moderator
+Lifetime VIP+
Registered
Joined
Oct 20, 2018
Messages
1,370
Reaction score
1,431
Points
113
Credits
14,854
Here is a list of HTML Editors you can implement in your project.

Here at GloTorrents we use SCEditor by creator Sam Clarke..



SCEditor
A lightweight, open source, WYSIWYG BBCode and (X)HTML editor.
https://www.sceditor.com/
Usage;

Quick Start
Include the JS & CSS:

Code:
<link rel="stylesheet" href="minified/themes/default.min.css" />
<script src="minified/sceditor.min.js"></script>

Initialize the editor

BBCode

Code:
<script src="minified/formats/bbcode.min.js"></script>
<script>
// Replace the textarea #example with SCEditor
var textarea = document.getElementById('example');
sceditor.create(textarea, {
    format: 'bbcode',
    style: 'minified/themes/content/default.min.css'
});
</script>

XHTML

Code:
<script src="minified/formats/xhtml.min.js"></script>
<script>
// Replace the textarea #example with SCEditor
var textarea = document.getElementById('example');
sceditor.create(textarea, {
    format: 'xhtml',
    style: 'minified/themes/content/default.min.css'
});
</script>

We highly recommend this because its what we use at GloTorrents.
We moved our Web server to NGINX so working on a few tweaks to make site run smoothly.!
 
Last edited:

_.:=iTake=:._

Administrator
Staff member
ZeuS
Super Moderator
+Lifetime VIP+
Registered
Joined
Oct 20, 2018
Messages
1,370
Reaction score
1,431
Points
113
Credits
14,854
Froala Editor

The Next Generation WYSIWYG HTML Editor
Beautiful Javascript web editor that's easy to integrate for developers and your users will simply fall in love with its clean design.


https://www.froala.com/wysiwyg-editor

The following code example illustrates how to handle file upload on your server using PHP as a server-side language. For step by step explanation of the upload flow see file upload concept.

Frontend
The main index page.

HTML:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- Include Editor style. -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="sample">
    <h2>File upload example.</h2>
    <form>
      <textarea id="edit" name="content"></textarea>
    </form>
  </div>

  <!-- Include Editor JS files. -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script>

  <!-- Initialize the editor. -->
  <script>
    new FroalaEditor('#edit', {
      // Set the file upload URL.
      fileUploadURL: '/upload_file.php',

      fileUploadParams: {
        id: 'my_editor'
      }
    })
  </script>
</body>
</html>

Backend
upload_file.php file will do the upload part. It has basic file format validations this can be easily extended.

The uploads directory must be set to a valid location before any uploads are made. The path can be any folder that is accessible and write available.

After processing the uploaded image, if it passes the validation, the server will respond with a JSON object containing a link to the uploaded file.

E.g.: {"link":"http://server_address/uploads/name_of_file"}.


PHP:
<?php

try {
  // File Route.
  $fileRoute = "/uploads/";

  $fieldname = "file";

  // Get filename.
  $filename = explode(".", $_FILES[$fieldname]["name"]);

  // Validate uploaded files.
  // Do not use $_FILES["file"]["type"] as it can be easily forged.
  $finfo = finfo_open(FILEINFO_MIME_TYPE);

  // Get temp file name.
  $tmpName = $_FILES[$fieldname]["tmp_name"];

  // Get mime type. You must include fileinfo PHP extension.
  $mimeType = finfo_file($finfo, $tmpName);

  // Get extension.
  $extension = end($filename);

  // Allowed extensions.
  $allowedExts = array("txt", "pdf", "doc","json","html");

  // Allowed mime types.
  $allowedMimeTypes = array("text/plain", "application/msword", "application/x-pdf", "application/pdf", "application/json","text/html");

  // Validate file.
  if (!in_array(strtolower($mimeType), $allowedMimeTypes) || !in_array(strtolower($extension), $allowedExts)) {
    throw new \Exception("File does not meet the validation.");
  }

  // Generate new random name.
  $name = sha1(microtime()) . "." . $extension;
  $fullNamePath = dirname(__FILE__) . $fileRoute . $name;

  // Check server protocol and load resources accordingly.
  if (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] != "off") {
    $protocol = "https://";
  } else {
    $protocol = "http://";
  }

  // Save file in the uploads folder.
  move_uploaded_file($tmpName, $fullNamePath);

  // Generate response.
  $response = new \StdClass;
  $response->link = $protocol.$_SERVER["HTTP_HOST"].dirname($_SERVER["PHP_SELF"]).$fileRoute . $name;

  // Send response.
  echo stripslashes(json_encode($response));

} catch (Exception $e) {
  // Send error response.
  echo $e->getMessage();
  http_response_code(404);
}

?>
 

_.:=iTake=:._

Administrator
Staff member
ZeuS
Super Moderator
+Lifetime VIP+
Registered
Joined
Oct 20, 2018
Messages
1,370
Reaction score
1,431
Points
113
Credits
14,854
CKEditor
Proven, enterprise-grade WYSIWYG HTML editor with wide browser compatibility,
including legacy browsers.
https://ckeditor.com/

CKEditor 4

Proven, enterprise-grade WYSIWYG HTML editor with wide browser compatibility, including legacy browsers.



Features

  • Paste from Word and Excel, spell check, accessibility checker, tables.
  • Autocomplete, @mentions, widgets, code snippets, emoji 😊 plugins.
  • Full control over content: HTML filtering, view source mode.
  • Great accessibility: WCAG 2.0 AA and Section 508 compliant.
  • Long-term support (LTS) until 2023.

CKEditor 5

Modern JavaScript rich text editor with a modular architecture.
Its clean UI and features provide the perfect WYSIWYG UX ❤️ for creating semantic content.


Features
  • Written in ES6 with MVC architecture, custom data model, virtual DOM.
  • Responsive images and media embeds (videos, tweets).
  • Custom output format: HTML and Markdown support.
  • Boost productivity with auto-formatting and collaboration.
  • Extensible and customizable by design.


Adding CKEditor to Your Page

If the sample works correctly, you are ready to build your own site with CKEditor included.

To start, create a simple HTML page with a <textarea> element in it. You will then need to do two things:

  1. Include the <script> element loading CKEditor in your page.
  2. Use the CKEDITOR.replace() method to replace the existing <textarea> element with CKEditor.

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <!-- Make sure the path to CKEditor is correct. -->
        <script src="../ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                // Replace the <textarea id="editor1"> with a CKEditor
                // instance, using default configuration.
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

When you are done, open your test page in the browser.

Congratulations! You have just installed and used CKEditor on your own page in virtually no time!
 

_.:=iTake=:._

Administrator
Staff member
ZeuS
Super Moderator
+Lifetime VIP+
Registered
Joined
Oct 20, 2018
Messages
1,370
Reaction score
1,431
Points
113
Credits
14,854
Quill Rich Text Editor
Quill is a free, open source WYSIWYG editor built for the modern web.
With its modular architecture and expressive API, it is completely customizable to fit any need.
https://quilljs.com/

Getting Started is Easy

JavaScript:
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

// Open your browser's developer console to try out the API![/CODE]
 

_.:=iTake=:._

Administrator
Staff member
ZeuS
Super Moderator
+Lifetime VIP+
Registered
Joined
Oct 20, 2018
Messages
1,370
Reaction score
1,431
Points
113
Credits
14,854
Summernote
Super Simple WYSIWYG Editor on Bootstrap.
Summernote is a JavaScript library that helps you create WYSIWYG editors online
.
https://summernote.org/
Installation

Requires HTML5 doctype
Bootstrap uses certain HTML elements and CSS properties which require HTML5 doctype. Include <!DOCTYPE html> in the beginning of all your projects.

HTML:
<!DOCTYPE html>
<html lang="en">
...
</html>

Include js/css
Summernote uses the Open Source libraries jQuery and Bootstrap, if you are using the Boostrap 3 or 4 versions of Summernote, or just jQuery if you use the Lite version of Summernote. Include the Following code in the headarea of your HTML page.

HTML:
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>

Don’t forget to change the file’s path if you downloaded summernote in a different folders.

You can however, and a lot of developers do these days, is include the stylesheet’s within the head are of your page, and include the Javascript at the bottom of your page, but before the closing body tag.

Embed
Summernote can be used with or without a form.

To use without a form, we suggest using a div in the body; this element will then be used where you want the Summernote editor to be rendered within your page.

HTML:
<div id="summernote">Hello Summernote</div>

To use within a form, is pretty much the same as above, but rather than a div, we recommend using a textarea element inside a form, which should include a name attribute so when the form is submitted you can use that name to process the editors data on your backend. Also, if using Summernote inside a form to set the attribute method="post" to allow larger sized editor content to parse to the backend, if you don’t your data either may not parse, or will be truncated.

HTML:
<form method="post">
  <textarea id="summernote" name="editordata"></textarea>
</form>

Run summernote
Run the script below when document is ready!

JavaScript:
$(document).ready(function() {
  $('#summernote').summernote();
});

The $(document).ready function is particularly necessary if you include the Javascript at the end of the document.

Simple example for Bootstrap 3.x.x
You can also test running example. Save below code as index.html and open it with your browser.

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
</head>
<body>
  <div id="summernote"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>
</html>
 
Last edited:

_.:=iTake=:._

Administrator
Staff member
ZeuS
Super Moderator
+Lifetime VIP+
Registered
Joined
Oct 20, 2018
Messages
1,370
Reaction score
1,431
Points
113
Credits
14,854
For bootstrap 4
You can also use Summernote with Bootstrap 4 using summernote-bs4.js and summernote-bs4.css. This is also beta version, as Bootstrap 4 is in beta. Below is a code example using bootstrap 4.

HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>bootstrap4</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
  </head>
  <body>
    <div id="summernote"></div>
    <script>
      $('#summernote').summernote({
        placeholder: 'Hello bootstrap 4',
        tabsize: 2,
        height: 100
      });
    </script>
  </body>
</html>

Without Bootstrap
You can use Summernote without Bootstrap using summernote-lite.js and summernote-lite.css. The Lite version is currently in Beta. Please report bugs so we can improve it. Below is a code example using summernote lite.

HTML:
<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>bootstrap4</title>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.js"></script>

  </head>

  <body>

    <div id="summernote"></div>

    <script>

      $('#summernote').summernote({

        placeholder: 'Hello stand alone ui',

        tabsize: 2,

        height: 100

      });

    </script>

  </body>

</html>

You can check the docs for more info
 

_.:=iTake=:._

Administrator
Staff member
ZeuS
Super Moderator
+Lifetime VIP+
Registered
Joined
Oct 20, 2018
Messages
1,370
Reaction score
1,431
Points
113
Credits
14,854
So these are some of the most popular WYSIWYG used, don't be surprised to see any of these on GloTorrents soon..
 
shape1
shape2
shape3
shape4
shape7
shape8
Top