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
Related
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'])
I'm trying to create a map inside a bootbox dialog. Here is the code.
bootBox.dialog({ title:"test", message = "<div><google-map latitude='37.77493' longitude='-122.41942'></google-map></div>" });
It creates the dialog, creates the maps box with Google logo at bottom but do not load the map. It remains gray.
I found that if I open or close Chrome Developer Tools after the dialog has displayed the map is rendered.
Any suggestion?
Edit after comments:
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/bootbox/bootbox.min.js"></script>
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<button onclick="ft()">Open Map</button>
<script>
var ft = function(){
bootbox.dialog({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'});
}
</script>
</body>
Set the height of google-map for it to appear:
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'})
</script>
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</head>
<body>
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({
title: 'test',
message: '<div><google-map latitude="37.77493" longitude="-122.41942"></google-map></div>'
})
</script>
</body>
codepen
I have the following code in which I want to display an alert when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app>
<button ng-click="alert('test')">Display Text</button>
<script src="angular.min.js"></script>
<script type="text/javascript">document.write("<base href=\"" + document.location + "\" />");</script>
<script type="text/javascript">
$scope.alert = function(variable) {
alert(variable);
};
</script>
</body>
</html>
The console is displaying this as an error: Uncaught ReferenceError: $scope is not defined
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<title></title>
</head>
<body ng-controller="ModelCtrl">
<button ng-click="alert('test')">Display Text</button>
<script src="angular.min.js"></script>
<script type="text/javascript">document.write("<base href=\"" + document.location + "\" />");</script>
<script type="text/javascript">
var app = angular.module('App', []);
app.controller('ModelCtrl', function ($scope, $http) {
$scope.alert = function(variable) {
alert(variable);
};
});
</script>
</body>
</html>
I'm trying to use jFontSize in a local html page to be displayed in a WebView.
The script should allow the user to change the text size and it does. However this is no longer the case when I add to the text.
I tried using another script but the same problem persists.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir = "ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" language="javascript" src="jquery.jfontsize-1.0.js"></script>
<script type="text/javascript" language="javascript" src="jquery.corner-2.09.js"></script>
<script type="text/javascript" language="javascript" src="shCore.js"></script>
<script type="text/javascript" language="javascript" src="shBrushJScript.js"></script>
<script type="text/javascript" language="javascript" src="shBrushXml.js"></script>
<script type="text/javascript" language="javascript" src="shBrushCss.js"></script>
<script type="text/javascript" language="javascript" src="funcoes.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
<link type="text/css" rel="stylesheet" href="jfontsize.css" />
<link type="text/css" rel="stylesheet" href="shCoreDefault.css" />
</head>
<body>
<a class="jfontsize-button" id="jfontsize-m2" href="#">A-</a>
<a class="jfontsize-button" id="jfontsize-d2" href="#">A</a>
<a class="jfontsize-button" id="jfontsize-p2" href="#">A+</a>
<p class="some-class-name2" dir="rtl" align = "right">Hello<br>world</p>
<script type="text/javascript" language="javascript">
$('.some-class-name2').jfontsize({
btnMinusClasseId: '#jfontsize-m2',
btnDefaultClasseId: '#jfontsize-d2',
btnPlusClasseId: '#jfontsize-p2',
btnMinusMaxHits: 1,
btnPlusMaxHits: 7,
sizeChange: 7
});
</script>
</body>
</html>
The page works fine on Firefox.
You need to add the initialize code in document load -
$(document).ready(function(){
//jfontsize increase
$('.some-class-name2').jfontsize({
btnMinusClasseId: '#jfontsize-m2',
btnDefaultClasseId: '#jfontsize-d2',
btnPlusClasseId: '#jfontsize-p2',
btnMinusMaxHits: 1,
btnPlusMaxHits: 7,
sizeChange: 7
});
});
It should work fine.