Formatting a span within a text selection/range

[Ruairi]

Hi,

I'm having some problems when I try to format text when there is a span in the middle of the selected text. Below I've shown the before, after and expected HTML when I try to change the change the font size, for example, by highlighting a word on either side of my span as well as the span itself.

BEFORE:

<p>one two <span k-immutable="6qxG2g5C1I"></span> three four</p>

 

AFTER:

<p>one <span style="font-size:72pt;">two </span><span k-immutable="6qxG2g5C1I"></span><span style="font-size:72pt;"> three</span> four</p>

 

EXPECTED:

<p>one <span style="font-size:72pt;">two <span k-immutable="6qxG2g5C1I"></span> three</span> four</p>

 

We use the <span k-immutable="6qxG2g5C1I"> as a merge field so my question is this: is there any way to catch when font is changed through the toolbar (font-size, font-alignment, font-change, font-bold,etc) or is there a way to better wrap around the middle span so that it doesn't ignore the changes I've made?

 

[Dimitar]

Hi Tyler,

In general, the k-immutable attribute is used as a marker for the Kendo UI Editor's immutable elements. It should be dynamically replaced and should not be actually rendered. Thus, could you please elaborate a bit more on the exact scenario, as I will need additional information in order to evaluate the possible approaches to tackle the issue? Here are a couple of questions that would greatly help me in grasping the extent of the requirements:

  -  How is the Kendo Editor configured? Is the immutables option set to true?
  -  How is the k-immutable marker rendered?

It would also be of great help if you could provide an example solution that demonstrates the issue, along with some sample steps that I could follow. In this way, I will be able to examine the exact scenario and evaluate the possible options.

Concerning detecting tool activation, the Editor's execute event can be used as follows:

.Events(e => e.Execute("onExecute"))

<script>
  function onExecute(e) {
    var commandName = e.name;

    if (commandName == "bold") {
      // ...
    }
  }
</script>

I am looking forward to hearing from you.

Regards,
Dimitar
Progress Telerik

[Ruairi]

Hi Dimitar,

I've created an example for you to have a look at here

In my previous post the immutable option was set to true, however I noticed that when I set this to false on the demo I can edit the merge fields font size however I get a different outcome from when I set it to false in my MVC project. I have installed the latest Kendo version for my MVC project to make sure this wasn't the problem but unfortunately it wasn't resolved.

Steps on how to recreate my problem:

In the demo I write a word then click the cog icon which inserts HTML into the editor and then I write another word. I then highlight the two words I entered and the merge field in the middle and change the font size.

When i click on the View HTML button I do get the expected outcome seen below:

Expected Outcome:

<span style="font-size:x-large;">test </span><span id="7fc51847-3d5a-9eb1-8e10-10f1124e1396" contenteditable="false" class="MergeField EditorMergeField" data-name="PrintViewDate" data-iscollection="false" data-path="System.PrintViewDate" title="" style="font-size:x-large;">PrintViewDate</span><span style="font-size:x-large;"> word</span>

 

As stated, in the demo this works however in my MVC project the HTML re-formats itself to this below:

<span style="font-size:x-large;">test PrintViewDate text</span>

 

I'm not sure how to demo this to you through Dojo? However if we can get the same functionality on my demo as my MVC project then this should be all that I need. Is there anyway on your side to test this, I simply dropped my code into a test page to recreate. I'm running version 4 of MVC.

Hopefully this all makes sense?

Many Thanks

[Dimitar]

Hi Tyler,

I am attaching an ASP.NET MVC solution that utilizes the exact same setup from the provided Dojo example with the Editor HtmlHelper. With it, by following the exact steps provided, the Editor content is formatted as shown in the expected code snippet. 

Although the example uses MVC 5, this should not be causing the Editor to behave differently. Taking this into consideration, could you test the example and let me know if everything works correctly on your end?

Regards,
Dimitar
Progress Telerik