working with a Lightswitch application and the UI is done in javascript. What I have is a list of attachments, anything from images to pdfs, spreadsheets and regular docs. What I would like to do is separate the images from the rest and wrap them in 'img' tags so they display as images instead of just file attachments.
The postRender function looks like this for my list:
myapp.ViewLesson.LessonAttachments_postRender = function (element, contentItem) {
// Write code here.
var re = /(?:\.([^.]+))?$/;
var ext = re.exec(contentItem.value)[1];
if (ext = "jpg" || "png" || "bmp") {
//wrap each item in '<img>" tags to display them as images
}
};
I tried to filter the extensions by using pieces from this: How to extract extension from filename string in Javascript?
But it's not working
You could consider the approach outlined in this article from the Office Developer folks on MSDN. If you build your app as a Cloud Business App and use SharePoint as your document store, the CBA solution will provide the appropriate file placeholder icon for any content known to SharePoint.
I hope this is useful. :)
Related
I want to display forums inside websites where my javascript (and HTML and CSS) is embedded, but if the javascript is running inside a website builder, I just want to have some text telling the user their forums are installed here (in the embedded DIV) and not try to display any forums. My only idea is to look at the URL and if I see a known website builder, then run the website builder code, but I would need a large list of all website builder URLs. Does anyone have such a list or is there a better solution? My current code looks like this:
var hostURL = window.location.href;
if (hostURL == "about:srcdoc") hostURL = window.parent.location.href;
if (hostURL.indexOf("websites.godaddy.com") > -1 || // godaddy
hostURL.indexOf(".preview.editmysite.com") > -1) { // weebly
displayWebsiteBuilderInfo();
return;
}
Here's what I did, but I'm not sure if it's a good solution (and it's not a solution for the original question):
In the PHP code that handles the request to get the forums data I read the content at the referer URL (comes from the client - window.location.href) to see if the javascript is there. If it's not there, assume the request came from a website builder. Then if isWebsiteBuilder is true back at the client, call displayWebsiteBuilderInfo();
Here's the PHP code:
$siteContent = #file_get_contents($referer);
$siteContent = htmlspecialchars_decode($siteContent);
$idx = strpos($siteContent, "<script async src=\"https://www.bubblecritic.com/js/embed/the_js.js\"></script>");
if ($idx === false) $isWebsiteBuilder = true;
I need to use TinyMCE editor but I also need to be able to edit mathematical equations and formulas. I added the FMath editor plugin in my TinyMCE installation.
Yes it works and I can add equations but the equations are generated img tags with src containing blob:http url which means, the image exists in browser memory and gets deleted once the browser is closed.
Yes there are couple of tricks how to do something with the blob img tag with AJAX, but the problem is, I want to be able to save my edited text plus math equations in database.
I think the best approach is to save the MathML / Latex representation of the equation in database. The obstacle is, FMath editor has poor documentation, so I am not aware how to get this generated MathML / Latex code.
So how can I do that, is there some FMath function, getMathML() code or so...?
The problem is hot to access the plugin API trough TinyMCE?
I have developed custom plugin solution, please take a look:
https://github.com/Axel186/mathsymbols-tinymce-plugin
It uses MathJax to render the font. It's free and has MIT license.
Take a look at my other plugins, you may be interested to generate some charts or graphs by using math functions.
If you were to check the plugin.min.js for FMath in TinyMCE plugins folder, it loads a html page OnlyEditor.html in the iframe created by TinyMCE. This html page contains getter functions like so:
<script type="text/javascript">
var e1 = $("#editor1").mathEditor({ width: 1000, height: 400 }),
mathml = null;
e1.mathEditor("setSaveCallback", clientSaveMethod);
function clientSaveMethod(){
// get info from editor ex: get image
console.dir(e1.mathEditor("getMathML", "UNICODE", "true"));
}
function getMathML(){
return e1.mathEditor("getMathML", "UNICODE", "true");
}
function getBlobOrUrl(returnFunc){
return e1.mathEditor("getBlobOrUrl", returnFunc, "UNICODE", "true");
}
function setMathML(mathml){
e1.mathEditor("setMathML", mathml);
}
function getImage(){
return e1.mathEditor("getImage","png");
}
function getMathMLToLoad(){
return null;
}
// autoload used in tinyMCE editor - do not delete
if (window.parent !== null && window.parent.getMathMLToLoad !== null) {
mathml = window.parent.getMathMLToLoad();
if (mathml !== null) {
e1.mathEditor("setMathML", mathml);
}
}
</script>
So getMathML() returns the raw MathML in xml format. getImage() returns the blob address/data of the generated image. You can also use setMathML(mathml) to set the FMath editor to load your specific formula.
I have written a script that is placed on different websites. It puts some html/css there. I have also written a website that enables to configure this html/css for each website.
That's why the script has to load html/css from the database. And that's why I have to keep javascript inside the database, and then use some eval to fire it from the script.
My question is - how can I keep something like this minified in the database, and then display it nicely formatted in some wysiwyg editor?
Sample text:
var el = document.createElement('body');
el.innerHTML = 'foobar';
document.getElementsByTagName('body')[0].appendChild(el);
This is what I want to get in my wysiwyg editor, but in DB I want this:
var el = document.createElement('body');el.innerHTML = 'foobar';document.getElementsByTagName('body')[0].appendChild(el);
So I have to somehow convert between those two.
I think you can use a regular expressions to do that (if you just want to place all code at the single line into the DB):
To store from the editor to the database do
var codeToDB = WYSIWYG_value.replace(/\r\n|\r|\n/g,"");
To restore from the database
var codeToWYSIWYG = codeFromDB.replace(/;/g,";\n")
I'm using Python markdown with Django. It works perfectly. But static HTML previewer it is not enough for an admin panel. I can't find any dynamic JS markdown previewer (I don't need a full converter). Please, advise a javascript markdown previewer.
You're probably looking for showdown.js
Here's an article about it: Using Showdown with and without jQuery
It boils down to this:
var converter = new Showdown.converter();
var input = $("textarea");
var preview = $("#preview");
$(input).keyup(function() {
preview.html(converter.makeHtml(input.val());
});
As another approach, you can use the free API provided in this page:
https://helloacm.com/markdown/
https://helloacm.com/api/markdown/?cached&s=Markdown rocks!
It will return JSON-encoded data:
"<p>Markdown rocks!<\/p>"
How to tag images in the image itself in a web page?
I know Taggify, but... is there other options?
Orkut also does it to tag people faces... How is it done?
Anyone knows any public framework that is able to do it?
See a sample bellow from Taggify:
I know this isn't javascript but C# 3.0 has an API for doing this. The System.Windows.Media.Imaging namespace has a class called BitmapMetadata which can be used to read and write image metadata (which is stored in the image itself). Here is a method for retrieving the metadata for an image given a file path:
public static BitmapMetadata GetMetaData(string path)
{
using (Stream s = new System.IO.FileStream(path, FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite))
{
var decoder = BitmapDecoder.Create(s, BitmapCreateOptions.None, BitmapCacheOption.OnDemand);
var frame = decoder.Frames.FirstOrDefault();
if (frame != null)
{
return frame.Metadata as BitmapMetadata;
}
return null;
}
}
The BitmapMetadata class has a property for tags as well as other common image metadata. To save metadata back to the image, you can use the InPlaceBitmapMetadataWriter Class.
There's a map tag in HTML that could be used in conjunction with Javascript to 'tag' different parts of an image.
You can see the details here.
I will re-activate this question and help a bit. Currently the only thing i have found about is http://www.sanisoft.com/downloads/imgnotes-0.2/example.html . A jQuery tagging implementation. If anyone knows about another way please tell us.
;)
You can check out Image.InfoCards (IIC) at http://www.imageinfocards.com . With the IIC meta-data utilities you can add meta-data in very user-friendly groups called "cards".
The supplied utilities (including a Java applet) allow you to tag GIF's, JPEG's and PNG's without changing them visually.
IIC is presently proprietary but there are plans to make it an open protocol in Q1 2009.
The difference between IIC and others like IPTC/DIG35/DublinCore/etc is that it is much more consumer-centric and doesn't require a CS degree to understand and use it...