Add a simple HTML editor and toggle system

[benwasser]

See button on far left of control bar on Redactor: http://imperavi.com/redactor/

[rtexal]

The toggle can already be done with getHTML and getText !

[benwasser]

You can also make your own rich text editor, but part of the reason for having an editor like Quill is that it accomplishes these things for you. HTML toggling is not a fringe case for the rich text editor, as you can see with Redactor, Tumblr, Wordpress, and so on.

I've actually built such a toggle on top of Quill that does as you say, but it's practically useless, as each tag and style that someone could input directly into HTML needs to be set up to convert to the visual editor code.

[jbrooksuk]

@benwasser why do you need to convert all of the HTML into a visual format? Just set the innerHTML of the preview element the HTML source?

[andrewsauder]

Upvote. @benwasser - I'm curious how you managed to add a toggle ontop? Until there's an official method to toggle between a raw HTML view and the WYSIWYG mode, I need to hack something to together also.

[kapouer]

Hi, it is actually useful in a very specific case: for a developer to see if Quill creates html marmelade or not. Such a button would be useful in the demo.

[jocooler]

It's pretty easy to see the up-to-date HTML output.

I use code like:

var editor = new Quill('#editor', { ... });
editor.on('text-change', function() {
    var html = editor.getHTML();
    HTML_Container.value = html; // make this a <textarea>
});

Just stack the two areas and toggle opacity with a button. Or preview the code below the editor.

[garygreen]

+1 any news on this @jhchen ? It would be nice as an option to enable / disable in the toolbar. Often you have 'advanced users' in your system who feel confident dealing with raw HTML. Also as mentioned it will be nice to see the generated HTML by quill at a glance. All wysiwyg I've used before have this, it's the only feature Quill is missing....

[jhchen]

If you want to simply output Quill’s contents in HTML this is already possible with DOM’s innerHTML, as others have already mentioned.

If you want to edit the HTML directly, then you may make some change that Quill does not allow. Editors deal with this by cleaning this up, which Quill 0.20 also does, but this communicates nothing about why your edit was not accepted or cleaned. Sometimes the reason is obvious and even welcome like merging adjacent identical tags, but sometimes the reason is very elusive, particularly because often the reason you are extorting to editing HTML is precisely because you are trying to make a modification not supported or understood by the editor. If this is acceptable user experience then you can certainly implement a custom module but Quill is not in that camp and will not condone this use case with an official module.

Some editors do not attempt to understand its contents and let the browser take care of everything through contenteditable, so they can accept any HTML edit, but then they suffer from all the issues from letting browsers take care of everything like non-determinism, inconsistent behavior across browsers, and cannot offer an API beyond what the DOM already offers. Most new editor do not take this approach and Quill does not either but if this is not the tradeoff choice you would have made then Quill is probably not the best solution for your needs.

[aguynamedben]

@jhchen I wish you would reconsider your stance on this. I'm in the same boat as @garygreen, where I have advanced internal admin users that are confident and allowed to edit our HTML directly. Those advanced users sometimes need to paste embed links like the embed code to show a video hosted on Wistia. I agree it's "edit at your own risk, for advanced users only", and that some of the HTML might be stripped in edge cases, but it's still a real use case that you shouldn't just deny or write off as invalid.

[aguynamedben]

You mention that Quill already cleans up HTML that it doesn't allow. A practical solution could be to show an alert when HTML is cleaned up so that advanced users are aware they added code that wasn't allowed. I.e. "Some of the HTML you entered in Advanced Mode wasn't allowed and had to be removed. Please double-check the results of your edits."

[AidasK]

This feature is a must! 👍

[maximelafarie]

Always nothing about that awesome new feature ? It needs to be implemented !

[erw13n]

Here's what I did to make it happen https://codepen.io/anon/pen/ZyEjrQ

[matthewfbenjamin]

Does anyone know how to make this work with ReactQuill? My issue is that I don't instantiate Quill with ReactQuill.

[SoaresMG]

I'm using react-quill and quill, how may I create something like this? I wasn't able to transpile the code given by @erw13n to the react environment and ended hacking all the script until the buttons stopped working.

Shouldn't this be one of core features? Or is it too hard too implement (time wise)? Almost all the customers I've know html and they use it very often using editors like this.

One simple example is when they edit an email template using html or when they just copy templates from the web into the editor.

I've tried tiny-mce, and they have this feature, but it's a cluster of problems integrating with react/webpack...

This lib seems pretty and simple (just what I want), however it misses this key feature (at least for me).

[matthewfbenjamin]

@LESARQ check this out

[SoaresMG]

Hey @mbenjamin618 thank you, but I think I've seen all the resources available online 😄 I've done something similar and created a button on the toolbar, then on click I show my textarea and the user may change it.

Following @erw13n script, if you paste:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title#### - Invoice Submitted #21E1B3FA7D</title>

        <style>
            p {
                font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
            }
        </style>
    </head>

    <body bgcolor="#FFFFFF">
        <table>
            <tr>
                <td><p>example</p></td>
            </tr>
        </table>
    </body>
</html>

And then if you change it back to the editor and again to the source, you will see that all the code was erased.

Perhaps I'm confused and RichText Editor != Html Editor.

[erw13n]

@LESARQ please read @jhchen comment above

If you want to edit the HTML directly, then you may make some change that Quill does not allow. Editors deal with this by cleaning this up, which Quill 0.20 also does

Any element tags which Quill does not allow will automatically clean up, so if you paste such as Div or Table, Quill will replace it with Paragraph.

[SoaresMG]

Ok, I see. What a shame 😞

[Miindaugas]

FeelsBadMan..

[imnithin]

https://quilljs.com/standalone/full/

[yangwen2]

Ok so it looks like quill is not designed to be used as an web editor for HTML layouts. We need a richtext editor to create and edit E-mail templates. It doesn't look like quill allows for div elements.. Delete.

[qq403925754]

453453

[Eddcapone]

Any progress on this? The solution from @erw13n is a good start, but it does not format the html correctly, everything is in one line.

[5slight]

Would it be possible to have a setting to disable automatic code cleaning so we can handle this outside of quill.

It would be quite easy to have a toggle above the editor like in wordpress where you can go between RichText and PlainText as long as quill doesn't just remove anything done in PlainText.

Some kind of html pretty printer would be needed to solve @Eddcapone issue of everything on one line but again thats something that can be handled outside of quill. It can always be concatenated back if the pretty printed code messes with quill.

[hberton]

@Eddcapone I have the same problem

any other solution?

[mrspence]

+1

[nzolore]

While the interface is perfect for editing simple text, a way to preserve custom code would allow a lot more applications.

Here's another "source-button" attempt with external prettifier: https://jsfiddle.net/nzolore/1jxy58vn/

[RevealedFrom]

If source code editor is available, it will take pressure off the urgency of delivering other features such as tables. Most people who can use raw Html know all about the <table> tag.

Just have a clean up to remove incompatible or dangerous tags such as <script>.

[Denny966]

+1

[jbaydar]

+1

[RevealedFrom]

I want to add marquee or css animations. It would be too much to ask for these in Quill JS. But if there is source Html edit, they're all there.

[mintyPT]

+1

[aaclayton]

Just want to say I had put about an hour into building quill into my new platform and was loving the developer friendliness so far until I discovered there is no support for raw HTML editing. Complete deal-breaker, had to go in a different direction.

[RevealedFrom]

I am now looking at summernote. It is almost plug compatible with JS Quill.

[egorvdovenko]

Module for use with ngx-quill.

html-editor.ts:

export class HtmlEditor {
    quill: any;
    options: any;
    textarea: any;

    constructor(quill: any, options = {}) {
        this.quill = quill;
        this.options = options;

        this.addTextarea();
        this.bindEditorBehavior();
        this.bindButtonBehavior();
    }

    addTextarea() {
        let container = this.quill.addContainer('ql-custom');

        this.textarea = document.createElement('textarea');
        this.textarea.className = "ql-edit-html-textarea";
        this.textarea.style.display = "none";

        container.appendChild(this.textarea);
    }

    bindEditorBehavior() {
        let editor = document.querySelector('.ql-editor');

        this.quill.on('text-change', () => {
            if (editor) {
                let html = editor.innerHTML;

                this.textarea.value = html;
            }
        });
    }

    bindButtonBehavior() {
        let button = document.querySelector('.ql-edit-html');

        if (button) {
            button.addEventListener('click', () => {
                if (this.textarea.style.display === '') {
                    let html = this.textarea.value;

                    this.quill.pasteHTML(html);
                }

                this.textarea.style.display =
                    this.textarea.style.display === 'none'
                        ? ''
                        : 'none';
            });
        }
    }
}

quill-config.ts:

import Quill from 'quill';
import { HtmlEditor } from './html-editor'

Quill.register('modules/htmlEditor', HtmlEditor);

export class QuillConfig {
    constructor() {
        this.modules = {
            htmlEditor: true
        }
    }

    public modules = {};
}

textarea styles:

.ql-edit-html-textarea {
    width: 100%;
    background: rgb(29, 29, 29);
    color: rgb(204, 204, 204);
    outline: none;
    padding: 12px 15px;
    font-family: Consolas;
    position: absolute;
    top: 0;
    bottom: 0;
    border: none;
}

html:

<quill-editor>
    <div quill-editor-toolbar>
        <span class="ql-formats">
            <button class="ql-edit-html">html</button>
        </span>
    </div>
</quill-editor>

[izzygld]

Here is a component i made for Quill showing a "Source" show Html option to the Wysiwyg. See - https://gist.github.com/izzygld/0762dce7292baf2168f9c7b2aa99b535

[chenbimo]

So greate project. So many troubles.

[Vishnupriya112]

@erw13n But its removing div , If am adding code like

<div>Hello</div>

Its showing <p>Hello</p>

Is any other way to do

[dokicro]

@Vishnupriya112 I have the same problem, it removes even<br>

[sarang-naico]

Hi, are there any plans to implement this feature?

[mayesgr]

Glad I found this issue before I decided on a text editor. What a pity that a years-old conceptualization and policy decision is preventing a somewhat straightforward technical implementation and, from glancing at this issue, a quite sought-after feature.

Scratch this one off my list!

[marcelo-amorim]

Such a great project but it makes no sense have to import Quill just to show what you've build with the editor with preserved styles (to render Delta operations).

I think some warning should be added to git's page saying Quill is not an HTML Editor and some about its dependency on Delta to render what you've stored

[rkarroll]

Agree with @marcelo-amorim. Just integrated Quill, it's working great and now the customer wants to add more complex HTML tags beyond what is supported. Now having to move to something else or hacking together my own thing.

[brankoiliccc]

This is a deal breaker. Our users need to create responsive content with custom elements. Why would u not allow code editor just to add bootstrap classes for example?

[aswzen]

Any update to this absolutely very very basic feature?