I am using CodeMirror to display XML in XML mode, but the code is not being automatically indented.
I checked and the XML mode does implement indent(state, textAfter, fullLine), which handles the indenting, so it should be working.
This is how I am initializing CodeMirror:
CodeMirror.fromTextArea(document.getElementById("test"), {
mode: 'application/xml',
theme: 'eclipse',
lineNumbers: true,
lineWrapping: true,
readOnly: true,
cursorBlinkRate: -1
});
Check this jsFiddle link for a live version: https://jsfiddle.net/zrosfz7x.
Any ideas?
In order to provide a solution I have added an external beautifier for xml.
Here's a complete working example.
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="//codemirror.net/lib/codemirror.css">
<script src=//codemirror.net/lib/codemirror.js></script>
<script src=//codemirror.net/mode/xml/xml.js></script>
<script src="//cdn.rawgit.com/vkiryukhin/vkBeautify/master/vkbeautify.js"></script>
</head>
<body>
<textarea id="test"><?xml version="1.0" encoding="UTF-8" ?><note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!</body></note></textarea>
<script>
document.getElementById("test").value = vkbeautify.xml(document.getElementById("test").value);
CodeMirror.fromTextArea(document.getElementById("test"), {
mode: 'application/xml',
// theme: 'eclipse',
lineNumbers: true,
lineWrapping: true,
readOnly: true,
cursorBlinkRate: -1
});
</script>
</body>
</html>
also here the updated jsFiddle: http://jsfiddle.net/zrosfz7x/3/
Related
Here is my code :
<script type="text/javascript">
$('#calan').MdPersianDateTimePicker({
Placement: 'botto',
Trigger: 'focus',
EnableTimePicker: true,
TargetSelector: '',
GroupId: '',
ToDate: false,
FromDate: false,
});
</scrip>
How to use MdPersianDateTime to date in input.
according to PersianDateTimePicker Documents
you can use it by
`$('#id').MdPersianDateTimePicker({targetTextSelector: '#inputTextDate1',targetDateSelector: '#inputHiddenDate1',});`
just
add these files to you html:
<link href="/dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet"/>
<script src="/dist/jquery.md.bootstrap.datetimepicker.js"></script>
I suggest to add scripts at the end of body tag and after jQuery library.
for Options and Functions you can refer to document
I have one website link which currently is working when clicking the link a window pop-up, but I want the onclick to happen automatically without clicking. The onclick should work like onload.
I tried a lot of Google and StackOverflow searches.. but I couldn't find the exact solution to my problem.
Here's my code below:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
document.getElementById('robrowser').addEventListener("click", function(){
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}, false );
}
window.addEventListener("load", initialize, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
You can simulate a buttonclick like this:
$("#robrowser").click();
In this case you want to run the method when a page is loaded.
You can just remove the entire onclick listener and call the function initialize() directly:
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
initialize();
The following changes have been made:
button on click event listener moved into the window load function
The source code from the button click event moved into initialize()
button on click event to target the function initialize
window load function calls/executes initialize()
Source code:
<!DOCTYPE html>
<html>
<head>
<title>mygame | Browser</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="../api.js"></script>
<script type="text/javascript">
function initialize() {
var ROConfig = {
type: ROBrowser.TYPE.POPUP,
application: ROBrowser.APP.ONLINE,
remoteClient: "http://play.mygame.com/client",
width: 1024,
height: 768,
development: false,
servers: [{
display: "mygame",
desc: "mygame Revolution",
address: "94.99.190.98",
port: 6900,
version: 46,
langtype: 12,
packetver: 20170614,
packetKeys: false,
socketProxy: "ws://196.66.646.179:5999/"
}],
saveFiles: true,
skipServerList: true,
skipIntro: true,
version: 1,
plugins: {
IntroMessage: {}
}
};
var RO = new ROBrowser(ROConfig);
RO.start();
}
window.addEventListener("load", function(){
document.getElementById('robrowser').addEventListener("click", initialize, false );
initialize();
}, false);
</script>
</head>
<body>
<input type="button" value="Run roBrowser" id="robrowser"/>
</body>
</html>
If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.
I hope this helps, happy coding!
I have setup FullCalendar (v3.8.0) to pull event data from Google Calendar, using qTip2 for displaying event information. This works fine.
I am now trying to display the event's location attribute. Sadly, I cannot seem to figure out how to get FullCalendar to save the information from Google Calendar in the event.
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Test">
<meta name="author" content="Test">
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' href='qtip/jquery.qtip.min.css' />
<script src='lib/jquery.min.js'></script>
<script src='qtip/jquery.qtip.min.js'></script>
<script src='lib/moment.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript' src='fullcalendar/gcal.js'></script>
</head>
<body>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: '<<hidden>>',
events: {
googleCalendarId: '<<hidden>>'
},
header: {
left: 'title',
center: 'listWeek, agendaWeek, month',
right: 'prev,next'
},
weekends: false,
eventRender: function(event, element) {
element.qtip({
content: event.description,
title: event.title,
position: {
my: 'center', //Ecke des Tooltips
at: 'center', //Position auf der Seite (auch Target möchlich)
target: $(window)
},
show: 'click'
});
},
eventClick: function(event) {
if (event.url) {
return false;
}
}
});
});
</script>
<div id='calendar'></div>
</body>
I have tried to add the location attribute to EventDef.defineStandardProps, but this apperas to have no effect.
EventDef.defineStandardProps({
// not automatically assigned (`false`)
_id: false,
id: false,
className: false,
source: false,
// automatically assigned (`true`)
title: true,
url: false,
rendering: true,
constraint: true,
overlap: true,
editable: true,
startEditable: true,
durationEditable: true,
color: true,
backgroundColor: true,
borderColor: true,
textColor: true,
location: true
});
This was also discussed at "fullcalendar jQuery - Possible to retrieve description from Google Calendar events?", but the solution provided appears to be outdated and not applicable anymore.
Every other thread about this topic has either no or no conclusive answer.
Which steps can I take to be able to use the event location?
During the eventRender callback (https://fullcalendar.io/docs/event_rendering/eventRender/) you shuld be able to access event.location, assuming Google has provided you with that field in the JSON you receive. You can check the content of the event by inserting the line console.log(JSON.stringify(event)); into your eventRender code, to log the event properties available to you.
FullCalendar happily keeps custom properties on the event object, if the data source supplies them. Once you've got that data, you can insert it into the event's HTML however you please.
I don't know where in the process you were trying to add things to the event standard properties, but anyway that makes no sense - it would just pre-define an empty attribute, it doesn't cause it to be actually populated with anything.
I have a formatted / beautified text in the textarea (formatted using CodeMirror). Now I am not able to edit the textarea.
EDIT:
Here is the html portion Iam using
<div class="form-group ">
<textarea id="alertTemplate" class="form-control" placeholder="Condition " rows="5" id="comment"></textarea>
</div>
Here is the code I am using to convert the textarea content above to formatted javascript using codemirror
var editor;
var test = js_beautify(data.condition.script);
$('#alertTemplate').empty();
$('#alertTemplate').val(test);
editor = CodeMirror.fromTextArea(document.getElementById("alertTemplate"),{
lineNumbers: true,
theme: "default",
mode: "javascript",
readOnly: false
});
Make sure you have no readOnly: true in your setting.
window.onload = function () {
var readOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_readonly'), {
mode: "javascript",
theme: "default",
lineNumbers: true,
readOnly: true
});
var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
mode: "javascript",
theme: "default",
lineNumbers: true
});
};
<h1>Using CodeMirror (readonly and editable code)</h1>
<p>http://codemirror.net/mode/javascript/index.html</p>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/edit/continuecomment.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<h2>Readonly</h2>
<div>
<textarea rows="4" cols="50" id="codesnippet_readonly" name="codesnippet_readonly">
// Demo code (the actual new parser character stream implementation)
var readOnlyCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_readonly'), {
mode: "javascript",
theme: "default",
lineNumbers: true,
readOnly: true // This make the textarea readonly
});
</textarea>
</div>
<div>
<h2>Editable</h2>
<textarea rows="4" cols="50" name="codesnippet_editable" id="codesnippet_editable">
// Demo code (the actual new parser character stream implementation)
var editableCodeMirror = CodeMirror.fromTextArea(document.getElementById('codesnippet_editable'), {
mode: "javascript",
theme: "default",
lineNumbers: true
});
</textarea>
</div>
I am still newbie to integrate elfinder and tinymce, i already follow tutorial in elfinder wiki
in form.php in tinymce init already added file_browser_callback:elFinderBrowser:
tinyMCE.init({
mode : "exact",
elements : "txt_content",
theme : "advanced",
file_browser_callback : elFinderBrowser,
plugins : "advimage,advlink,media,contextmenu",
theme_advanced_buttons1_add_before : "newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,forecolor,backcolor,liststyle",
theme_advanced_buttons2_add_before: "cut,copy,separator,",
theme_advanced_buttons3_add_before : "",
theme_advanced_buttons3_add : "media",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
extended_valid_elements : "hr[class|width|size|noshade]",
paste_use_dialog : false,
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : true,
apply_source_formatting : true,
force_br_newlines : true,
force_p_newlines : false,
relative_urls : true
});
And also add function elFinderBrowser too:
function elFinderBrowser (field_name, url, type, win) {
tinymce.activeEditor.windowManager.open({
file: 'elfinder.html',// use an absolute path!
title: 'elFinder 2.0',
width: 900,
height: 450,
resizable: 'yes',
inline:true
}, {
setUrl: function (url) {
win.document.getElementById(field_name).value = url;
}
});
return false;
}
elfinder.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>elFinder 2.0</title>
<!-- jQuery and jQuery UI (REQUIRED) -->
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<!-- elFinder CSS (REQUIRED) -->
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url() ?>assets/vendor/elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url() ?>assets/vendor/elfinder/css/theme.css">
<!-- elFinder JS (REQUIRED) -->
<script type="text/javascript" src="<?php echo base_url() ?>assets/vendor/elfinder/js/elfinder.min.js"></script>
<!-- elFinder initialization (REQUIRED) -->
</head>
<body>
<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>
<script type="text/javascript" charset="utf-8">
var FileBrowserDialogue = {
init: function() {
// Here goes your code for setting your custom things onLoad.
},
mySubmit: function (URL) {
// pass selected file path to TinyMCE
parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
// close popup window
parent.tinymce.activeEditor.windowManager.close();
}
}
$().ready(function() {
var elf = $('#elfinder').elfinder({
url : 'connector.php',
getFileCallback: function(file) { // editor callback
// file.url - commandsOptions.getfile.onlyURL = false (default)
// file - commandsOptions.getfile.onlyURL = true
FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE
}
}).elfinder('instance');
});
</script>
</body>
</html>
but when i choose/select image in elfinder window, it show error in firegbug:
"TypeError: parent.tinymce.activeEditor.windowManager.getParams is not
a function"
and it already driving me crazy, any hints, guys?
Have you tried top.tinymce.activeEditor.windowManager.getParams(); as stated in the tinyMce 4 documentation? so top instead of parent.
http://www.tinymce.com/wiki.php/api4:method.tinymce.WindowManager.getParams
Use newer tinymce version, it helps for me