Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
James
560
Editor has source view showing below it always
posted

How do I turn off the source view so that it only shows the rich text and not the source area below it?

Thanks!

  • 23953
    Suggested Answer
    Offline posted

    Hi,

    In 12.1 igHtmlEditor doesn't have such an option, but it will be implemented in the future. You can accomplish this with workaround.

    Here is the code:

    Code Snippet
    1. <style type="text/css">
    2.     //here htmlEditor is the id of the Html editor
    3.     #htmlEditor_content {
    4.         padding-bottom: 7px;
    5.     }
    6. </style>
    7. $.ig.loader(function () {
    8.     //igHtmlEditor initialization
    9.     $("#htmlEditor").igHtmlEditor({
    10.         width: "100%"
    11.     });
    12.     // hide the view source button
    13.     $("#htmlEditor div[title='View Source']").hide();
    14.     // hide the DOM path area
    15.     $("#htmlEditor_domPathToolbar").hide();
    16. });

     

    #htmlEditor prefix in the selectors is the ID of the DOM element on which the igHtmlEditor is instantiated.

     

    Hope this helps,

    Martin Pavlov

    Infrgistics Inc.

     

  • 6279
    Suggested Answer
    posted

    Hi,

    This is actually a composite question, consisting of:

    1. How to hide the "View Source" button
    2. How to turn off (or hide) the source view next to that button

    Unfortunately there is no option which can be used to disable both of these so you need  locate the DOM elements of these parts of the igHTMLEditor and hide them from view in some way.

    Here's what I can offer:


    <body>
        <div id="editorDiv"></div>
        <script type="text/javascript">
    

            $(function () {
            $('#editorDiv').igHtmlEditor({
               rendered: function (ui, evt)
               {
                    $(".ui-igPathFinder", this).hide();
                    $(".ui-igbutton-viewsource", this).igButton("destroy");    
               }
            });
        });
    </script>
</body>
     

    I've also attached a sample HTML page to my reply which illustrates this solution.

    PS: Note that you can use other means of removing these elements from view - like using .hide() on the "View Source" button as well, but that's a rather personal choice. 


    Cheers,
    Borislav 

    t70908.zip