I'm trying to add a video player inside a content page of a lesson on Moodle using Kaltura's JS embed. The embed looks like the following:
<script src="http://cdnapi.kaltura.com/p/"></script>
<div id="kaltura_player_" style="width: 530px; height: 327px;"
itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<span itemprop="name" content="Letter"></span>
<span itemprop="description" content="A case study."></span>
<span itemprop="duration" content="233"></span>
<span itemprop="thumbnail"
content="http://cdnbakmi.kaltura.com/p"></span>
<span itemprop="width" content="530"></span>
<span itemprop="height" content="327"></span>
</div>
<script>
kWidget.embed({
"targetId": "kaltura_player_",
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"streamerType": "hdnetwork"
},
"cache_st": 139585,
"entry_id": "0_jd9t3gbd"
});
</script>
After saving the above into a content section in a Tiny MCE editor (as HTML), it directed me to a summarized edit page with each content section, where I can see the section with the video player working/playing just fine. However, during the preview of the content page, it only showed broken js code inside an input tag:
<input type="submit" value="//
kWidget.embed({
"targetId": "kaltura_player_,
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"},
"streamerType": "hdnetwork"},
"cache_st": 1395856314,
"entry_id": "0_jd9t3gbd"
});
// ]]>">
With no player displayed on the preview. Afterwards, I went back into edit mode, into the MCE text editor in HTML mode, and found that it has been altered into this:
<p></p>
<div id="kaltura_player_" style="width: 530px; height: 327px;" itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject"></div>
<p>
<script type="text/javascript">// <![CDATA[
kWidget.embed({
"targetId": "kaltura_player",
"wid": "_1410652",
"uiconf_id": 21346902,
"flashvars": {
"akamaiHD": {
"loadingPolicy": "preInitialize",
"asyncInit": "true"
},
"streamerType": "hdnetwork"
},
"cache_st": 5856314,
"entry_id": ""
});
// ]]></script>
</p>
Is this a Moodle issue? Or a Tiny MCE issue? or both? Is there a security config setting that I've missed? Would anyone know which of these components are altering the js code? Any help would be greatly appreciated!
Related
I am trying to develop a VS Code extension that will display some graphs i made using CanvasJS. The issue I am facing is as follows: I do not know how to run the HTML file without using "go Live" or something like that.
I suspect what I might have to do is make a command that, when inputted, runs the correct HTML file. I just have simply never done anything like this. Would I perhaps have to somehow caputure what commands are used to normally run the HTML file? and then somehow link a command in the extension to the commands that run the HTML file?
any advice on how to do this would be greatly appreciated. Or perhaps information on anything similar to it at all.
You cannot "run" an HTML file. You have to return the HTML content in text form to the webview panel as demonstrated in this webview provider. Such HTML content can load scripts and generate graphs as shown in this code. Here's the main part of it:
const diagram = `<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
${this.generateContentSecurityPolicy()}
${this.getStyles(webView)}
<base target="_blank">
<script src="${graphLibPath}"></script>
<script>
let parseTreeRenderer;
let graphExport;
</script>
</head>
<body>
<div class="header"><span class="parse-tree-color"><span class="graph-initial">Ⓟ</span>arse Tree</span>
<span class="action-box">
Tree
<span class="switch">
<span class="switch-border">
<input id="switch1" type="checkbox" onClick="parseTreeRenderer.toggleTreeType(this)"/>
<label for="switch1"></label>
<span class="switch-handle-top"></span>
</span>
</span>
Cluster
Horizontal
<span class="switch">
<span class="switch-border">
<input id="switch2" type="checkbox"
onClick="parseTreeRenderer.toggleOrientation(this)"/>
<label for="switch2"></label>
<span class="switch-handle-top"></span>
</span>
</span>
Vertical
<a onClick="parseTreeRenderer.changeNodeSize(0.9);">
<span class="parse-tree-color" style="font-size: 120%; font-weight: 800;
cursor: pointer; vertical-align: middle;">-</span>
</a>
Node Size
<a onClick="parseTreeRenderer.changeNodeSize(1.1);">
<span class="parse-tree-color" style="font-size: 120%; font-weight: 800; cursor: pointer;
vertical-align: middle;">+</span>
</a>
Save to SVG
<a onClick="graphExport.exportToSVG('parse-tree', '${basename(uri.fsPath)}');">
<span class="parse-tree-save-image" />
</a>
</span>
</div>
<svg></svg>
<script type="module">
import { ParseTreeRenderer } from "${rendererScriptPath}";
import { GraphExport } from "${exportScriptPath}";
// Register a listener for data changes.
window.addEventListener("message", (event) => {
switch (event.data.command) {
case "updateParseTreeData": {
parseTreeRenderer.loadNewTree({ parseTreeData: event.data.treeData });
break;
}
default:
}
});
parseTreeRenderer = new ParseTreeRenderer();
graphExport = new GraphExport();
parseTreeRenderer.loadNewTree({
parseTreeData: ${JSON.stringify(graph)},
useCluster: ${clustered.toString()},
horizontal: ${horizontal.toString()},
width: 1000,
height: 1000,
initialScale: 0.75,
initialTranslateX: ${horizontal ? 200 : 500},
initialTranslateY: ${horizontal ? 400 : 50},
});
parseTreeRenderer.initSwitches();
</script>
</body>
</html>`;
I'm currently new to javascript and I'm attempting to learn to set my webcam and have it take a snap using js.
However, only the Webcam.snap() works on my end. My Webcam.set() and Webcam.attach() won't show despite being able to take a snapshot.
Here's how it looks like when the page loads up vs after I take a snap
The empty space on the left part is where the webcam is supposed to be positioned at
Here's my webcam part in html:
<h3>Photo capture</h3>
<fieldset>
<div class="form-row">
<div class="col-md-6">
<div id="my_camera"></div>
<br/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="hidden" name="image" class="image-tag">
</div>
<div class="col-md-6">
<div id="results">Your captured image will appear here...</div>
</div>
</div>
</fieldset>
I also included webcam.js right at the beginning of my body tag
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
...
Lastly, I included the script tag for custom functions within the body tag:
<script language="JavaScript">
Webcam.set({
width: 300,
height: 200,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#my_camera');
function take_snapshot() {
Webcam.snap(function(data_uri) {
$(".image-tag").val(data_uri);
document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>';
});
}
</script>
I have tried downloading and replicating the source code from Savani H. (2018)'s article and his code seems to work well. Did I miss anything? Any help/insight would be appreciated.
Reference:
Savani H. (2018)
I had successfully converted html to image using the below code but however font was changing and image is not displaying on image.
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
</head>
<body>
<div id="div_card" style="border-color:grey;border-style:solid;border-width:1px;width:600px; height:450px; padding:15px;margin-left:40px">
<div style="display:inline-block;height:20px;"> <div id="sp_name"> Author:John Michael Smith Junior</div></div><br>
<div style="display:inline-block;height:120px; width: 120px; float:right">
<img src="htmlimage.jpg" style="height:120px; width: 120px"> </div>
<div style="display:inline-block;height:20px;"><div> Published on March 1982 </div></div><br>
<div style="display:inline-block;height:20px;"> <div> Published by: Mark Vin book house</div></div><br>
<div style="display:inline-block;height:20px;"> <div>Last Edition Dec 1999</div></div><br>
<div style="display:inline-block;height:20px;"> <div>Sold Copies: 150000</div></div><br>
</div>
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br />
<div id="previewImage" style="display: none;">
</div>
<script>
$(document).ready(function () {
var element = $("#div_card"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
});
</script>
</body>
</html>
I need to get image without change in font.How can I do that??????
No need canvas is image like
There are many ways to convert a canvas to an image. However why bother as the canvas is image like in its behavior. Just display the canvas as if it were an image.
Contemporary html2canvas usage example, adding captured canvas to page
html2canvas(document.body).then(canvas => document.body.appendChild(canvas));
Using your example
Note security prevents it from working in the SO snippet.
addEventListener("load",() => {
html2canvas(divCard)
.then(can => {
// show result of html2canvas
previewImage.classList.remove("hide");
previewImage.appendChild(can);
// show download link and add data url for download.
downloadLink.classList.remove("hide");
downloadLink.download = "canvasCap.png"; // name the download file
downloadLink.href = can.toDataURL("image/png").replace("data:image/png", "data:application/octet-stream");
})
.catch(error => {
previewImage.textContent = "html2canvas error: " + error.message;
previewImage.classList.remove("hide");
previewImage.classList.add("error");
});
});
* { font-family: arial }
.hide { display: none }
.error {color: red }
.titile {font-size: x-large}
#divCard {
border: 2px solid black;
padding: 4px;
}
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script>
<div id="divCard">
<div class="titile">Author:John Michael Smith Junior</div>
<div>Published on March 1982 </div>
<div>Published by: Mark Vin book house</div>
<div>Last Edition Dec 1999</div>
<div>Sold Copies: 150000</div>
</div>
<h4>HTML2CANVAS result...</h4>
<a id="downloadLink" class="hide">download</a>
<div class="hide" id="previewImage"></div>
BTW Its 2020.. jQuery is slow bloated baggage. Windows ended support for IE <11 on Jan31 this year removing the last argument for jQuery relevance.
This is the solution I came up with. It allows remote and custom fonts to be included properly in the output image. It requires the latest version of Chrome:
Open the HTML page (that you wish to convert to an image) in Chrome.
Right click anywhere in the background of the displayed page, and select "Save As".
In the Save As dialog, select the "Save as type" option for "Webpage, Single file (*.mhtml)", then select the folder and file name you want to save as. This will convert the HTML into MHTML and save it locally. The file size will be huge because it includes all the custom fonts, and potentially static images, in the file.
Go to the command line shell of your local machine and use headless Chrome to take a screenshot of the locally saved .mhtml file as a PNG file.
E.g, if your machine is Windows 10, the locally saved file is "C:\tmp\page.mhtml", and it is a 16x16 image, use:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --headless --disable-gpu --screenshot=C:\tmp\page.png --window-size="16,16" --default-background-color=0 file:///C/tmp/page.mhtml
This will save the top left 16x16 window of your rendered HTML page as a PNG file at: C:\tmp\image.png.
I am using the QRcode.js from https://davidshimjs.github.io/qrcodejs/ and it is working fine on my webpage, But I want to show this Generated qr code in dialog/alert box using java script. Can anyone help me how can I do that?
You can use Bootstrap Modal here. Just put <div id="qrcode"></div> inside modal body, and done.
Here is how to use Bootstrap Modal - Bootstrap Modal
Below code use bootstrap to display the QR Code generated by qrcode.js in a popup box:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<a tabindex="0" role="button" class="btn btn-success" data-toggle="popover" data-trigger="focus" data-placement="bottom" title="QR Code" data-url="https://www.gloomycorner.com">Popover QR Code</a>
<div id="qrcode" style="display:none; width:auto; height:auto;padding:15px;"></div>
</div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 120,
height: 120
});
function makeQrcode(e) {
qrcode.makeCode(e.attr("data-url"));
}
jQuery(document).ready(function() {
jQuery("[data-toggle='popover']").popover(
options = {
content: jQuery("#qrcode"),
html: true // important! popover html content (tag: "#qrcode") which contains an image
}
);
jQuery("[data-toggle='popover']").on("show.bs.popover", function(e) {
makeQrcode(jQuery(this));
jQuery("#qrcode").show();
});
});
</script>
How to generate a qr code and display it in a popup box gives a full example.
Screenshot of the example:
I'm currently upgrading a WYSIWYG Rich Text Editor that was based on the DHTML Editor Control (DEC) to use the more modern editor controls in modern browsers. I'm using an iFrame with design mode turned on and a mixture of regular javascript and jquery.
One of my requirements is to insert html content (forms etc) into the iframe so that users can edit them. I have it working in FF + Chrome, but IE is proving a pain. My current code inserts the content at the start of the parent document and not the iframes, I'm using the selection.createRange() function that when used with DEC would insert the content either at the cursor if the control was selected or at the end of the document inside the editor if not.
Currently it only works when I select some text in IE. Heres my current code (apologies if it looks unformatted the firewall at work is blocking a lot of the css + js from stackoverflow), any ideas?
<html>
<head>
<title>Text Editor Test</title>
<style type="text/css">
.toolbar {background-color:#BFC193;width:500px;padding:5px;}
#insertForm {position: absolute;height:60px;width:200px;top:50px;left:50px;border:1pt solid black;background-color:#fff;padding:10px;}
</style>
</head>
<body>
<h1>MSHTML Text Editor</h1>
<form id="frmEdit">
<div class="toolbar" id="toolbar">
<input type="button" name="insertHTML" value="insert html" onClick="showForm();"/>
</div>
<div id="insertForm" style="display:none;">
Insert Content Form
<input type="button" value="OK" style="width: 80px" onClick="insertContent();">
</div>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
// functions to execute once the DOM has loaded.
$(document).ready(function() {
pageInit();
});
function pageInit() {
// create iframe
$('.toolbar').after("<iframe id='frameEdit' style='width:500px; height:400px' ></iframe>");
//insert delay for firefox + webkit browsers before turning on designMode open + close seems to do the job
document.getElementById('frameEdit').contentWindow.document.open();
document.getElementById('frameEdit').contentWindow.document.close();
document.getElementById('frameEdit').contentWindow.document.designMode='On';
}
function showForm() {
$('#insertForm').toggle();
}
function insertContent() {
// turn off form
showForm();
// set test content
var htmlContent = "<p>Insert Test</p>";
var doc = document.getElementById('frameEdit').contentWindow.document;
if (doc.selection && doc.selection.createRange) { // IE
var range = doc.selection.createRange();
range.pasteHTML(htmlContent);
} else { // FF
doc.execCommand('insertHTML', false, htmlContent);
}
}
</script>
</form>
</body>
</html>
Make your button unselectable to stop it nicking the focus from the iframe. You can do this in IE using uneselectable="on":
<input type="button" value="OK" unselectable="on"
style="width: 80px" onclick="insertContent();">