<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}</div>
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
</script>
</body>
</html>
i have tried ace code editor i've pasted the exact code on my web page but it is not working can u please help me out i want my editor be like same as w3school code editor.
You don't seem to have ace.js in the path that you mentioned in the script src attribute.
Replace
<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
with
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script>
Use cdn in the script or you can get the libraries in your local and try that script
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" type="text/javascript" charset="utf-8"></script>
Related
I am working on a project where we need to save the iframe content as a PDF or an image.
Currently, I getting issue where the PDF is just blank.
Does anyone has any solution for this ?
Thanks in advance.
Here is my code:
<html>
<head>
<script src="jspdf.umd.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js" ></script>
<script >
function createPdf(){
window.jsPDF = window.jspdf.jsPDF
var pdf = new jsPDF()
var element = document.getElementById("capture")
pdf.save("output.pdf")
}
</script>
</head>
<body>
<iframe id="capture" src="https://wikipedia.org/wiki/Main_Page" style=" width: 100%; height: 600px" frameborder="0"></iframe>
<button onclick="createPdf()">create pdf </button>
</body>
</html>
i have my react code in plain HTML
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<script>
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
but he not work, after run this index.html in Chrome i have only blank white page,
can someone explain me what i am doing wrong?
i use vscode
To make this work, use the development version, not the production version of the react and react-dom files. Also note that you need to specify the type of your script as "text/babel" or babel won't parse it.
Check out the code below:
<html>
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
</head>
</head>
<body>
<script type="text/babel"> /* notice type="text/babel"*/
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
RESULT:
I did react for the first time and it edited your code like that. I guess the two scripts I added are not needed, but just try it. As I understood you have to set an section to place the text. These two links could help too.
Where to place line of code in html for ReactDOM.render?
https://www.w3schools.com/react/react_render.asp
My Code:
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script type="text/javascript">
var h = React.createElement('p', null, 'Sherlock Holmes');
ReactDOM.render(h, document.getElementById('entry-point'));
</script>
</body>
</html>
I'm using angular to make page identification before access to the app main,
in the templateUrl: login.html i cant do anything !
note: when I called the ng-app="myApp" will give this error :
Uncaught Error: [$injector:modulerr]
here my code JS:
angular.module('training')
.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.when('/login',{
templateUrl: 'login.html',
controller: 'loginCrtl'
});
})
.controller('loginCrtl',['$scope','$timeout','apiservice','$routeProvider', function($scope,$timeout,apiservice,$routeProvider){
$scope.ppp= function(){
alert('ok');
}
}])
.controller('mainCtrl'......
here my login.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.min.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body ng-controller="loginCrtl">
<div class="center" style="width: 500px; height: 300px; background-color: #e5e5e5;">
Veuillez authentifier:<br><br>
Login: <input type="text" id="login"><br><br>
Password: <input type="text" id="pass">
<br><br>
<button id="ValidAccess" ng-click="ppp()">ok</button>
</div>
</body>
<style >
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</html>
my index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Planni</title>
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
<link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
<link rel="stylesheet" href="mystyle/jquery-ui.css">
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="public/bootstrap-datepicker.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="public/daypilot/daypilot-all.min.js"></script>
<script src="public/bootstrap-tokenfield.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body data-ng-app="training" data-ng-controller="mainCtrl">
....
</body>
</html>
Where your ng-app ? module of you is training call ng-app ='training' not ng-app='myApp'
Promblem of you is not setting it use like this
angular.module('training',['ngRoute'])
Here is set a module
angular.module('training',[])
and here is get a module
angular.module('training')
EDIT
You use like this
angular.module('training',['ngRoute'])
.controller('mainCtrl',mainCtrl)
.controller('loginCtrl',loginCtrl)
function mainCtrl(){
//
}
function loginCtrl(){
//
}
or if you have another module contain loginctr use like this
angular.module('anothermodule',[])
.controller('loginCtrl',loginCtrl)
function loginCtrl(){
//
}
And in training app include it
angular.module('training',['ngRoute','anothermodule'])
first of all, you need to add the ng-app directive to your html file. my recommendation is to add it inside html tag
<html ng-app="training">
then in the js, when you are initializing the module, need to add empty square brackets to the module
angular.module('training',[])
I assume for the router you are using ngRoute. in that case, you need to inject the route module to your training module
angular.module('training',['ngRoute'])
My webpage works fine in chrome, internet explorer, and JSFiddle but when opened in Mozilla it doesn't read any link or script tags except the ones linked to a website, i.e jquery. In the developer tools it reads jquery but no other JS and says there are no styles applied to the webpage.
<!DOCTYPE html>
<html>
<head>
<title>Word Master</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="C:/Users/Thomas/OneDrive/Documents/workPlease/WMstyle.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.0.js"></script>
<script type="text/javascript" src="C:/Users/Thomas/OneDrive/Documents/workPlease/WMfunctions.js"></script>
<script type="text/javascript" src="C:/Users/Thomas/OneDrive/Documents/workPlease/errorCheck.js"></script>
<script type="text/javascript" src="C:/Users/Thomas/OneDrive/Documents/workPlease/WMpopups.js"></script>
<script type="text/javascript" src="C:/Users/Thomas/OneDrive/Documents/workPlease/WMeasy.js"></script>
</head>
I tried saving all of them with encoding UTF-8 and I added #charset "UTF-8"; to the top of my css.
because you are using the filesystem path:
C:/Users/Thomas/OneDrive/Documents/workPlease/WMeasy.js
It should be absolute
/workPlease/WMeasy.js
or relative
WMeasy.js
I am using Colorbox in my project. I have integrated CKEditor in colorbox. Its working fine in all browsers, but a small issue in Google Chrome - Editor will open properly on first click, After closing the pop up and try the editor on second time without loading the page , I can't type text in the editor, Editor will enable on clicking on the source. I am not using the source toolbar in basic editor.
I spent more than 5 days for for finding a solution for this issue and try help from others - No result yet. Expecting better feedback...
Thanks for help in advance.
I have set up a test code for this...
index1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<script src="../ckeditor/_samples/sample.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox.css" />
<link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a>
</body>
</html>
index2.html
<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea>
<script type="text/javascript">
$(document).ready( function() { // I use jquery
var instance = CKEDITOR.instances['ckeditor_replace'];
if(instance)
{
CKEDITOR.remove(instance);
}
//CKEDITOR.config.startupFocus = true;
//CKEDITOR.config.startupShowBorders = false;
//CKEDITOR.config.startupOutlineBlocks = true;
//CKEDITOR.config.startupMode = 'source';
$( '.ckeditor_replace' ).val('12345');
$( '.ckeditor_replace' ).ckeditor(function() { } );
});
</script>
Regards
Nishad Aliyar
I got the solution for the same , just include the jquery and jquery adapter in index2.html. Please see below for example...
index1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<script src="../ckeditor/_samples/sample.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox.css" />
<link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a>
</body>
</html>
index2.html
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea>
<script type="text/javascript">
$(document).ready( function() { // I use jquery
var instance = CKEDITOR.instances['ckeditor_replace'];
if(instance)
{
CKEDITOR.remove(instance);
}
//CKEDITOR.config.startupFocus = true;
//CKEDITOR.config.startupShowBorders = false;
//CKEDITOR.config.startupOutlineBlocks = true;
//CKEDITOR.config.startupMode = 'source';
$( '.ckeditor_replace' ).val('12345');
$( '.ckeditor_replace' ).ckeditor(function() { } );
});
</script>
Regards
Nishad Aliyar