title bar is missing in YUI

StackOverflow https://stackoverflow.com/questions/1022335

  •  06-07-2019
  •  | 
  •  

Question

I'm using the YUI Rich Text editor on my site. I'm loading it using the load javascript from Google. When I try to create a link (or any other action that creates an "settings" box, the title bar is missing, see picture here. You can see how it supposed to look over here at Yahoos site for YUI.

I'm using this code in the <head>-tag:

<!--Include YUI Loader: --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script> 
<!--Use YUI Loader to bring in your other dependencies: --> 
<script type="text/javascript"> 
// Instantiate and configure YUI Loader: 
(function() { 
    var loader = new YAHOO.util.YUILoader({ 
        base: "http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/", 
        require: ["editor"], 
        loadOptional: true, 
        combine: false, 
        filter: "MIN", 
        allowRollup: true, 
        onSuccess: function() { 
            var Editor = new YAHOO.widget.Editor('content', {
                height: '300px',
                width: '802px',
            dompath: true, //Turns on the bar at the bottom
            animate: true //Animates the opening, closing and moving of Editor windows   
            });
            Editor.render(); 
    }     
});    

// Load the files using the insert() method. 
loader.insert(); 
})(); 
</script>

And in my webpage:

<div class="sIFR-ignore yui-skin-sam">
    <textarea name="content" id="content" cols="50" rows="10">
    </textarea>
</div>
Was it helpful?

Solution

I got some help from David Glass, one of the developers of YUI RTE. The error I had make was actually an CSS thing, some where in my CSS-files it was a line that read "h3 {visibility: hidden;}" which made this error. Any how, thanks for your help!

OTHER TIPS

Try forcing your own title for the editor:

var Editor = new YAHOO.widget.Editor('content', {
                height: '300px',
                width: '802px',
            dompath: true, //Turns on the bar at the bottom
            animate: true //Animates the opening, closing and moving of Editor windows   
            });
            Editor._defaultToolbar.titlebar="<b>Use my title</b>";
            Editor.render();

I might be wrong here but, due to SOP (Same Origin Policy) I don't think JavaScript hosted in Google will be able to modify the DOM (unless you are google).

Try placing JavaScript in your web server and linking from there:

<script type="text/javascript" src="http://your.web.server.com/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top