Problems with setting HTML text

[Unknown]

Hello,

I have a problem with your RTE control. When I submit form, and the model validation fails, I can't set properly HTML into RTE. When I put text like this into RTE: 

"Message Test

• One
• Two
• Three"

after postback, when I put the text back into RTE with setHtml method, the RTE will not format properly, it displays something like this:

"Message Test<div><br></div><div><ul><li>One</li><li>Two</li><li>Three</li></ul></div>

How can I fix it?

I also have a request to you: can you add Razor model binding into your controls? It would be helpfull.

Greetings

Roman Suska

[Kaliswaran Shanmuga Sundaram]

Hi Roman,

 

Thanks for using Syncfusion products.

 

Query 1: “I have a problem with your RTE control. When I submit form, and the model validation fails. I also have a request to you: can you add Razor model binding into your controls? It would be helpful”

 

We have analyzed your requirement, and we can achieve your requirement by using RTEFor controls. The model validation can be done by setting “[ValidateInput(true)]” in the controller page and also our controls supports Razor model binding in the post callback as shown in the following code snippet.

 

Please refer the following code snippet to know how to use validation and Razor model binding.

[controller]

  public ActionResult Index()

        {

           return View(new RTE());

        }

 

        [HttpPost]

 

        [ValidateInput(true)]

 

        public ActionResult Index(RTE RTEmodel)

        {

            RTEmodel.text = "Message Test<div><br></div><div><ul><li>One</li><li>Two</li><li>Three</li></ul></div>";

            return View(RTEmodel);

 

        }

 

Query 2: “I can't set properly HTML into RTE. When I put text like this into RTE: 

"Message Test

• One
• Two
• Three"

after postback, when I put the text back into RTE with setHtml method, the RTE will not format properly, it displays something like this:

 

"Message Test<div><br></div><div><ul><li>One</li><li>Two</li><li>Three</li></ul></div>”

We can achieve your requirement by setting the RTE content text in the post callback using Razor model binding as shown in the above code snippet. For your convenience, we have prepared a simple sample based on your requirement. You can also download the attached sample from the following location.

Sample: Sample

If you still face any problems, please revert back us your application scenario with detailed replication procedure. This would be helpful for us to provide you the exact solution.

Please let us know if you have further queries.

Regards,

Kaliswaran S

[Unknown]

Hello,

your solution works, but there is another problem. I have a view model class, in there is another class and in this class I have a string property called "Content".  If I use the Razor RTEFor control, it renders a control thats id is the name of the property, in our case "Content". But every another razor controls would generate an id like "ViewModelClass_Content" and I need such an id for model binding. Can you fix it? And for now how can I change the id?

Greetings

Roman Suska

[Unknown]

Hello again,

I've found another problem in your sample. Everything is ok when you put into the RTE this string "Message Test<div><br></div><div><ul><li>One</li><li>Two</li><li>Three</li></ul></div>", but when I use for example style attribute, where I must use the " sign, for example like in this string: "<div style="text-align: center;">Message Test</div><div><br></div><div><ul><li>One</li><li>Two</li><li>Three</li></ul></div>", the Javascript console says "Uncaught SyntaxError: Unexpected identifier". Probably its because the " sign, the value attribute recognizes it like the end of string, and later there are syntax errors. How can I fix it?

Greetings

Roman Suska

[Unknown]

Hello again,

and I've found one another problem. When I get HTML text from database and put it into RTE, but on the view I don't even focus the RTE (of course I see that my text from database is in the RTE), when I post the form the databinder gets only a empty div element (<div></div>), although the text was in the RTE. This is case for example when I want to edit a articles topic without changing the content of the article. How can I fix it?

Greetings,

Roman Suska

[Kaliswaran Shanmuga Sundaram]

Hi Roman,

 

Thanks for using Syncfusion products.

 

Query 1: “I have a view model class, in there is another class and in this class I have a string property called "Content".  If I use the Razor RTEFor control, it renders a control thats id is the name of the property, in our case "Content". But every another razor controls would generate an id like "ViewModelClass_Content" and I need such an id for model binding. Can you fix it? And for now how can I change the id?”

 

We would like to inform you that, in our RTE component the id that we are specifying to the RTE will be set as the name of the RTE control element and also the control element id is generated as “ViewModelClass_Content” (“ViewModelClass refers to model classname and Content refers to name of the property”) only. So this will not affect your application and also we can able to get the RTE content in the post back.

 

Query  2: “The Javascript console says "Uncaught SyntaxError: Unexpected identifier" when we put the string "<div style="text-align: center;">Message Test</div><div><br></div><div><ul><li>One</li><li>Two</li><li>Three</li></ul></div>" into the RTE model. Probably its because the " sign, the value attribute recognizes it like the end of string, and later there are syntax errors. How can I fix it?”

 

We have analyzed your requirement, we would like to inform you that, we should not use “double quotes (“)” inside the string format. So we need to remove the double quotes present in the string and replace it by “single quote(‘)” as shown in the following snippet.

 

[cshtml]

 

 RTEmodel.Content = "<div style='text-align: center;'>Message Test</div><div><br></div><div><ul><li>One</li><li>Two</li><li>Three</li></ul></div>";

 

Query 3: “When I get HTML text from database and put it into RTE, but on the view I don't even focus the RTE (of course I see that my text from database is in the RTE), when I post the form the databinder gets only a empty div element (<div></div>), although the text was in the RTE. This is case for example when I want to edit a articles topic without changing the content of the article. How can I fix it?”

We have logged a task to achieve your requirement. A support incident to track the status of this requirement has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

Please let me know if you have any questions.

Regards,

Kaliswaran S

[Unknown]

Hello,

I analyzed what you wrote and I don't know why RTE has set invalid ids and names, now it works correctly. But there is another problem, in postback the form cannot catch the text that I wrote int the RTE. How can I fix this? I send you my sample project, the FormCollection in post action does not have Keys and Values for RTE controls. And there is the same problem in your sample that you send me.

Greetings.

Roman Suska

Attachment: TestWebApp_2ab167c8.zip

[Kasithangam C]

Hi Roman,

 

Sorry for the inconvenience caused. This is a known issue (“Can’t get the RTE content in form post & FormCollection in post action does not have Keys and Values”).We have logged a defect report for this issue. A support incident to track the status of this issue has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Please let us know if you have further concern.

Regards,

Kasithangam