I'm using tinymce jquery plugin and trying to access the api after initializing an instance of tinymce over a textarea.
In this example, I have a hide button, which when clicked on is supposed to hide the tinymce editor, but instead I get an error.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tinymce/jquery.tinymce.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div><textarea id="textEditor" class="tinymce" disabled="disabled"></textarea></div>
<input type ="button" id="hide" value="Hide tinymce">
</body>
</html>
$(document).ready(function(){
//textEditor
$("#textEditor")
.tinymce({
// Location of TinyMCE script
script_url : 'js/tinymce/tiny_mce.js',
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,",
theme_advanced_resizing : false
})
//... see below ...//
});
Update: I have 2 versions now, one that works by wrapping the $("#textEditor").tinymce().hide(); line in a click function, and one that gives me tinyMCE not defined with just the line itself.
Works:
$("#hide").click(function(){
$("#textEditor").tinymce().hide();
})
Doesn't work:
$("#textEditor").tinymce().hide(); //error tinyMCE is not defined
You could try
tinymce.get("textEditor").hide();
To verify if you are useing the correct tinymce id can alert all tinymce ids present at your page using
for (var i = 0; i < tinymce.editors.length; i++) {
alert(tinymce.editors[i].id);
}
EDIT:
This:
/** Option Block A error **/
// $("#textEditor").tinymce().hide(); //error tinyMCE is not defined
/** Option Block A error **/
does not work because it will get called before the tinymce editor is initialized. At this point there is no tinymce.get("textEditor").
I think that the path to your jquery plugin is not correct, because, the $.tinymce() method is provided there. If the file is not to be found, so is this method.
Also you should ensure that the path specified inside the *script_url* field is valid, as the plugin will try to load it on the fly.
Related
Thank you in advance
I am generating PDF with barryvdh/laravel-dompdf laravel library, i am able to add dynamic code to add in PDF but how to add javascript or jquery code
I tried like this
$pdf = PDF::loadView('invoice', compact('invoiceDetails'));
$pdf->setOptions(['enable_javascript', true])->setOptions(['javascript-delay', 13500])->save(public_path('invoice.pdf'));
invoice.blade.php looks like this (Just adding small code)
<h2 class="h2">Summary<span id="demo_span"></span> </h2>
<script type="text/javascript">
document.getElementById('demo_span').innerHTML ='THIS IS FOR AN EXAMPLE';
</script>
So the output would add text "THIS IS FOR AN EXAMPLE" where ID is demo_span
Firstly,
You have to set it in the package settings. Publish the config and change
it there.
To make it work, you need to use this JS bloc inside your PDF Blade :
<script type="text/javascript"> try { this.print(); } catch (e) { window.onload = window.print; } </script>
I want to implement ckeditor in laravel 5. I have already installed IvoryCKEditorBundle. but for implementation the docs says to register a new form field type called ckeditor that extends the textarea.
How should I do that?
You shouldn't need a bundle to use CKEditor - you can download the whole package of js files from the ckeditor website. Once you have it, place the folder containing all the downloaded files inside of your js folder
In your view you can now reference the ckeditor.js file:
{{ HTML::script('assets/js/plugins/ckeditor/ckeditor.js') }}
Next include a short ckeditor script, which can include custom configuration (edit config in the js/plugins/ckeditor folder):
<script type="text/javascript">
CKEDITOR.replace( 'messageArea',
{
customConfig : 'config.js',
toolbar : 'simple'
})
</script>
add .ckeditor as a class in your textarea:
<textarea id="messageArea" name="messageArea" rows="7" class="form-control ckeditor" placeholder="Write your message.."></textarea>
if you are posting your content using ajax, use something like this to get the textarea value:
var message = CKEDITOR.instances.messageArea.getData();
Follow this you can do it by 1 minute.
https://github.com/UniSharp/laravel-ckeditor
Thanks.
You can get resources from //cdn.ckeditor.com/4.14.0/standard/ckeditor.js
Download from here and put /public/ckeditor/
<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>
or If you want to use CDN then above code would be as follow:
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>
I'm trying to add language translations to my js files. So I've added this code to my view.html.php file in my component:
JText::script('COM_TEST_ENTER_LABEL');
If I look at the html source I now see this:
<script type="text/javascript">
(function() {
var strings = {"COM_TEST_ENTER_LABEL":"Enter a label"};
if (typeof Joomla == 'undefined') {
Joomla = {};
Joomla.JText = strings;
}
else {
Joomla.JText.load(strings);
}
})();
</script>
Now I try to add this to my js file:
alert(Joomla.JText._('COM_TEST_ENTER_LABEL'));
But I just get the error in firebug: TypeError: Joomla.JText._ is not a function
I'm wondering if it has something to do with jQuery. I have a bunch of jquery scripts in the code (view.html.php) that are added after:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
<script src="/components/com_test/js/cam.js" type="text/javascript"></script>
<script src="/js/jquery.noconflict.js" type="text/javascript"></script>
If you look at the html source this is before the JText::script stuff. Not sure if that is the cause? If it is I'm not sure what I can do about it? Joomla is ordering this by itself as my code tried to put it first.
Joomla.JText._ is a MooTools based function, so you'll need to allow MooTools to load in your template (if you're removing it, a lot of folks do).
You can access the strings using the following notation code.
alert(Joomla.JText.strings.COM_TEST_ENTER_LABEL);
This looks up the string COM_TEST_ENTER_LABEL in the string property of the JText property of the Joomla object.
Note that JText::_ is a PHP function.
Hope that helps..
I am new to Magento, in the checkout page. I have a text field and onblur of the text field will open a fancy box popup.
so in the checkout.phtml I placed a div to show their content in the pop up and set CSS attribute display as none.
In on blur I called a JS function and load the poup, for that I write the JS function - jQuery(".zipformcont").fancybox().trigger('click');
zipformcont is class name of div.
The issue is pop up is loading with an error - "The requested content cannot be loaded.
Please try again later."
Please help me to fix this. thanks.
Instead of using .trigger(); why not call fancybox like this:
jQuery.fancybox();
Fancybox triggers depending on the selector its connected to. Not the div its going to open.
jQuery(function(){
jQuery('#zipcode').blur(function(){
jQuery.fancybox({
"content":$('#formcontainer'),
"hideOnContentClick": true,
"hideOnOverlayClick": true
});
});
});
This should do it and get rid of the onblur attribute
I tried another option and it is working fine now.
Option
1) Created a div with CSS attribute - display as none
<div style="display:none"><a id="azcodelink" href="#zipcode_form">test</a></div>
2) In the textfield, Onblur called a JS function
<input type="text" name="namefld" id="namefld" value="" onblur="openpopup()" />
3) In the JS function, I trigered the click function of "azcodelink"
function openpopup() {
$("#azcodelink").trigger('click');
}
4) The id - zipcode_form - has the pop up content
<form id="zipcode_form">
...
</form>
Thats all..
Thanks for all your support.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
iframe : {
preload: false
}
});
});
</script>
<script type="text/javascript" src="http://dev.smartparcelbox.com/skin/frontend/rwd/default/js/jquery.fancybox.pack.js"></script
I am trying to implement an MVC3 DatePicker but having trouble. I have the following code:
<script type="text/javascript">
/// <reference path="jquery-1.5.1.js" />/// <reference path="jquery-ui-1.8.11.js" />
$(document).ready(function () { $('.date').datepicker({dateFormat: "dd/mm/yy"});});
</script>
<div>
#Html.TextBox("SRRDate", Model.SRRDate.ToString(), new { #class = "date" })
Start Date
</div>
However, I am getting an "Microsoft JScript runtime error: Object doesn't support this property or method" in jquery-1.5.1-min.js
Any ideas?
Are you referencing the jQuery script and a jQuery UI script that contains the datepicker plugin? Both script references should appear before your block of code.
The /// <reference path="jquery-1.5.1.js" /> lines are references for providing intellisense for JavaScript and should go in the relevant script i.e. in this case, this should reference the .vsdoc version of the jQuery script and go at the top of the jQuery script file.
In summary, the layout should be
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.11.js"></script>
<script type="text/javascript">
$(document).ready(function () { $('.date').datepicker({dateFormat: "dd/mm/yy"});});
</script>
#Russ....thanks for the assistance. I found the issue. I had a Telerik scritp Registrar which was included in the _Layout.cshtml. That was causing the error. I imagine the Telerik js files are old. When I look at their documentation, their code is using MVC2 style