main wrapping element

[mattgi]

By default, the editor will use <p> tags to contain content and support carriage returns, etc. Alt., the disableReturn option can be used to force plain text, thereby removing all wrapping <p> tags.

I have a requirement to support formatting inside block elements like Headers and Blockquotes, but I need to also support carriage returns and do not want <p> tags to be used.

Standard:

<div class="editor">
  <p>this is the <i>first</i> line</p>
  <p>this is a <b>second</b> line</p>
</div>

Requirement:

<h1 class="editor">
  this is the <i>first</i> line<br />this is a <b>second</b> line
</h1>

Perhaps an option like disableParagraphReturn: true is what I am looking for - where it would use <br>'s instead of <p>'s when set to true.

Another option may be to simply consider the element that has been used for the editor - where it exhibits a behavior without an option being passed (e.g. <div> means that <p> tags will be used; <h1>..<h6>, <blockquote> will use <br>'s).

I will start to investigate how this may be implemented if it is a feature that others may want.

[mattgi]

Just looking further in to semantic HTML guidelines...

When the editor element is a block like a <H1>, using <p> is not permitted and <br> should be used to indicate a line break. This lends itself to suggest that the editor should be aware of the main element and use permissible content within it.

Relevant Links:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content

[thomstark]

I want! I want all p tags and all divs disabled, and only br tags when hitting Return.

[nelsonpecora]

This would also be useful if the containing element were itself a paragraph, e.g.

<p class="editor">
  this is the <i>first</i> line<br />this is a <b>second</b> line
</p>

...which is sort of how I'm using it right now. (It still tries to insert extraneous <p> tags, see #149 (comment) )

[alvarotrigo]

Very interested on seeing this behavior too.

[alvarotrigo]

Interesting... using display:inline-block forces <br> on enter press.
Not a medium-editor issue but a contenteditable one. I found it out here.

Reproduction online

[alvarotrigo]

This behavior is totally different in Firefox. It seems Firefox doesn't even create new p elements in any way.

Firefox requires a block wrapper to create p elements:

<div class="editable">
     <p>
        This is just a demo
   </p>
</div>

[regislutter]

@alvarotrigo Thanks for the tip!
And it's not blocking the creation of LI elements (with the code from medium.js demo) if you put a UL/OL around.
I needed to be able to edit headers and paragraphs without creating new ones, but also lists and creating new <li> elements in it.

[dypsilon]

I am also interested in this feature and would love to see some progress here.

[mscreenie]

Same. I don't want wrapping of anything, maybe just standard <br> for new lines.

[volumetric]

Anyone found a solution for this?

[skiokko]

I also agree that have < br> for new lines by default is better. Generate new < p> for every line break create problems.

[ghost]

In the medium-editor.js file, around like 6822, or search this and replace that last p tag with blank.

        // Firefox thrown an error when calling 'formatBlock' on an empty editable blockContainer that's not a <div>
        if (MediumEditor.util.isMediumEditorElement(node) && node.children.length === 0 && !MediumEditor.util.isBlockContainer(node)) {
            this.options.ownerDocument.execCommand('formatBlock', false, 'p');
        }

[alvarotrigo]

Thanks ghost, apparently firefox fixed it:
#994

[DavidGeismarLtd]

Any updates on this ? How do you get brs instead of ps ?