I want to use EditorJS in my project. So I have created an HTML file after reading the documentation. Here is the file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<script>
import EditorJS from '#editorjs/editorjs'
const editor = new EditorJS('editorjs')
</script>
</body>
</html>
After opening the file into the browser, EditorJS is not showing up and this message is printed in the console- Uncaught SyntaxError: Cannot use import statement outside a module.
How to fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#editorjs/editorjs#latest"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<div id="editorjs"></div>
<script>
const editor = new EditorJS({
autofocus: true
});
</script>
</body>
</html>
When you add a script tag in your HTML file, you don't need to import the library again you can just start using it!
The script isn't a type module, use:
<script type="module">
Related
What is the problem in not communicating with Binance WebSocket in the following codes?
file index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stock</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
file app.js:
let ws = new WebSocket('wss://stream.binance.com:9443/ws/etheur#trade');
ws.onmessage = (event) => {
console.log(event.data);
};
The error I encounter in the console part of the browser.
How to solve this error?
I am a web developer and using Atom as text editor but I always have to change some autocomplete suggestions.
For example when I type html and pres tab it gives me this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
This result is not actually what so I manually change it like this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta name="author" content="Your name">
<meta name="description" content="Brief description">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="theme-color" content="#00FFF0">
<link href="style.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
So I did a research and everybody solves this kind of similar issues with snippets I am not asking how can I do it with snippet. I already know it. I want to change these codes from editor's current location. Possibly it locates somewhere in ~/AppData/Local/atom but I haven't found it yet. I want to reach that file and change related suggestions from there.
This is not only for html suggestion I also want to remove something from PHP suggestion and add some for JavaScript suggestion.
Any idea how this system works and how to do it ?
Thanks.
I am trying to use makerjs with node.js but it doesn't work.
If I use cdn like bellow,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/makerjs#0/target/js/browser.maker.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bezier-js#2/bezier.js"></script>
<script src="https://cdn.jsdelivr.net/npm/opentype.js#0/dist/opentype.js"></script>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
It works well.
If I look at the documentation, it says
npm install makerjs --save
and put this in javascript
var makerjs = require('makerjs');
So I made my html like bellow after installing makerjs with npm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
But it is not working.
What am I missing?
The errors appear at the console after i open this code on live server on vscode, im learning Vue.js and the code itself opens the file but i dont know how to fix those errors.
Ive reasearched somethings about the errors but couldnt fix them.`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vuejs"></script>
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<p>teste</p>
<script>
const vm = new Vue();
console.log(vm)
</script>
</body>
</html>`
This question already has answers here:
JavaScript not working on external file
(4 answers)
Closed 5 years ago.
i have 2 files....one html and one js....
html code:
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="external.js"></script>
<title> Sign In And Registration Page </title>
</head>
<body>
<div id="headerTag">
</div>
///codes here....
</body>
</html>
js code:
some functions here performed on click operation.....
function onClickOperation ()
{
///here codes..
}
problem is that the functions are not being called...when i put the same js code in the html file directly, it works....what do i have to do to load those functions from separate js file?
external.js should have the code called after DOM has finished loading like so
document.addEventListener('DOMContentLoaded',function(){
// code here
});
or it should be included inside the body tag below the DOM elements it should interact with
Try wrapping the script in the body and just before the </body> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Sign In And Registration Page </title>
</head>
<body>
<div id="headerTag">
</div>
///codes here....
<script type="text/javascript" src="external.js"></script>
</body>
</html>