Trumbowyg: How to disable auto p tag

Created on 25 May 2017  ·  8Comments  ·  Source: Alex-D/Trumbowyg

When I added content plugin adding auto p tag. How can I disable it?

question

All 8 comments

Do not understand your question, sorry.

I have noticed the same issue of automatically adding p tag, here's one way to observe it.

How to reproduce the bug?

Any Trumbowyg version

Change Trubowyg to code view. Type Hello world as the content. Switch to WYSIWYG view. Switch back to code view.
Expected result: Hello world
Observed result: <p>Hello world</p>

If you do not want any

tag, maybe you can set tagToRemove option to ['p']

I do want to still use p tags, but what is happening is that editor is adding extra markup when none is presented initially.

That's a browser behaviour, can't do anything for that.

@Alex-D, can you please explain, how is this a browser behaviour?

Trumbowyg is based on contenteditable which is implemented differently between browsers.

When you hit enter, browser create a new section and the only choice you have is to use p or use div. As Trumbowyg want to be more semantic as possible, I've chosed p.

function enterKeyPressHandler(evt) {
        var sel, range, br1, br;
        var addedBr = false;
        evt = evt || window.event;
        var charCode = evt.which || evt.keyCode;
        if (charCode == 13) {
            if (typeof window.getSelection != "undefined") {
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    br1 = document.createElement("br");
                    br = document.createElement("br");
                    range.insertNode(br1);
                    range.insertNode(br);
                    range.setEndAfter(br);
                    range.setStartAfter(br);
                    sel.removeAllRanges();
                    sel.addRange(range);
                    addedBr = true;
                    console.log(range)
                }
            } else if (typeof document.selection != "undefined") {
                sel = document.selection;
                if (sel.createRange) {
                    range = sel.createRange();
                    range.pasteHTML("<br>");
                    range.select();
                    addedBr = true;
                }
            }
            if (addedBr) {
                if (typeof evt.preventDefault != "undefined") {
                    evt.preventDefault();
                } else {
                    evt.returnValue = false;
                }
            }
        }
    }
var el = document.getElementById("my-editor");

    if (typeof el.addEventListener != "undefined") {
        el.addEventListener("keypress", enterKeyPressHandler, false);
    } else if (typeof el.attachEvent != "undefined") {
        el.attachEvent("onkeypress", enterKeyPressHandler);
    }

has been helpful for me to solve this

Was this page helpful?
0 / 5 - 0 ratings