WYSIWIG Editor in MVC Widget Properties

The built-in TextEditorWidget uses Medium Editor as the client-side library for providing rich UX.

This library is supposed to be a clone of the editor available when writing on https://medium.com/, which doesn't provide WYSIWYG functionality.

You would need to swap the "InlineEditors/_TextEditor" for a different InlineEditor for the TextWidget when the user selects the "Use WYSIWYG" option in the Widget Properties.

Edit the _TextWidget.cshtml to switch between editors.

@model  TextWidgetViewModel

@if (Context.Kentico().PageBuilder().EditMode)
{
    if (Model.UseWYSIWYG)
    {
        // Implement this yourself

        Html.RenderPartial("InlineEditors/_WYSIWYG", new WYSIWYGEditorViewModel
        {
            PropertyName = nameof(TextWidgetProperties.Text),
            Text = Model.Text
        });
    }
    else
    {
        Html.RenderPartial("InlineEditors/_TextEditor", new TextEditorViewModel
        {
            PropertyName = nameof(TextWidgetProperties.Text),
            Text = Model.Text
        });
    }
}
else
{
    @Html.Raw(Model.Text);
}

The above "InlineEditors/_WYSIWYG" and WYSIWYGEditorViewModel don't exist - you would need to create them yourself, but the existing "InlineEditors/_TextEditor" would be a good template.

You can also check the new marketplace for more Widgets and Editors https://devnet.kentico.com/marketplace.

Kentico has a GitHub repo of sample Widgets, here is their RichTextWidget (https://github.com/Kentico/ems-mvc-components/tree/master/Kentico.Widget.RichText).

Sean,

Thanks for the answer over the weekend, I appreciate it! I have this working to an extent in that when the content editor clicks the gear icon and goes to the properties for the widget, it displays the content in a text area. My real question is, does Kentico currently have an Editing Component property to render the WYSIWIG built into Kentico like this:

[EditingComponent(RichTextComponent.IDENTIFIER)]

or something similar to that?

Thanks,

Jim Piller

Ah, you want to use WSYIWYG as a form control - no I don't believe that exists currently, but it shouldn't be too hard to build.

Check out the docs covering Developing Form Components

Hey Sean,

So I have a follow up question. I was exploring the documentation for medium editor, which is the inline editor used in the text widget for dancing goats, and I found an extension that would allow for the insertion of tags w/ a css class name. This would go a long way to helping me w/ my WYSIWIG problem, but I'm not sure how to initialize the plugin. I have the js file downloaded and in the project, but where do I reference it so that Kentico / medium editor knows about it?

Thanks,

Jim P.

Jim,

If you have the TextEditor inline editor integrated into your MVC project, then you should have a file \Content\InlineEditors\TextEditor\medium-editor\medium-editor.js in your MVC project.

This file is where you can configure addition settings for the MediumEditor library.

You should put any addition extensions/plugins for the MediumEditor library in the same folder as medium-editor.js, but with a new file name.

For example, I'm also using MediumButton to add a button to wrap text in <small>{text}</small>.

So I also have \Content\InlineEditors\TextEditor\medium-editor\medium-button.js and I access it in my \Content\InlineEditors\TextEditor\text-editor.js like so...

MediumButton = window['MediumButton'];

config.extensions['smallButton'] = new MediumButton({
  label: '<b>SM</b>',
  start: '<small>',
  end: '</small>',
});

The object you pass to window.kentico.pageBuilder.registerInlineEditor() has an init property which is a callback function.

When that function is called, all your JavaScript libraries should be loaded and ready to use - if you try to access them on the line before window.kentico.pageBuilder.registerInlineEditor() then they might not yet be available.

Sean,

While trying to add the extension, I seem to have broken my text widget beyond repair. Not sure what I did to break it as the js code is right out of the training / dancing goats site, but I keep getting the error that MediumEditor is not defined. Sounds like a pathing issue to the medium-editor.js file, but again, I followed the instructions in the Kentico training and it's still broken. Any thoughts? this is my text-editor.js code.

(function () {
window.kentico.pageBuilder.registerInlineEditor("text-editor", {
    init: function (options) {
        var editor = options.editor;
        var config = {
            toolbar: {
                buttons: [
                    "bold",
                    "italic",
                    "underline",
                    "orderedlist",
                    "unorderedlist",
                    "h1",
                    "h2",
                    "h3",
                    "customHtml"
                ]
            },
            imageDragging: false,
            extensions: {
                imageDragging: {}
            }
        };

        var mediumEditor = new MediumEditor(editor, config);

        mediumEditor.subscribe("editableInput", function () {
            var event = new CustomEvent("updateProperty", {
                detail: {
                    name: options.propertyName,
                    value: mediumEditor.getContent(),
                    refreshMarkup: false
                }
            });

            editor.dispatchEvent(event);
        });
    },

    destroy: function (options) {
        var mediumEditor = MediumEditor.getEditorFromElement(options.editor);
        if (mediumEditor) {
            mediumEditor.destroy();
        }
    }
});

})();

Jim,

In this DevNet Article it is mentioned that

If your project is in debug mode, make sure your resources do not have “.min” in their naming as they will not be bundled since they are considered release resources, not debug. You can either simply remove the “.min” from the naming, or use the non-minified resource while in development.

Does this apply to your issues?

Sean,

I was able to fix the text widget by basically removing it and then re-adding it. Not sure what exactly broke, but that piece is fixed. As for extending the Medium editor, do I put the extension code in this area in the text-editor.js file:

extensions:{
    <!-- Extension code here?
}

This is the part that is confusing me.

I added my smallButton by adding it to the config.toolbar.buttons array.

const config = {
    toolbar: {
      buttons: [
        'bold',
        'italic',
        'underline',
        'orderedlist',
        'unorderedlist',
        'h1',
        'h2',
        'h3',
        'anchor',
        'smallButton', // <-- new button
      ],
    },
    imageDragging: false,
    extensions: {
      imageDragging: {},
    },
  };

And that's all you had to do? Don't you have to somehow register the Medium editor extension, or is just having the java script file in the folder enough?

Jim,

Just adding the new file, \Content\InlineEditors\TextEditor\medium-editor\medium-button.js, is enough, since Kentico's PageBuilder utilities automatically create a bundle including all those files.

I registered my Button extension in one of my previous answers with the following code:

MediumButton = window['MediumButton'];

config.extensions['smallButton'] = new MediumButton({
  label: '<b>SM</b>',
  start: '<small>',
  end: '</small>',
});