Please help me about this , I have a textfield in my page , and i want when i click on textfield or a button , elfinder open in a popup and when i choose a file that close and url of the file return in to the textfield , i able to use another filemanager if that works fine
<script type="text/javascript" src="../elfinder/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../elfinder/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/smoothness/jquery-ui-1.8.13.custom.css">
<script type="text/javascript" src="../elrte/js/elrte.min.js"></script>
<script type="text/javascript" src="../elfinder/js/elfinder.min.js"></script>
<script type="text/javascript" src="../elfinder/js/jquery.dialogelfinder.js"></script>
<script src="../elrte/js/i18n/elrte.en.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" media="screen" href="../elrte/css/elrte.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../elfinder/css/dialog.css">
<body>
<input type="text" id="fileurl" />
<div id="finder"></div>
</body>
see this url : https://github.com/Studio-42/elFinder/issues/395
Script :
$(document).ready(function() {
$("#editor").click(function(e) {
var elfinder = $('#elfinder').elfinder({
url: 'php/connector.minimal.php',
resizable: false,
getfile : {
onlyURL : true,
multiple : false,
folders : false,
oncomplete : ''
},
handlers: {
dblclick: function(event, elfinderInstance) {
fileInfo = elfinderInstance.file(event.data.file);
if (fileInfo.mime != 'directory') {
$("#editor").val(elfinderInstance.url(event.data.file));
elfinderInstance.destroy();
//$('#elfinder').dialog('close');
return false; // stop elfinder
}
},
destroy: function(event, elfinderInstance) {
elfinder.dialog('close');
}
}
}).dialog({
title: 'filemanager',
resizable: true,
width: 920,
height: 500
});
});
});
Html :
<div id="elfinder"></div>
<input type="text" id="editor" style="width:500px;">
in latest vesrion of elFinder:
You can use
getFileCallback : function(file) {
cosole.log(file);
}
Related
I am trying to get a code editor that shows the result on clicking a button. I've adapted How to output result of codemirror in iframe? but I am having issues with the closing tags on the example code not being styled.
See screenshot and code below.
I would be very appreciative if someone can take a look and point me in the right direction (I am not very good with JS).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/theme/neo.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/css/css.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/fold/indent-fold.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/addon/edit/matchbrackets.min.js"></script>
<style>
body {
background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
</head>
<body>
<div id="codeeditor"></div>
<iframe>Example</iframe>
<button>RUN</button>
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "<html>\n<body class=\"fdf\">\n<h1>Hello world</h1>\n<button type=\"button\" disabled>Click Me!</button>\n</body>\n</html>",
theme: "neo",
lineNumbers: true,
matchBrackets: true
});
$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})
</script>
</body>
</html>
I fixed it. It wasn't configured correctly. Also putting the code in a separate html file and importing it helps with all the formatting.
You need the following file (plus any theme css file):
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/xml/xml.min.js"></script>
Here is the new script config:
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "{{ range $matches }}{{ .Content }}{{ end }}",
theme: "neo",
mode: "htmlmixed",
htmlMode: true,
lineNumbers: true,
matchBrackets: true,
smartIndent: true,
});
You Can Try that Code:-
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor"></div>
<button onclick="CloseTag()">Close Tag</button>
<script>
function CloseTag() {
myCodeMirror.execCommand("closeTag");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
});
</script>
</body>
</html>
I installed firebase and angularfire with bower bower.
I included the files and angularfire but I get these errors:
When I click error on the file angularfire
code app.js
var app = angular.module('myApp', ['ui.router','ionic','firebase'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider) {
$stateProvider.state("home",{ url : "/home", templateUrl : "templates/home.html" , controller: "HomeCtrl"});
$stateProvider.state("Inscription",{ url : "/inscription", templateUrl : "templates/inscription.html" , controller: "InscriCtrl"});
$stateProvider.state("listmsg",{ url : "/listmsg", templateUrl : "templates/list.html" , controller: "ListCtrl"});
$stateProvider.state("msg",{ url : "/msg", templateUrl : "templates/msg.html" , controller: "MsgCtrl"});
$urlRouterProvider.otherwise("home");
}]);
app.controller('HomeCtrl', [,'$firebaseSimpleLogin',function($scope,$firebaseSimpleLogin) {
var firebaseObj = new Firebase("https://appsfactor-68466.firebaseio.com");
var loginObj = $firebaseSimpleLogin(firebaseObj);
$scope.SignIn = function(event) {
event.preventDefault(); // To prevent form refresh
var username = $scope.user.email;
var password = $scope.user.password;
loginObj.$login('password', {
email: username,
password: password
})
.then(function(user) {
// Success callback
console.log('Authentication successful');
}, function(error) {
// Failure callback
console.log('Authentication failure');
});
}
}]);
app.controller('InscriCtrl', [function() {
}]);
app.controller('ListCtrl', [function() {
}]);
app.controller('MsgCtrl', [function() {
}]);
code index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<!-- AngularFiionic servere -->
<script src="lib/firebase/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "myapi",
authDomain: "appsfactor-68466.firebaseapp.com",
databaseURL: "https://appsfactor-68466.firebaseio.com/",
storageBucket: "gs://appsfactor-68466.appspot.com",
};
firebase.initializeApp(config);
</script>
<script src="lib/angularfire/dist/angularfire.js"></script>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js" ></script>
</head>
<body ng-app="myApp">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon ion-navicon">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item menu-close ui-sref="home">Acceuil</ion-item>
<ion-item menu-close ui-sref="Inscription">Inscription</ion-item>
<ion-item menu-close ui-sref="listmsg">Listes Messages</ion-item>
<ion-item menu-close ui-sref="msg">Message</ion-item>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
I've created a simple "helloworld" web component, in that I put a "button" tag and I want that button to be clicked by triggering it but i'm unable to trigger it. What am I doing wrong?
Here is my code for "Index.html" file in which i've called my Own component and values for my button:
<!doctype html>
<html>
<head>
<title>First Polymer component</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="bower_components/lib/jquery-1.11.2.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap-theme.css" />
<script src="bootstrap_theme/js/bootstrap.js"></script>
<link rel="import" href="hello-world.html">
<script>
var button_data = [{
"name": "litrary vocabulary",
"span_id": "mostbasic",
"description": "This is a sample description about litrary vocabulary"
}, {
"name": "no contractions",
"description": "This is a sample description about no contractions"
}];
window.addEventListener('WebComponentsReady', function(e) {
var element = document.querySelector('hello-world');
element.buttonsdata = button_data;
});
</script>
</head>
<body>
<hello-world> </hello-world>
<script>
$('.answerButtons').trigger("click");
function k12() {
window.open("http://www.w3schools.com");
}
</script>
</body>
</html>
And the 2nd file contain code for my web component:
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<style>
p {
color: red;
}
</style>
<template>
<template is="dom-repeat" items="{{buttonsdata}}" as="button_data">
<button type="button" class="btn btn-info answerButtons" onclick = "k12()">{{_getButtonName(button_data)}} </button>
</template>
<p>This is my first own component </p>
<p>This is my first ....... </p>
<p>Kumaran is IDIOT </p>
</template>
<script>
Polymer({
is: 'hello-world',
_getButtonName: function(buttondata) {
return buttondata.name;
}
});
</script>
</dom-module>
button_data should be a property in hello-world
onclick should be on-click for Polymer binding https://www.polymer-project.org/1.0/docs/devguide/events.html
Is there a way for codemirror to highlight the code matching a pattern (like if I use the search addon) when the page load? So I could load the page with ?search=my_pattern and pass the pattern to codemirror.
Here's a sample code and a jsfiddle. You can use CTRL+F to use the search addon.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'python',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/ErxMb/
I figured out how to do it using overlay.js by looking at the CodeMirror: Overlay Parser Demo.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/overlay.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<style type="text/css">
.cm-highlightSearch {background: yellow;}
</style>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var keyword = 'hello';
CodeMirror.defineMode("highlightSearch", function(config, parserConfig) {
var searchOverlay = {
token: function(stream, state) {
if (stream.match(keyword)) {
return "highlightSearch";
}
while (stream.next() != null && !stream.match(keyword, false)) {}
return null;
}
};
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "python"), searchOverlay);
});
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'highlightSearch',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/HkjY7/
I've a simple gallery:
<ul class="gallery">
<li><a class="fancybox-buttons" data-fancybox-group="gallery" href="/path/to/image1.jpg"><img src="/path/to/image1_thumb.jpg" /></a></li>
<li><a class="fancybox-buttons" data-fancybox-group="gallery" href="/path/to/image2.jpg"><img src="/path/to/image3_thumb.jpg" /></a></li>
<li><a class="fancybox-buttons" data-fancybox-group="gallery" href="/path/to/image3.jpg"><img src="/path/to/image3_thumb.jpg" /></a></li>
</ul>
In my HTML-Head I added:
<link rel="stylesheet" type="text/css" href="/path/to/jquery.fancybox.css" media="all" />
<link rel="stylesheet" type="text/css" href="/path/to/jquery.fancybox-buttons.css" media="all" />
<link rel="stylesheet" type="text/css" href="/path/to/jquery.fancybox-thumbs.css" media="all" />
<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/path/to/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/path/to/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {},
thumbs : {
width : 120,
height : 80
}
},
});
});
The gallery works fine!
Now I want to open the first item (index 0) of the gallery with a link, inclusive buttons, and thumbs:
show gallery
The link opens the fancybox but the gallery isn´t shown. Why?
If you already bound fancybox to a specific selector, you just need to trigger it using the .eq() method to select the index you want like :
show gallery