locked
Tiny MCE and CKEditor are still displaying the html tags when the page is rendered no matter what i have tried. Is there a way to stop that? RRS feed

  • Question

  • User1561468125 posted

    I am using Tiny MCE and CKEditor to edit a blog content. I have 1 column for for the content of the blog called 'Content'. I query the database and it returns the result for 'Content'. It returns it as a one block of text and i want to be able to format it, break it down in paragraphs, ordered/unordered lists and add images for the blog post. It looks better with image. I have having two issues:

    1 - I use the Tiny MCE and CKeditor to format the result i got from the database, but when it renders, it displays the html tags and doesn't format it.It is still one block of text. I can remove the tags, but that doesn't help with the formattng. It is one block of test 

    2 -  I want to also add image /screenshots in the blog post to make it more attractive, however, I can't not find a way to the images. Instead of adding the image , the text is saved in the database as an html tab as followed: <img src="images/Logo.png">

    I have also tried other text editors, but no luck. Is there a way to solve these two issues? Is that an issue with the browsers? I have tried multiple ones, but no real answer. I am using asp.NET Web Pages with Razor Syntax.

    I have attached my code below called EditPost.cshtml. This is the file i use to edit the post using TinyCME and CKEditor. 

    @{
        var Title = "";
        var Content = "";
        
        var PostID = "";
    
        if (!IsPost)
        {
            if (!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].IsInt())
            {
                PostID = Request.QueryString["ID"];
                var db = Database.Open("SQLServerConnectionString");
                var dbCommand = "SELECT * FROM Post where PostID =@0";
                var row = db.QuerySingle(dbCommand, PostID);
    
                if (row != null)
                {
                    Title = row.Title;
                    Content = row.Content;
                }
                else
                {
                    Validation.AddFormError("No Post was selected.");
                }
            }
            else
            {
                Validation.AddFormError("No Post was selected.");
            }
        }
    
        if (IsPost)
        {
            //Validation.RequireField("Title", "You must enter a title");
            //Validation.RequireField("Content", "You haven't changed anything");
            //Validation.RequireField("PostID", "No post ID was submitted!");
    
            Title = Request.Form["Title"];
            
            Content = Request.Unvalidated("Content");
            PostID = Request.Form["PostID"];
    
            if (Validation.IsValid())
            {
                var db = Database.Open("SQLServerConnectionString");
                var updateCommand = "UPDATE Post SET Title=@0, Content=@1 WHERE PostID=@2";
                db.Execute(updateCommand, Title, Content, PostID);
                Response.Redirect("~/Account/Manage");
            }
        }
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Edit a Post</title>
        <script src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script src="~/Scripts/jquery-ui-1.10.3.js"></script>
    
        <script type="text/javascript" src="~/tinymce/js/tinymce/tinymce.min.js"></script>
    
        <script type="text/javascript">
    
            tinymce.init({
                selector: '#Content',
                height: 500,
                plugins: 'code',
                toolbar: 'code',
                menubar: false,
                code_dialog_height: 300,
                code_dialog_width: 350,
                plugins: 'paste',
                forced_root_block: '',
                paste_auto_cleanup_on_paste: true,
                paste_remove_styles: true,
                paste_remove_styles_if_webkit: true,
                paste_strip_class_attributes: true,
                valid_elements: "strong/b,em/i,font", -- Remove all the other tags except the one listed
                toolbar: 'bullist, numlist',
                plugins: 'advlist',
                advlist_bullet_styles: 'square',
                advlist_number_styles: 'lower-alpha,lower-roman,upper-alpha,upper-roman'
                
                
            });
    
        </script>
    
    
        <style>
            .validation-summary-errors {
                border: 2px dashed red;
                color: red;
                font-weight: bold;
                margin: 12px;
            }
        </style>
    </head>
    
    <body>
        <h1>Edit a Post</h1>
        @Html.ValidationSummary()
        <form method="post">
            <fieldset>
                <legend>Post Information</legend>
    
                <p>
                    <label for="title">Title:</label>
                    <input type="text" name="Title" value="@Title" />
                </p>
    
                <p>
                    <label for="Content">Content:</label>
                    <input type="text" id="Content" name="Content" value="@Content" />
                    <!-- <textarea name="Content" id="Content" rows="10" cols="80" @Validation.For("Content")>Hello</textarea>-->
                </p>
    
                <input type="hidden" name="PostID" value="@PostID" />
    
                <p><input type="submit" name="buttonSubmit" value="Submit Changes" /></p>
            </fieldset>
        </form>
        <p><a href="~/Account/Manage">Return to the main control panel</a></p>
    
       
    </body>
    </html>

    Sunday, December 20, 2015 9:48 AM

Answers

  • User1124521738 posted

    It's a security feature to prevent direct output of html text to the text body, you have to explicitly tell the razor engine that the string is already html and that you want that info as specified to output.

    with mvc/razor you will have to wrap the output for your page (not the edit page, but your post page) with @Html.Raw(Model.Content) to have your markup be honored, you can also do @(new MvcHtmlString(Model.Content)) as well.

    http://stackoverflow.com/questions/10331019/difference-between-mvchtmlstring-create-and-html-raw

    http://stackoverflow.com/questions/4281424/writing-outputting-html-strings-unescaped

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 21, 2015 3:17 PM
  • User1561468125 posted

    Thanks for the answer. I was able to solve it by  updating the main page (not the edit page) . 

    I added the following in the main page:

    @Html.Raw(row.Content.ToString()) and that works great.

    I also found the following page. Although i am using TinyMCE, not umbraco, the same format applies.

    https://our.umbraco.org/forum/developers/razor/18242-Returning-HTML-from-RichText-Editor

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 23, 2015 1:31 AM

All replies

  • User-166373564 posted

    Hi,

    Before TinyMCE loads, you specify which plugins to load, ie:

    tinyMCE.init({

      // General options

      plugins: [

        'advlist autolink lists link image charmap print preview anchor',

        'searchreplace visualblocks code fullscreen',

        'insertdatetime media table contextmenu paste code'

      ]

    ...

    Simply remove the fullpage plugin from the list.

    Please see this sample.

    https://www.tinymce.com/docs/demo/basic-example/#liveexample

    About Content Formatting

    You could refer to https://www.tinymce.com/docs/configure/content-formatting/

    Best regards,

    Angie

    Monday, December 21, 2015 11:46 AM
  • User1124521738 posted

    It's a security feature to prevent direct output of html text to the text body, you have to explicitly tell the razor engine that the string is already html and that you want that info as specified to output.

    with mvc/razor you will have to wrap the output for your page (not the edit page, but your post page) with @Html.Raw(Model.Content) to have your markup be honored, you can also do @(new MvcHtmlString(Model.Content)) as well.

    http://stackoverflow.com/questions/10331019/difference-between-mvchtmlstring-create-and-html-raw

    http://stackoverflow.com/questions/4281424/writing-outputting-html-strings-unescaped

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 21, 2015 3:17 PM
  • User1561468125 posted

    Thanks for the answer. I was able to solve it by  updating the main page (not the edit page) . 

    I added the following in the main page:

    @Html.Raw(row.Content.ToString()) and that works great.

    I also found the following page. Although i am using TinyMCE, not umbraco, the same format applies.

    https://our.umbraco.org/forum/developers/razor/18242-Returning-HTML-from-RichText-Editor

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, December 23, 2015 1:31 AM