I have load ckeditor as follows;
<!-- Scripts Admin -->
<script src="https://cdn.ckeditor.com/4.18.0/standard/ckeditor.js"></script>
<script src="'.base_url().'/admin/post/js/config.js"></script>
My config.js is as follows;
CKEDITOR.plugins.addExternal('ckeditor_add_class', '/admin/post/js/plugins/ckeditor_add_class/plugin.js');
CKEDITOR.plugins.addExternal('youtube', '/admin/post/js/plugins/youtube/plugin.js');
CKEDITOR.replace( 'post_body' ,{
filebrowserBrowseUrl : './filemanager/dialog.php?type=2&editor=ckeditor&fldr=',
filebrowserImageBrowseUrl : '../../filemanager/dialog.php?type=2&editor=ckeditor&fldr=&akey='+fmKey ,
extraPlugins: 'ckeditor_add_class,youtube',
});
While my filemanager works as expected, I cannot see ckeditor_add_class nor youtube. I do not see any errors on the console either. Not sure how to trouble shoot. Any ideas?
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>
How can I add jQuery code inside magento2 pages? For example I have a "Contact us" page. So I can edit the content inside contact us page by
Login to Admin panel
admin -> content -> Pages -> Contact us
I want to add some jQuery code.
So I write
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<script>
jQuery(function($){
$(".mybox").on("click", function(){
MY CODE *******
});
});
</script>
Here the problem is: I have to call <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
Otherwise it will not work. How can I solve this?
ie. How can i add jquery code in wysiwig editor
Magento 2 Uses Require js
Try using
<script>
require([
'jquery'
], function ($) {
$(".mybox").on("click", function () {
console.log('your code starts here');
console.log('your code ends here');
});
});
</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>
When I changed the page, the javascript did not execute.
index.html
$("#login").submit(function(e){
e.preventDefault();
$.mobile.changePage('main.html', {
reverse : false,
changeHash : false,
allowSamePageTransition : true,
reloadPage:true,
transition: "flow"
});
});
main.html
<script type="text/javascript">
$(document).ready(function () {
alert("Test");
});
</script>
The above javascript in main.html does not execute upon page change; can anyone explain why this is and how to fix it?
It's because change page will cause reload of pages and JQM is not getting the head section of recently loaded page in the DOM so any scripts in the <head> of the document will not be included.
Hence, you can put all of your JS into an external file and include it on each HTML page of the site that you required.
You can also place your JavaScript code inside the data-role="page" element and you JS will be included.
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.