I am trying to make a code editor in JavaScript with Codemirror. I want the autocomplete feature, but it doesn't work. Can someone please tell me what I am doing wrong here.
Here is the code :
var editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true,
extraKeys: {
"Tab": "autocomplete"
},
hint: CodeMirror.hint.javascript
});
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/hint/anyword-hint.js"></script>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
<title>Code</title>
</head>
<body>
<textarea name="myTextarea" id="myTextarea" cols="30" rows="10"></textarea>
</script>
After a ton of research, like checking their site example and stuff, I finally found a working solution, here is the code:
var editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true,
extraKeys: {"Ctrl-Space": "autocomplete"},
mode: {name: "javascript", globalVars: true}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/mode/markdown/markdown.js"></script>
<title>Code</title>
</head>
<body>
<textarea name="myTextarea" id="myTextarea" cols="30" rows="10"></textarea>
</body>
</html>
Related
$(function(){
$('#alias').keyup(function(){
$('#youtuber').html($('#alias').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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="width=device-width">
<title>Julius extension</title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<style>
body{
width: 300px;
}
</style>
</head>
<body>
<h3>Find your YouTuber: <span id="youtuber"></span> </h3>
<input id="alias" placeholder="Search your youtuber"/>
</body>
</html>
I am trying to code a simple chrome extension. Right now I want that everything I write in the search bar of my template gets displayed above, after the "Find your YouTuber:" text.
However, for some reason that is not the case, I get the error message: popup.js:1 (anonymous function), whilst running the extension.
popuph.html :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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="width=device-width">
<title>Julius extension</title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<style>
body{
width: 300px;
}
</style>
</head>
<body>
<h3>Find your YouTuber: <span id="youtuber"></span> </h3>
<input id="alias" placeholder="Search your youtuber"/>
</body>
</html>
popup.js:
$(function () {
$('#alias').keyup(function () {
$('#youtuber').html($('#alias').val());
});
});
library = https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/
This is my code: I need get all values of input, I used $("input").val() but return ="" always.
input tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
</head>
<body>
<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
</body>
</html>
Try this jquery library. bootstrap-tokenfield
HTML :
<input type="text" class="form-control" id="tokenfield" value="red,green,blue" />
Jquery :
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
Demo Fiddle
With this lab, you can call an array with all values:
$("input").tagsinput('items')
Like that (open your terminal and check the console.log): https://jsfiddle.net/DiogoBernardelli/bzyphmuu/
Please check this, I was able to print output in console,
console.log($("input").val())
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>some_stuff</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="img/ico" href="/some_stuff/favicon.ico">
<link rel="stylesheet" href="/some_stuff/stylesheets/main.css">
<body>
<script type="text/javascript" src="/some_stuff/javascripts/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY_API_KEY>&callback=initialize">
</script>
</body>
</head>
</html>
This is the contents of my main.js:
function initialize() {
console.log("Initialized!");
// Do other stuff to render the map
renderMap();
}
For some reason, this is throwing the error Uncaught TypeError: window.initialize is not a function in the browser.
However, if I change my code to:
<!DOCTYPE html>
<html>
<head>
<title>some_stuff</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="img/ico" href="/some_stuff/favicon.ico">
<link rel="stylesheet" href="/some_stuff/stylesheets/main.css">
<body>
<script type="text/javascript" src="/some_stuff/javascripts/main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<MY_API_KEY>&callback=initialize">
</script>
<script>
function initialize() {
console.log("Initialized!")
}
</script>
</body>
</head>
</html>
and main.js just contains
renderMap()
then everything works. What gives?
hi i try to run the basic example of jspanel 2 but the weight is overflow
this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jsPanel</title>
<link href="src/jsPanel.css" rel="stylesheet">
<link href="src/font-awesome.css" rel="stylesheet">
<link href="src/jquery-ui.min.css" rel="stylesheet" />
<link href="src/styles.css" rel="stylesheet">
<script src="src/jquery-2.1.1.min.js"></script>
<script src="src/jquery-ui-1.11.0.min.js"></script>
<script src="src/jquery.ui.touch-punch.min.js"></script>
<script src="src/jquery.jspanel.js"></script>
<script>
$(document).ready(function(){
$('#sample-basic' ).click(function(){
$.jsPanel();
});
});
</script>
</head>
<body>
<button id="sample-basic" type="button" class="btn btn-primary btn-xs">Try it</button>
</body>
</html>
this is the pluggin
http://jspanel.de/
any jsfiddle example?
Here is the link to your code working in jsfiddle: http://jsfiddle.net/czqa7gu8/
Just apply your css... Or ask what you really need from your css code.
I've been using Aloha Editor to create an example of a simple editor, but I haven't succeed to getting it to work in Opera. The menu doesn't appear and the textarea is not editable.
In all other browsers seems to work fine, but sometimes Chrome needs to refresh the page to work.
This is the relevant HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" media="screen" />
</head>
<body>
<textarea id="content"></textarea>
<script src="//cdn.aloha-editor.org/latest/lib/require.js"></script>
<script src="//cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/table,common/list,common/link,common/block,common/undo,common/contenthandler,common/paste"></script>
<script src="notes.js"></script>
</body>
</html>
And this is the javascript code (inside notes.js):
var Aloha = window.Aloha || ( window.Aloha = {} );
Aloha.settings = { sidebar: { disabled: true } };
Aloha.ready(function () {
Aloha.jQuery('#content').aloha();
});
I'm answering my own question after reading the comment from Inshallah.
The problem was that the JavaScript variables Aloha and Aloha.settings should be set before including Aloha.
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="//cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" media="screen" />
</head>
<body>
<textarea id="content"></textarea>
<script src="//cdn.aloha-editor.org/latest/lib/require.js"></script>
<script>
var Aloha = window.Aloha || ( window.Aloha = {} );
Aloha.settings = { sidebar: { disabled: true } };
</script>
<script src="//cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/table,common/list,common/link,common/block,common/undo,common/contenthandler,common/paste"></script>
<script src="notes.js"></script>
</body>
</html>
JavaScript code (inside notes.js)
Aloha.ready(function () {
Aloha.jQuery('#content').aloha();
});