I have a radeditor,in that i have spans and a background image.I have some html input textboxes,on text changed of the textboxes,i'm binding the text to particular spans like:
<script>
function txtTitlechanged(x) {
var y = document.getElementById(x).value
var editor = $find("<%=RadEditor1.ClientID %>");
var oDocument = editor.get_document()
var img = oDocument.getElementById('span1');
if (y == '') {
img.innerHTML = 'UserName';
}
else {
img.innerHTML = y;
}
}
</script>
<input type='text' onchage="txtTitlechanged" />
Here i want that radeditor content as an image,i'm getting the radeditor content as html,but i want as it as an image.
You could search for a third party HTMLtoImage or XHTMLtoImage convertor and provide the generated content to it
OR
export the content to PDF using the built-in PDF exporting feature of RadEditor: http://demos.telerik.com/aspnet-ajax/editor/examples/pdfexport/defaultcs.aspx
Related
I'd like to use fontawesome icons in SVG scope. I cannot achieve it in common way, but I can add <text> element containing corresponding UTF-8 char and with font set to fontawesome, like that:
<text style="font-family: FontAwesome;">\uf0ac</text>
To make it clear I wrote a switch for getting useful icons:
getFontAwesomeIcon(name) {
switch (name) {
case 'fa-globe':
return '\uf0ac'
case 'fa-lock':
return '\uf023'
case 'fa-users':
return '\uf0c0'
case 'fa-ellipsis-h':
return '\uf141'
default:
throw '# Wrong fontawesome icon name.'
}
}
But of course that's ugly, because I must write it myself im my code. How can I get these values just from fontawesome library?
You can avoid producing such a list and extract the information from the font-awesome stylesheet on the fly. Include the stylesheet and set the classes like usual, i. e.
<tspan class="fa fa-globe"></tspan>
and you can do the following:
var icons = document.querySelectorAll(".fa");
var stylesheet = Array.from(document.styleSheets).find(function (s) {
return s.href.endsWith("font-awesome.css");
});
var rules = Array.from(stylesheet.cssRules);
icons.forEach(function (icon) {
// extract the class name for the icon
var name = Array.from(icon.classList).find(function (c) {
return c.startsWith('fa-');
});
// get the ::before styles for that class
var style = rules.find(function (r) {
return r.selectorText && r.selectorText.endsWith(name + "::before");
}).style;
// insert the content into the element
// style.content returns '"\uf0ac"'
icon.textContent = style.content.substr(1,1);
});
My two answers for two approaches to the problem (both developed thanks to ccprog):
1. Setting char by class definition:
In that approach we can define element that way:
<text class="fa fa-globe"></text>
And next run that code:
var icons = document.querySelectorAll("text.fa");
// I want to modify only icons in SVG text elements
var stylesheets = Array.from(document.styleSheets);
// In my project FontAwesome styles are compiled with other file,
// so I search for rules in all CSS files
// Getting rules from stylesheets is slightly more complicated:
var rules = stylesheets.map(function(ss) {
return ss && ss.cssRules ? Array.from(ss.cssRules) : [];
})
rules = [].concat.apply([], rules);
// Rest the same:
icons.forEach(function (icon) {
var name = Array.from(icon.classList).find(function (c) {
return c.startsWith('fa-');
});
var style = rules.find(function (r) {
return r.selectorText && r.selectorText.endsWith(name + "::before");
}).style;
icon.textContent = style.content.substr(1,1);
});
But I had some problems with that approach, so I developed the second one.
2. Getting char with function:
const getFontAwesomeIconChar = (name) => {
var stylesheets = Array.from(document.styleSheets);
var rules = stylesheets.map(function(ss) {
return ss && ss.cssRules ? Array.from(ss.cssRules) : [];
})
rules = [].concat.apply([], rules);
var style = rules.find(function (r) {
return r.selectorText && r.selectorText.endsWith(name + "::before");
}).style;
return style.content.substr(1,1);
}
Having that funcion defined we can do something like this (example with React syntax):
<text>{getFontAwesomeIconChar('fa-globe')}</text>
I am having trouble rendering non-english characters in a pdf that gets generated as a blob using node.js and displayed in an iframe element.
First line and client Name is supposed to be cyrillic characters I am using fluentreports which mentions nothing about the character set that it can handle. Here is the code that receives the blob from my server.
if (xhr.status === 200) {
var file = new Blob([xhr.response], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
this.setState({
pdf: fileURL
})
}
});
xhr.send(formDataString);
}
render() {
return (
<div>
<div style = {{ margin: '0'}} className = "container">
<div className= "jumbotron">
{this.state.form ? <DateForm onChange = {this.handleChange} onChange2 = {this.handleChange2} onSubmit = {this.onSubmit} date1 = {this.state.date1} date2 = {this.state.date2}/> : null}
{this.state.pdf? <iframe style = {{width:"100%" ,height: "800"}} src = {this.state.pdf}> </iframe> : null}
</div>
</div>
</div>
);
}
To answer my own question and hopefully help someone else. Fluentreports allows to register fonts. I am generating my pdf on the server side so here is what needs to be done. Download Arial Unicode MS and from a static point, serve it to the location where you render your report as follows.
// Create a Report
var rpt = new Report(res,({fontSize: 10,font: 'Bulgarian'}))
.titleHeader(hh)
.margins(40)
.data( {}) // Add some Data (This is required)
rpt.registerFont("Bulgarian", {normal: './server/static/ARIALUNI.ttf'});
I have a MathJax demo that can be viewed at Online Demo.
In this demo, I have some Tex markup within a div that gets rendered perfectly by MathJax.
But, if I programatically add some Tex markup to the above div by clicking Add Math Markup button followed by clicking Rerender Math Markup button, then it results in repeated rendering of previously rendered Math markup. This can be seen in following video: Math being rendered repeatedly
All I am doing when Rerender Math Markup button is clicked is calling the following method MathJax.Hub.Typset(divElement). The divElement is the div to which Tex markup was added programatically.
Demo code for my situation
<script>
function reRenderMath() {
var div = document.getElementById("mathMarkup");
//render Math for newly added Tex markup
MathJax.Hub.Typeset(div);
}
function addMath() {
var div = document.getElementById("mathMarkup");
div.innerHTML = div.innerHTML + "$$\sin^{-1}.6$$";
document.getElementById("btnRenderMath").disabled = false;
}
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<button type="button" onclick="addMath();return false;" id="btnAddMath" >Add Math Markup</button>
<button type="button" onclick="reRenderMath();return false;" id="btnRenderMath" disabled>Rerender Math Markup</button>
<div id="mathMarkup">
$$x^2 = x +2$$
</div>
Screen shot of repeated rendering
#Sunil thanks for the answer
Summarizing:
Required script:
var MathJaxUtils = (function () {
let obj = {};
let scripts = null;
obj.render = function (element) {
scripts = new Array();
$(element).find("script[id^='MathJax-Element']").each(function () {
scripts.push({
displayElement: $(this).prev("div")[0],
scriptElement: this
});
});
//remove all html within MathJax script tags so it doesn't get typset again when Typeset method is called
$(element).find("script[id^='MathJax-Element']").remove();
//render Math using original MathJax API and in callback re-insert the MathJax script elements in their original positions
MathJax.Hub.Queue(["Typeset", MathJax.Hub, element, typeSetDone]);
};
//callback for Typeset method
function typeSetDone() {
for (var i = 0; i < scripts.length; i++) {
$(scripts[i].displayElement).after(scripts[i].scriptElement);
}
//reset scripts variable
scripts = [];
};
return obj;
}());
Basic use:
let elem = document.getElementById("mathContainer");
MathJaxUtils.render(elem);
Demo:
math-jax-test
I want to use the file input feature of LTSpice to simulate a circuit using a real world bit of audio. I need the data in a time vs amplitude version but not sure which software package can do this for me. Audacity can convert the MP3 to WAV but from what I see can't do it to a headerless text file.
So a .WAV file to a two column text file of time/amplitude.
Any ideas for a free way of doing it?
Here's a quick'n'nasty implementation using javascript.
I'll leave it as an exercise to convert the result string to a Blob which can be easily downloaded, as will I leave channel selection, stereo results and the ability to select a small portion of the audio track for processing.
<!doctype html>
<html>
<head>
<script>
"use strict";
function byId(id){return document.getElementById(id)}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);
var audioCtx;
function onDocLoaded(evt)
{
audioCtx = new AudioContext();
byId('fileInput').addEventListener('change', onFileInputChangedGeneric, false);
}
function onFileInputChangedGeneric(evt)
{
// load file if chosen
if (this.files.length != 0)
{
var fileObj = this.files[0];
loadAndTabulateAudioFile( fileObj, byId('output') );
}
// clear output otherwise
else
byId('output').textContent = '';
}
// processes channel 0 only
//
// creates a string that represents a 2 column table, where each row contains the time and amplitude of a sample
// columns are tab seperated
function loadAndTabulateAudioFile( fileObj, tgtElement )
{
var a = new FileReader();
a.onload = loadedCallback;
a.readAsArrayBuffer( fileObj );
function loadedCallback(evt)
{
audioCtx.decodeAudioData(evt.target.result, onDataDecoded);
}
function onDataDecoded(buffer)
{
//console.log(buffer);
var leftChannel = buffer.getChannelData(0);
//var rightChannel = buffer.getChannelData(1);
console.log("# samples: " + buffer.length);
console.log(buffer);
var result = '';
var i, n = buffer.length, invSampleRate = 1.0 / buffer.sampleRate;
for (i=0; i<n; i++)
{
var curResult = (invSampleRate*i).toFixed(8) + "\t" + leftChannel[i] + "\n";
result += curResult;
}
tgtElement.textContent = result;
}
}
</script>
<style>
</style>
</head>
<body>
<label>Select audio file: <input type='file' id='fileInput'/></label>
<hr>
<pre id='output'></pre>
</body>
</html>
In my application i am using liferay-ui:input-editor .I want to get the value of input editor to a javascript variable, How to achieve that?? I have tried
<liferay-ui:input-editor />
<input name="<portlet:namespace />htmlCodeFromEditorPlacedHere" type="hidden" value="" />
function createPopUp(){
var url ="<%=fetchCandidateByIdForPhoneURL%>";
var type= "fetchCandidateInfo";
var candidateId = $('#candidateID').val();
var jobId = $('#JobList').val();
var text1 = $('#text1').val();
var text2 = $('#text2').val();
var text3 = $('#text3').val();
var interviewVenue = $('#interviewVenue').val();
var interviewCC = $('#interviewCC').val();
var interviewBCC =$('#interviewBCC').val();
var startDate = $('#start-date').val();
var interviewType = $('#interviewType').val();
var x ;
function <portlet:namespace />initEditor() {
return '<font style="font-weight: bold">scott was here</font>';
}
function <portlet:namespace />extractCodeFromEditor() {
var x = document.<portlet:namespace />fm.<portlet:namespace />htmlCodeFromEditorPlacedHere.value = window.<portlet:namespace />editor.getHTML();
alert(x);
}
But it is showing that
ReferenceError: _InterviewSchedule_WAR_InterviewScheduleportlet_initEditor is not defined error. How to resolve it and get the value in a javascript variable
Given the information provided in question, it seems that the javascript initialization function is missing for <liferay-ui:input-editor />. As pointed out in the tutorial here, which OP seems to be using (juding by variable names):
By default, the editor will call "initEditor()" to try and pre-populate the body of the editor. In this example, when the editor loads, it will have the value of "scott was here" in bold.
(...)
function <portlet:namespace />initEditor() {
return '<font style="font-weight: bold">scott was here</font>';
}
By default, the ck editor that Liferay uses will try to call the initEditor() javascript method to try and pre-populate the contents of the editor.
Therefore, you should define such a method, even if you return a blank string.
An example is given below:
<aui:script>
function <portlet:namespace />initEditor() {
return "<%= content %>";
}
</aui:script>
, where content is the string variable with the content you want to pass in when the editor is loaded. If you do not want to pass initial content then simply pass a black string.