How do I render TinyMce input without the surrounding paragraph tag?

How do I render TinyMce input without the surrounding paragraph tag?

Additional Posts

I solved this for APTA using the following.

public static MvcHtmlString RenderWithoutSurroundTag(this XhtmlString xhtmlstring)
{
    if (!xhtmlstring.HasValue())
        return new MvcHtmlString(string.Empty);

    var input = xhtmlstring.ToHtmlString();
    if (!input.HasValue())
        return new MvcHtmlString(string.Empty);

    var doc = new HtmlDocument();
    doc.LoadHtml(xhtmlstring.ToInternalString());

    var paragraphs = doc.DocumentNode.SelectNodes("//p");
    var taglessParagraphs = string.Join(Environment.NewLine, paragraphs.Select(x => x.InnerHtml));
    return new MvcHtmlString(taglessParagraphs);
}

Then in my view I used.

@Model.Text.RenderWithoutSurroundTag()

Comments

• Can you explain why you would want to remove a a tag surrounding text.  Seems semantically wrong
• Also, wouldn't a textarea be the best use for this.  Maybe i am out on a limb and going on a rant but not sure the usecase.
• I've done this before where I wanted a headline, but the client needed the ability to insert icons (via TinyMCE plugin).  I've also had areas (such as copyright fields) where it needs to be text, without a p tag, but with the ability to include inline links.
• @JoshuaFolkerts @BobDavidson The tech plan calls for a limited tinyMCE that can support bold, and italics but nothing more as part of a title, in an H2.
• you can use the allowed tags in the tinymce configuration.
• https://world.episerver.com/forum/developer-forum/-Episerver-75-CMS/Thread-Container/2018/10/removing-p-tag-around-one-line-text-in-tinymce-v2-6-3/

I did this with a very basic TinyMCE plugin. This is for the V1 version of the TinyMCE package, but I imagine it could be relatively easily updated for V2. And if/when someone does update to V2, hopefully they'll post that as a new answer here.

First, create the non-visual TinyMCE plugin:

[TinyMCEPluginNonVisual(
    PlugInName = PlugInName,
    AlwaysEnabled = false,
    EditorInitConfigurationOptions = "{ force_p_newlines: false, forced_root_block: false }")]
public class RemoveParagraphNewlinesPlugin
{
    public const string PlugInName = "removeparagraphs";
}

Next, you'll need a JS file that basically does nothing. This was just required because Episerver (at least in V1 TinyMCE) assumes that any plugin requires some kind of Javascript to be imported. If this file isn't there, it doesn't work. In the path /Util/Editor/tinymce/plugins/removeparagraphs/editor_plugin.js:

// This just needs to exist to inject configuration to remove paragraphs
(function () {
  tinymce.create('tinymce.plugins.removeparagraphs', {
    init: function (ed, url) { },
    getInfo: function () {
      return {
        longname: "Remove Paragraphs",
        author: "Blend Interactive",
        authorurl: "",
        infourl: "",
        version: "1.0"
      };
    }
  });
  tinymce.PluginManager.add('removeparagraphs', tinymce.plugins.removeparagraphs);
})();

Then I create a TinyMCE settings that includes this plugin and specifically configures a paired-down editor with only inline styling options available.

[ServiceConfiguration(ServiceType = typeof(PropertySettings))]
public class SimpleTinyMCESettings : PropertySettings<TinyMCESettings>
{
    static readonly Guid GUID = new Guid("1cbd3485-c392-49c8-8621-9fe219c87461");
    static readonly string[] MainToolbar = { TinyMCEButtons.Anchor, TinyMCEButtons.EPiServerLink, TinyMCEButtons.Unlink, TinyMCEButtons.Bold, TinyMCEButtons.Italic, TinyMCEButtons.JustifyCenter, TinyMCEButtons.StyleSelect, TinyMCEButtons.RemoveFormat, TinyMCEButtons.Code, IconsTinyMCEPlugin.PlugInName, TinyMCEButtons.CharacterMap, TinyMCEButtons.Abbreviation, TinyMCEButtons.Acronym };

    public SimpleTinyMCESettings()
    {
        DisplayName = "Simple Settings";
    }

    public override TinyMCESettings GetPropertySettings()
    {
        var settings = new TinyMCESettings();

        settings.ToolbarRows.Add(new ToolbarRow(MainToolbar));

        settings.ContentCss = "/static/wysiwyg-simple.css";

        settings.NonVisualPlugins.Add(RemoveParagraphNewlinesPlugin.PlugInName);

        return settings;
    }

    public override Guid ID { get { return GUID; } }
}

And finally, reference this on properties where it makes sense.

    [Display(
        Name = "Footer Copyright",
        GroupName = SystemTabNames.Content,
        Order = 100)]
    [CultureSpecific]
    [PropertySettings(typeof(SimpleTinyMCESettings))]
    public virtual XhtmlString FooterCopyright { get; set; }

The editorial interface this creates isn't perfect (it still uses a full-height XhtmlString editor, even though you're editing something that is probably a single line), but that could probably be tweaked.