I am developing with CakePHP and want to modify height of CKEditor generated with cake html helper, because I need to have two editors inside one page, with different height.
How I can do this with css?
if I remember that you can do when you define ckeditor js in your view e.g.
ed = CKEDITOR.replace("textarea",
{
height:"291", width:"400"
});
check this documentation:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.width
http://cksource.com/forums/viewtopic.php?t=13810
Regards.
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'350px'});
</script>
or
<script type="text/javascript">
CKEDITOR.replace( 'texarea', height:'350px',autoGrow_minHeight:'100%'});
</script>
Related
I created a ViewComponent which display a Table that require some plugin for enable specific functionalities. Inside the ViewComponent I tried to create a specific section:
#section DataTableScripts{
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
unfortunately I discovered that a ViewComponent cannot load a #section.
So I tried to include the script directly in the ViewComponent, but the problem is that the scripts are loaded before of JQuery which is loaded inside the _Layout, specifically:
ViewComponent
<script src="~/js/JQuery/jquery.dataTables.js"></script>
<script src="~/js/JQuery/dataTables.buttons.min.js"></script>
<script src="~/js/JQuery/dataTables.keyTable.min.js"></script>
<script src="~/js/JQuery/dataTables.responsive.min.js"></script>
<script src="~/js/JQuery/dataTables.select.min.js"></script>
<script src="~/js/JQuery/dataTables.bootstrap4.js"></script>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
Layout
<script src="~/js/jquery.min.js"></script>
so in this case I'll get:
jQuery is not defined
How can I manage this situation?
Simply set the Layout for your ViewComponent .
#{
Layout = "/Views/Shared/_Layout.cshtml";
}
#section DataTableScripts{
<div>It works </div>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
Here's the screenshot that works :
[Edit]
This approach does not seems a good way to do that . As #Kirk Larkin says , this will make the Layout render twice . Another patch is to write a new RefinedLayout.cshtml and set the Layout of ViewComponent as the RefinedLayout :
#{
Layout = "_RefinedLayout.cshtml";
}
#section DataTableScripts{
<div>It works </div>
<script src="~/js/JQuery/jquery.dataTables.js"></script>
}
For more information , refer workaround by MortenMeisler
You are using<script src="~/js/JQuery/jquery.dataTables.js"></script> twice. Just keep it once.
Specifying another layout for viewcomponents with scripts will duplicate scripts. And #section is just ignored during rendering.
So I replaced jquery document ready with plain javascript domcontentloaded and any jquery can be written inside domcontentloaded. Not a permanent good approach but works for me.
<script>
document.addEventListener('DOMContentLoaded', function (event) {
console.log($ === jQuery)
});
</script>
Hello how do i implement the sidebar from semantic ui? I would like to use the first example on the list.
http://semantic-ui.com/modules/sidebar.html#/definition
I tried copy-pasting the whole div section and putting it on my html
For the javascript(? not really sure), the
$('.left.demo.sidebar')
.sidebar('toggle')
;
i tried putting it on
button onclick , and
function then using href to call
but sidebar is not showing.. what am i doing wrong
You have to include the jQuery library in the <head></head> section of your page:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
And the semantic.js file:
<script language="javascript" src="[your path here]/semantic.js"></script>
Which you have to download from:
http://semantic-ui.com/
(It's located inside the folder dist. Copy that file in the desire location and populate src with the right path)
BETWEEN <HEAD></HEAD>:
<script language="javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script language="javascript" src="[your path here]/semantic.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.left.demo.sidebar').sidebar('toggle');
});
</script>
When you add jQuery to your project you can trigger your sidebar by adding this code to your .js file:
$('.element.to.trigger.sidebar').on('click', function () {
$('.left.demo.sidebar')
.sidebar('toggle');
});
Example
-- begin: index.html --
<!doctype html>
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<iframe src="iframe.html" id="innerFrame">blah</iframe>
</body>
</html>
-- end: index.html --
-- begin: iframe.html --
<!doctype html>
<html>
<head>
<title>iFrame</title>
</head>
<body>
<form>
<input id="inputField" type="text" value="this is text." />
</form>
<script type="text/javascript">
$('inputField').set('value', 'updated text');
</script>
</body>
</html>
-- end: iframe.html --
Currently, $('inputField').set('value', 'updated text'); doesn't work :-\
Yes, assuming the iframe and it's parent window are on the same domain, it is possible to load the Mootools scripts once in the parent, and then programmatically extend the IFrame's window and document, instead of re-loading the script within the iframe. It is not the default behavior, as you've noticed, and probably for good reason - I'm guessing most people will tell you it's more trouble than it's worth.
In fact, the IFrame shortcut element constructor used to do that exact thing, but it was ultimately considered to be too much of a hack and not worth the effort to maintain as part of the framework long-term, so they dropped it - this why the documentation for IFrame is kind of odd ("IFrame Method: constructor, Creates an IFrame HTML Element and extends its window and document with MooTools.", and then right below after the example, "Notes: An IFrame's window and document will not be extended with MooTools methods.").
So, the most straightforward way to have $(..) useable in your iframe is just to have the iframe include the Mootools script. If you're feeling fancy, you could also have your parent window inject the Mootools script into the iframe's HEAD, for example:
index.html
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<iframe id="innerFrame"></iframe>
<script type="text/javascript">
var mooFrame = new IFrame("innerFrame", {
src:"iframe.html",
events: {
load: function(){
var mooEl = new Element('script', {
type: 'text/javascript',
src: "mootools.js",
events: {
load: function(){
//passed to mooFrame by the iframe
this.pageReady();
}.bind(this)
}
});
this.contentDocument.head.appendChild(mooEl);
}
}
});
</script>
</body>
</html>
iframe.html
<html>
<head>
<title>Iframe</title>
</head>
<body>
<div id="iframe_element"></div>
<script type="text/javascript">
parent.mooFrame.pageReady = function(){
/* Put your iframe javascript in here */
$('iframe_element').set("text", "Fancy!");
};
</script>
</body>
</html>
Update (July 29th): I was fooling around with this idea again and realized there's a fairly obvious though pretty ham-fisted way to transfer Mootools functionality defined in the parent index.html window to the inner iframe: simply include the entire Mootools source into the parent window (remove the src attribute from the existing script element and add an id), and copy that newly enormous element's text into the new script node that gets injected into the head of the iframe. Inlining the Mootools code in the script element in this fashion gives you access to the contents of the element, which you don't get when the javascript is loaded from an external file via the src attribute.
Of course, this..concept is only relevant if the parent window and iframe are on the same-domain, (same as the code provided above).
The obvious drawback is that the Mootools source isn't cached. I'm not sure if there's a use-case where this method would be more optimal than just including mootools in both parent and iframe. In any event, change the index.html file to this:
<html>
<head>
<title>Parent</title>
<script type="text/javascript" id="mootools_js">
**COPY-PASTE THE CONTENTS OF mootools-core.js HERE**
</script>
</head>
<body>
<iframe id="innerFrame"></iframe>
<script type="text/javascript">
var mooFrame = new IFrame("innerFrame", {
src:"iframe.html",
events: {
load: function(){
var mooEl = new Element('script', {
id: 'mootools_iframe_core',
type: 'text/javascript',
html: $('mootools_js').innerHTML
});
this.contentDocument.head.appendChild(mooEl);
this.pageReady();
}
}
});
</script>
</body>
</html>
My previous answer offered two alternative ways of doing the task in question ("load Mootools in a parent frame and then re-use it in iframes"). The first method didn't "re-use" the Mootools functionality loaded into the parent frame, but was rather an alternative way to load the script in the inner iframe. The second method was just a hacky way of copying over the script by putting the entire mootools core source inline in a script element and then copying that element's content into a script element in the iframe's head (hardly optimal).
This following method does programatically extend the window and document objects of the inner iframe. Again, it is assumed that both the parent page and the iframe are on the same domain.
In my (brief and simple) testing, loading the source in both parent and iframe resulted in 72.1 KB transferred at around 130ms (to finish loading both the parent and iframe pages), while the page that loaded the source and then extended the iframe was 36.8 KB and took around 85ms to load both parent and iframe. (that's with gzip on the server...file size of uncompressed/unminified core source is around 134 kb).
For this method a few trivial additions/edits are made to the mootools core source. Download an uncompressed version of mootools-core-1.3.2.js, and rename it to 'mootools-core-init.js' (or whatever). The following steps assume that you checked all boxes on the core builder page except 'Include Compatibility'.
Add this to the top of the 'mootools-core-init.js' file (above the first self-calling anonymous function):
var initMootoolsCore = function(){
var window = this;
var document = this.document;
Add this to the very bottom of the core js file:
};
initMootoolsCore.call(window);
Do the following find/replace tasks:
1
Find:})();
Replace: }).call(this);
2
Find: if (Browser.Element) Element.prototype = Browser.Element.prototype;
Replace: if (this.Browser.Element) Element.prototype = this.Browser.Element.prototype;
3
Find: var IFrame = new Type
Replace: var IFrame = this.IFrame = new Type
4
Find: var Cookie = new Class
Replace: var Cookie = this.Cookie = new Class
(download | compressed version)
In your parent index.html file, put the following script element in the head
<script type="text/javascript" src="mootools-core-init.js"></script>
Finally, in your iframe.html file, put the following inline script element in the head to extend the iframe's window and document (it must be before any included or inline scripts that need to use Mootools):
<script type="text/javascript">parent.initMootoolsCore.call(window);</script>
No, the iframe.html is an independent page. It does not "inherit" anything from the previous page.
I'm using DNN 5.4 with the default google api jquery reference:
I have confirmed that jquery.min.js is loading. I don't know if there's other jQuery (other than the plugin) that needs to be loaded.
I'm utilizing the Google Code jQuery Textbox Watermark Plugin (Link)
Web Dev Toolbar & Firebug suggest that both jQuery and the Watermark Plugin are loading. This code is sitting near the top of my skin .ascs:
<script type="text/javascript" src="/js/watermark/jquery.watermark.min.js"></script>
The following code works (when the inputs are wrapped in form tags) in basic html document. However, when placed inside either a DNN skin or DNN module, it fails to work and generates a javascript here.
<script language="javascript" type="text/javascript">
(function ($) {
$(document).ready(function () {
jQuery("#xsearch").watermark("Leave blank for USA");
})
})(jQuery);
</script>
SearchString: <input type="text" id="xsearch" name="xsearch" />
<input type="button" value="search" id="xsubmit" name="xsubmit" />
The Error (FireBug):
jQuery("#xsearch").watermark is not a function
[Break on this error] jQuery("#xsearch").watermark("Leave blank for USA");
This alternate code produces the same error:
<script language="javascript" type="text/javascript">
jQuery.noConflict();
jQuery(function () {
jQuery("#xsearch").watermark("Leave blank for USA");
jQuery("#xsubmit").click(
function () {
jQuery("#xsearch")[0].focus();
}
);
});
</script>
And finally, the same error is produced when I replace jQuery with $
It feels like a conflict of some sort, but I'm lost on what to do next.
Thanks in advance for your time
I noticed this is because :
<script type="text/javascript" src="/js/watermark/jquery.watermark.min.js">
should be
<script type="text/javascript" src="js/watermark/jquery.watermark.min.js">
If you are having js folder in your skin root.
You can see FireBug's net tab to make sure your script reference is loading properly. I'm judging this because I've done lots of dnn development and the link you referenced will become
http://www.mydomain.com/tabId/80/js/watermark/jquery.watermark.min.js when http://www.mydomain.com/tabId/80/Default.aspx is served
I'm facing a problem with TinyMCE. When I enter a style tag in the HTML editor of TinyMCE, it removes the tags when I click update.
<style type="text/css">
.newclasss { color:#c9c9c9; }
</style>
My valid elements are follows:
<script type="text/javascript">
var valid_elms = "hr[class|width|size|noshade]";
valid_elms += "span[class|align|style],";
valid_elms += "font[face|size|color|style],";
valid_elms += "img[href|src|name|title|onclick|align|alt|title|";
valid_elms += "width|height|vspace|hspace],";
valid_elms += "iframe[id|class|width|size|noshade|src|height|";
valid_elms += "frameborder|border|marginwidth|marginheight|";
valid_elms += "target|scrolling|allowtransparency],style";
extended_valid_elements: valid_elms
</script>
Can anyone help please??
Since style tags are not valid XHTML, TinyMCE disabled the ability to add them outside of the tags.
You have to add style tags to the valid children configuration
valid_children : "+body[style]"
Edit: This solution applies to version 3.4.2
Source
"hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],img[href|src|name|title|onclick|align|alt|title|width|height|vspace|hspace],iframe[id|class|width|size|noshade|src|height|frameborder|border|marginwidth|marginheight|target|scrolling|allowtransparency],style[type]"
Let me know how that works for you
If you put tinyMCE in fullpage mode, you can put styles in the <head>
<script type="text/javascript">
tinyMCE.init({
plugins : "fullpage",
});
</script>
It's a bit hacky but I'm using TinyMCE 4 and was in a pinch, so I added a <script> tag in the TinyMCE editor's Source Code view and used jQuery to change the styles.
<script>$("#signup").css("font-weight", "bold");</script>
This assumes that TinyMCE has been setup not to disallow script tags, and your page already has jQuery included in it like mine did, if not you could use standard javascript to change styles.
For me, I need to do the following in TinyMCE 4.5.7:
tinyMCE.schema.addValidChildren("body[style]")