title bar is missing in YUI - javascript

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>

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!

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>

Related

CKEditor removing <html> and <body> tags

I using CKEditor, and if I click the Source button and paste HTML code like below :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" />
</head>
<body>
<p>test</p>
</body>
</html>
and click to Source again and then submit the form, the html , head and , body tags are removed and just stays <p>test</p>!
CKEditor configuration:
CKEDITOR.replace('content', {
extraPlugins: 'font,panelbutton,colorbutton,colordialog,justify,indentblock,aparat,buyLink',
autoGrow_onStartup: true,
enterMode: CKEDITOR.ENTER_BR,
FullPage : false,
allowedContent : true,
ProtectedTags : 'html|head|body'
});
Can you help me?
If you want to edit an entire HTML page, with <html>, <head> and <body> elements, you need to set the config.fullPage option to true:
CKEDITOR.replace( 'content', {
fullPage: true,
extraPlugins: 'font,panelbutton,colorbutton,colordialog,justify,indentblock,aparat,buyLink',
// You may want to disable content filtering because if you use full page mode, you probably
// want to freely enter any HTML content in source mode without any limitations.
allowedContent: true,
autoGrow_onStartup: true,
enterMode: CKEDITOR.ENTER_BR
} );
Pay attention to using proper case (fullPage is not FullPage) in your configuration. See also the following resources for more information:
Editing Complete HTML Pages sample
Full Page Editing with Document Properties Plugin
If you want to use the config.autoGrow_onStartup option, you need to include the Auto Grow plugin in your setup.
Last but not least, changing the Enter Mode setting to BR or DIV is not recommended. The default CKEDITOR.ENTER_P mode is fully supported by all editor features and plugins and is also the most correct one in terms of best practices for creating web content.
If you do it to control paragraph spacing, you should use stylesheets instead. Edit the contents.css file and set up a suitable margin value for <p> elements, for example:
p { margin: 0; }
Just add this code to prevent editor to remove 'HEAD/BODY/HTML' tags from your source code:-
CKEDITOR.replace( 'editor1', {
fullPage: true,
allowedContent: true,
autoGrow_onStartup: true,
enterMode: CKEDITOR.ENTER_BR
});

How to install these js libraries

I've got html site with little help of css.
I Never tried to use javascript, but I found one that called simplr-smoothscroll which requires jQuery Mouse Wheel Plugin.
When I downloaded both of them I got jquery.mousewheel.js and jquery.simplr.smoothscroll.js. When I searched google how to install them in my site, I found that I need to put them in the site directory and refer to them in the html like this:
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.simplr.smoothscroll.js"></script>
I did that and nothing happened. What should i do?
PS: there are some tips which i really don't understand in the github links of the project :)
You also need to include jQuery itself for those libraries to work.
You can download jQuery as well and put it there, on the top of the other two, or you can reference it from a CDN.
Most of the libraries require you to write some codes as well. You can read their documentation and see how you can use them.
simplr-smoothscroll for example, you need to add the code below to your page and put your configuration inside in order to get it to work.
<script>
$(function () {
$.srSmoothscroll({
// defaults
step: 55,
speed: 400,
ease: 'swing',
target: $('body'),
container: $(window)
})
})
</script>
First of all, you should put your jquery.mousewheel.js and jquery.simplr.smoothscroll.jsin js folder which is same hierarchical level with your index.html.
Second, did you add the JavaScript which is provided in your link?
$(function () {
$.srSmoothscroll({
// defaults
step: 55,
speed: 400,
ease: 'swing',
target: $('body'),
container: $(window)
})
})
you should add this between <script> ... </script>.
Include jquery js file first .here using cdn path you can download latest version and give accpording path
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
Then include mousewheel js
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js" type="text/javascript" charset="utf-8"></script>
Include mooth scroll js
Use Follwing code:
<script type="text/javascript" charset="utf-8">
$(function () {
$.srSmoothscroll()
})
</script>
You can set option also ,refering to document :
https://github.com/simov/simplr-smoothscroll

Flex Grid not rendering in Orchard CMS

I dont understand why Flex Grid is not rendering in my orchard cms project. same code is running in separate project but does not work here. below is the code for page. i have verified the path for scripts and style sheet and both are correct.
View
#{
Script.Include("navigation-admin.js");
Script.Require("jQuery");
Script.Require("jQueryUI");
Script.Require("flexgrid");
Style.Include("flexgrid.css");
Style.Include("flexgrid.pack.css");
}
<table id="jobListing" style="display: none"></table>
#using (Script.Foot()) {
<script type="text/javascript">
$(document).ready(function () {
$('#jobListing').flexigrid({
url: '/Member/List',
dataType: 'json',
colModel: [
{
display: 'Caption',
name: 'Caption',
width: 180,
sortable: true,
align: 'left'
}, {
display: 'Name',
name: 'Name',
width: 180,
sortable: true,
align: 'left'
}, ]
});
});
</script>
}
ResourceManifest
public void BuildManifests(ResourceManifestBuilder builder)
{
// Create and add a new manifest
var manifest = builder.Add();
manifest.DefineScript("flexgrid").SetUrl("flexigrid.pack.js", "flexigrid.js");
}
Currently showing
Should show layout like this (not data or columns)
Console Errors
I think you need to move your $('#jobListing').flexigrid({ .. }); to the document ready part.
Also, to give you some tips:
You should add your scripts and styles to the ResourceManifest
If your don't use the ResourceManifest, use Script.Include("PathToScript") instead
You should use Script.Require("jQuery") instead of requiring it yourself (it probably is injected twice)
I don't think there is a section called Scripts in Orchard. Use the following instead:
#using (Script.Foot()) {
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
[.....your code here.....]
});
//]]>
</script>
}
EDIT:
Looking at your console errors, I'd say you miss the web.config in the Scripts and Styles folder.
"By default, Orchard is setup to restrict folder permissions. This is usually overriden by adding a web.config to each folder as required (in this case, your scripts folder).
If you use the codegen module to generate your module, then this is done for you as part of the generation. If not, then you need to add the web.config yourself."
source: Orchard CMS : Javascript file returns 404 not found even though it exists

Tinymce emoticon bug, adding a slash

Iam using a Tinymce setup that only uses emoticons for a small reply section on my website.
The js plugin itself works fine and is visible within the editor but when it save to the database it shows it as:
<img src=\"/subdir/includes/tinymce/plugins/emoticons/img/smiley-kiss.gif\" alt=\"kiss\" />
The \ is nowhere to be found in my code, it starts and ends with it. Strangely is also does this with the alt of the image. These are the tinymce settings iam using:
<script type="text/javascript" src="includes/tinymce/tinymce.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
plugins: ["emoticons"],
toolbar1: "emoticons",
menubar : false,
height : 100,
forced_root_block : false,
relative_urls : false,
});
</script>
Does anyone have a clue where this might go wrong? I've searched for the backward slash in the plugin files of emoticons but cannot find anything related to this.
For those who have the same issue, this has todo with prepared statements, normal inserts using mysqli give no such errors. before you enter the textarea data from ckeditor into the database using prepared statements you should use striplashes!

Issue with cursor position in Firefox

I am using tinyMCE as a plugin in my ASP.NET MVC4 web application. I am also using SignalR to establish an open connection between the server and the clients. What I am trying to do is a real-time editor similar to Google Docs.
Until now I managed to find a way to write in an editor in one browser and have it displayed in another open document in another browser. I previously had a problem with the cursor position since when I was using the setContent() method in tinyMCE, the cursor was being put to the front and therefore the output was reversed.
This was solved by these two statements:
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
However now the problem I have is that with Chrome the output is as I wish for it to be i.e. writing with the cursor at the back however when I write from a Firefox browser, the space button is ignored, when I press space, the cursor goes back.
Is there a particular reason why this happened? Also, there seems to be a speed issue with the connection i.e when I type fast the latest content (1 or 2 letters) are not submitted.
This is all the code I have regarding this problem:
#{
ViewBag.Title = "- Editor";
ViewBag.ContentStyle = "/Content/CSS/editor.css";
}
<script src="/Scripts/jquery-1.6.4.min.js" ></script>
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript" src="~/Content/tinyMCE/tiny_mce.js" ></script>
<script type="text/javascript" src="~/Scripts/EditorHandler.js"></script>
<script type="text/javascript">
$(function () {
tinyMCE.init({
mode: "textareas",
theme: "advanced",
plugins: "emotions,spellchecker,advhr,insertdatetime,preview",
// Theme options - button# indicated the row# only
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
theme_advanced_buttons2: "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
setup: function (ed) {
ed.onKeyUp.add(function (ed, e) {
var chat = $.connection.editorHub;
chat.client.broadcastMessage = function (message) {
tinyMCE.activeEditor.setContent(message);
ed.selection.select(ed.getBody(), true);
ed.selection.collapse(false);
tinyMCE.activeEditor.focus();
};
$.connection.hub.start().done(function () {
var text = tinyMCE.activeEditor.getContent();
chat.server.send(text);
});
});
}
});
});
</script>
<form method="post" action="somepage">
<textarea id="editor" name="content" cols="100" rows="30"></textarea>
</form>
Looks like you might want to check out the possibility to get a tinymce bookmark.
There are html bookmarks which are implemented using hidden spans with a certain class.
And there are non-html bookmarks - i would use those.
// gets you a non-html bookmark which you can transfer to another server if need be
var bookmark = editor.selection.getBookmark(2, true);
editor.setContent(content);
editor.selection.moveToBookmark(bookmark);

Categories

Resources