I am having trouble adding ckeditor inside my ejs file. I am importing it as a script file from my public folder
Head of ejs file
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
<!-- Editor -->
<script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
I am certain that it is looking at the right path as I don't have the console errors like I once did. Then in a textarea I used the class of editor just as a I saw in the docs but, when I go to view the editor its still just a textarea with its bootstrap classes
Textarea I want to change
<div class="form-group">
<label for=""></label>
<textarea type="text" class="form-control mb-2 editor" placeholder="Your message" name="message"></textarea>
</div>
is there something I am doing wrong or does ckeditor not work with ejs?
Try initializing with JS method on load.
CKEDITOR.replace('ID_OF_TEXTAREA');
I know that maybe too late but may it helps others in future.
So, ensuring that the path to ckeditor.js is correct you have just to add this script
<script type="text/javascript"> CKEDITOR.replace( "name of text area");</script>
in case of the question above "message" is the name of textarea so set
<script type="text/javascript"> CKEDITOR.replace( "message");</script>
Related
I want to use this script in return phase in react which this script came from https://www.omise.co/card-js-api
<script type="text/javascript" src="https://cdn.omise.co/card.js"
data-key="YOUR_PUBLIC_KEY"
data-image="PATH_TO_LOGO_IMAGE"
data-frame-label="Merchant site name"
data-button-label="Pay now"
data-submit-label="Submit"
data-location="yes"
data-amount="10025"
data-currency="thb"
/>
but it seems not working at all
Use template strings with React
var script = `<script type="text/javascript" src="https://cdn.omise.co/card.js"
data-key="YOUR_PUBLIC_KEY"
data-image="PATH_TO_LOGO_IMAGE"
data-frame-label="Merchant site name"
data-button-label="Pay now"
data-submit-label="Submit"
data-location="yes"
data-amount="10025"
data-currency="thb"></script>`;
document.body.appendChild(script);
Javascript must be inserted in betweeen the <script> and </script> tag.
<script type="text/javascript" src="https://cdn.omise.co/card.js"
data-key="YOUR_PUBLIC_KEY"
data-image="PATH_TO_LOGO_IMAGE"
data-frame-label="Merchant site name"
data-button-label="Pay now"
data-submit-label="Submit"
data-location="yes"
data-amount="10025"
data-currency="thb"
>
</script>
Self closing tag is not applicable as far as I am concerned.
This should give you a good reference - Why don't self-closing script tags work?
At http://emberjs.com/ I am try to get the auto-updating and handlebars templates example working, it is the first one. When I run it, my html page look like:
Name: {{input type="text" value=name placeholder="Enter your name"}}
My name is {{name}} and I want to learn Ember!
It is just plain text, it is not like how it looks on the ember website.
This means I am not loading my javascript files right? Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>EmberDemo</title>
<script src="./js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="./js/handlebars-1.1.2.js" type="text/javascript"></script>
<script src="./js/ember-1.5.1.js" type="text/javascript"></script>
<script src="./js/app.js" type="text/javascript"></script>
</head>
<body>
<div>
<label>Name:</label>
{{input type="text" value=name placeholder="Enter your name"}}
</div>
<div class="text">
<h1>My name is {{name}} and I want to learn Ember!</h1>
</div>
</body>
</html>
Here is my path in Eclipse for where my javascript files live. /EmberQuickstart/src/main/webapp/js/
My path for my index.html is /EmberQuickstart/src/main/webapp/index.html
Can anybody tell me what is wrong? I am really stumped. I should not need a webserver and a war file to get javascript to work right?
Update
Malik I changed my paths to what you said and I appear to be on the right track, but it is still not working.
Here is my console output in Chrome's developer tools:
DEBUG: ------------------------------- ember-1.5.1.js:3521
DEBUG: Ember : 1.5.1 ember-1.5.1.js:3521
DEBUG: Handlebars : 1.1.2 ember-1.5.1.js:3521
DEBUG: jQuery : 1.10.2 ember-1.5.1.js:3521
DEBUG: ------------------------------- ember-1.5.1.js:3521
Ember Debugger Active
Remove the ./ part in your src="".
You should write it as:
src="js/jQuery "
I figured it out. I am 100% new to handlebars and ember so I did not realize that I need a tag to surround my topmost . Now it works!
I recommend to use Ember-Cli to start is easy and super complete Ember-Cli
I'm using Bottle to make a simple web form and want to set the Selectize.js jquery plugin to a field so the user can set several values to that same field.
Inside my form tag I have the following code:
<label>
<span>Links :</span>
<input type="text" id="input-tags" name="links">
</label>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
And the following .js and .css inside the head tag:
<link href="/selectize.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/selectize.js"></script>
To deal with static files I have the following route in my .py script:
#get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='static/js')
#get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='static/css')
My route to deal with static files seems to be working properly 'cause I've tested it with other jquery plugin that does not use explicit code within the html file.
On this one, the problem seems to be on the explicit script code bellow the label tag. I found some articles about dealing with JSON but couldn't make it work (I also don't know if that is the right way to go).
Well, my best option was to put that explicit javascript into a new javascript file and add its path to the html like:
<script type="text/javascript" src="/<script_path_here>"></script>
That way my functions that handles the static files on the .py would do their job.
I usually don't program in jQuery so I'm a big newbie. I got an HTML input form (type=text) and I want that when website is loaded, the value of the textbox should change.
I got this in fill-in.php file:
<script src="fill.js"></script>
<body>
<label class="txtlabel">Username/Email</label>
<input id="username" value="Moin" type="text" name="login-username">
<label class="txtlabel">Kennwort</label>
<input id="kennwort" value="Passwort" type="password" name="login-password">
</body>
And in fill.js file I wrote this:
$(document).ready(function(e) {
$('#username').val('some random text')
});
fill.js is correctly linked to my fill-in.php file.
Can someone give me a hint where I made a mistake?
Cheers
Add this in your header section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
If you're planning to use jQuery, the very first thing you need is the library. You can reference it from a CDN or download it:
http://jquery.com/download/
<!-- CDN reference (Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="fill.js"></script>
you need to include the jquery library before the fill.js, you can download it from the jQuery site or use a CDN version as given below
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>
I'm building an HTML5 app that uses Google Doubleclick ads. 99% of the app is dynamically built with JS, but the ads are hardcoded into the html like so:
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-3664602748600160");
GS_googleEnableAllServices();
GA_googleAddSlot("ca-pub-3664602748600160", "125x125");
GA_googleAddSlot("ca-pub-3664602748600160", "250x250");
GA_googleAddSlot("ca-pub-3664602748600160", "160x600");
GA_googleAddSlot("ca-pub-3664602748600160", "468x60");
GA_googleFetchAds();
</script>
<div id="ads" style="float:right;">
<div id="square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("250x250");
</script>
</div>
</div>
<div id="small_square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("125x125");
</script>
</div>
</div>
<div id="tall_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("160x600");
</script>
</div>
</div>
<div id="half_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("468x60");
</script>
</div>
</div>
These ads are then hidden/shifted as needed to fill the various ad spots on the generated pages. When i implemented a manifest file to cache persistent assets i get a message that it has failed to load the http://partner.googleadservices.com/gampad/google_service.js file. Knowing this, I tried saving a local copy of that js file and including it in the manifest, but this led to errors regarding the GA_googleblahlah calls being undefined which seems to indicate a load order issue of some sort. Is there some way to exempt this file from cache?
I found the solution. Using a wildcard in the network area after defining the cached elements seems to have fixed the issue. My manifest file now looks like this:
CACHE MANIFEST
CACHE:
/js/jquery.min.js
/js/jquery.easing.1.3.js
/etc
NETWORK:
*
Thanks to Ben Poole for the pointers.
If you don't want a file to cache you add it to the NETWORK: section of your manifest file. From Dive Into HTML5:
The line marked NETWORK: is the beginning of the “online whitelist”
section. Resources in this section are never cached and are not
available offline. (Attempting to load them while offline will result
in an error.)