Soft hyphens in HTML mode are invisible

[Артем]

Steps to reproduce:

1. Go to http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx;

2. Select the HTML view mode;

3. Add the ­(soft hyphen- ­) symbol in the text;

4. Select the Design mode;

5. Select the HTML view mode;

Actual result: ­ is not displayed.

Expected result: ­ is present and displayed.

[Orlin]

Hello Артем,

The Editor currently does not display the short hyphen but this can be rectified by creating a custom filter. (Learn more about creating custom content filters here: http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/managing-content/content-filters#custom-filter-example)

This is an example of a custom filter that would enable the editor to display soft hyphens:

<form id="form1" runat="server">
    <asp:ScriptManager runat="server"></asp:ScriptManager>

    <telerik:RadEditor runat="server" ID="Editor" ContentAreaMode="Div" OnClientLoad="onClientLoad">
        <Content>
            <div style="width: 35px;">text­text</div>
        </Content>
    </telerik:RadEditor>

</form>
<script>
    function onClientLoad(editor, args) {
        editor.get_filtersManager().add(new ShyFilter());
    }

    ShyFilter = function () {
        ShyFilter.initializeBase(this);
        this.set_isDom(false);
        this.set_enabled(true);
        this.set_name("RadEditor filter");
        this.set_description("RadEditor filter description");
    }

    ShyFilter.prototype =
    {
        getHtmlContent: function (content) {
            var newContent = content.replace("\u00AD", '­');
            return newContent;
        }
    }

    ShyFilter.registerClass('ShyFilter', Telerik.Web.UI.Editor.Filter);
</script>

I hope this helps.


Regards,
Orlin
Telerik

[Артем]

The sense of the HTML editor is to be able to see the HTML-markup as it is. Thus, IMHO, there shouldn't be applied any filters. Am I missing something? What is the point of applying the filters to text that should be shown without any changes?

[Orlin]

Hello,

The reason why the soft hyphen is not displayed by default in the HTML mode of RadEditor is that the content of the Editor is being populated by the innerHTML of the content area.

The element's InnerHTML property does not display the soft hyphen among other symbols (see this JS Bin for an example: https://jsbin.com/fozirilaca/edit?html,output ). You can also check the innerHTML specification: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML.

Because of this particular browser behavior we are providing the ability to add custom filters to help handle cases such as yours.

Let us know if you have further concerns about this.

Regards,

Orlin
Telerik by Progress