I am using jsPDF to convert an HTML string to PDF page using documentation here, it says "HTML element or string contatining HTML" :
http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html#~html
But rendered PDF does not contain anything somehow :
var doc = new jsPDF();
doc.html("<html><body style=" +'"background-color:ffffff;"' +"<div align=center><table width=600 border=0 style=background-color:#ffffff><tr><td><table width=120 border=0 align=right>"
+ "<tr><td width=30></td><td width=10>textetext</td><td width=30></td><td width=10></td><td width=30></td></tr></table></td></tr></div></body></html>", {
callback: function (doc) {
doc.save();
}
});
What am i doing wrong ? It is wrong usage of jsPDF functions with html string ? I just need to use it to make proof of concept for a requirement if it can be done or not, i know that this is not a good usage of pdf rendering here.
Thanks for your answers in advance.
My question is not valid anymore, i've changed the library that i have used to create pdf which is more easily maintained on client side which is "pdfmake" (fully text managed by margin management) :
http://pdfmake.org/playground.html
Hope that it could help anybody that visit that page.
Related
I have Visual Studio 2012 Express installed in Windows 8.1 OS and using CKEditor in my project as per requirement.
I am new for CKEditor and using it in a proper way as well but the problem is by defining the html in source in CKEditor it replaces automatically
<div><i class="classname"></i></div>
with
<div> </div> or <div></div>
So How to prevent CKEditor not to replace it and save as it is?
I have got some solution but still little bit error I am replacing
<i class="classname"></i>
with
<div class="classname"></div>
but in between the tag it automatically add  .
How to prevent it to not add  ?
Here in below image is CKEditor is open and you can see in rounded area it automatically adds some space or tab in my code.
How to stop that?
Have a look at this Post:
CKEditor unwanted characters
After some research I might shed some light on this issue -
unfortunately there is no out-of-the-box solution.
In the CKEditor there are four ways a no-break space can occur (anybody knows more?):
Automatic filling of empty blocks. This can be disabled in the config:
config.fillEmptyBlocks = false;
Automatic insertion when pressing TAB-key. This can be diabled in the config:
config.tabSpaces = 0;
Converting double spaces to SPACE+NBSP. This is a browser behavior and will thus not be fixed by the CKEditor team. It could be fixed
serverside or by a clientside javascript onunload. Maybe this php is a
start:
preg_replace('/\s \s/i', ' ', $text);
By copy&paste. If you paste a UTF-8 no-break space or double-spaces CKEditor will convert it automatically. The only
solution I see here is doing a regex as above.
config.forcePasteAsPlainText = true; doesn't help.
Summary: To get rid of all no-break spaces you need to write an
additional function that cleans user input.
Comments and further suggestions are greatly appreciated! (I'm using ckeditor
3.6.4)
EDIT #1
Have a look at this.
CKEDITOR.dtd.$removeEmpty.i= 0;
You can also can use this with span and other tags.
The documentation to this.
Stop Removing ANY Empty Tag in CKEditor
There is a defined list of tags that is going to be removed if
empty(see dtd.js and $removeEmpty or run CKEDITOR.dtd.$removeEmpty
from console).
From HTmL
To ensure the certain empty tag are not being removed, add attribute
‘data-cke-survive’:
<span data-cke-survive="true" ></span>
From Configurations
Or you can configure the particular tag from not be removed:
if(window.CKEDITOR){
CKEDITOR.on('instanceCreated', function (ev) {
CKEDITOR.dtd.$removeEmpty['span'] = 0;
CKEDITOR.dtd.$removeEmpty['TAG-NAME'] = 0;
}
}
By setting an element to 0 in the CKEDITOR.dtd.$removeEmpty, it
prevents the empty tags from being removed by CKEditor.
http://margotskapacs.com/
This topic can be helpfull https://stackoverflow.com/
In short- You can disable Automatic filling of empty blocks in the config:
config.fillEmptyBlocks = false;
more information- here
UPD.
You can try this config.protectedSource.push(/<i[^>]*><\/i>/g);
From official documentation
{Array} CKEDITOR.config.protectedSource Since: 3.0
List of regular expressions to be executed on input HTML, indicating HTML source code that when matched, must not be available in the WYSIWYG mode for editing.
config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP code
config.protectedSource.push( /<%[\s\S]*?%>/g ); // ASP code
config.protectedSource.push( /(]+>[\s|\S]*?</asp:[^>]+>)|(]+/>)/gi ); // ASP.Net code
UPD 2
Hope this will help.
CKEDITOR.on( 'instanceReady', function( ev )
{
// turn off excess line breaks in html output formatting for blockquote tag.
// In same way you can correct any tag output formating
ev.editor.dataProcessor.writer.setRules( 'blockquote',
{
indent : false,
breakBeforeOpen : false,
breakAfterOpen : false,
breakBeforeClose : false,
breakAfterClose : true
});
});
For the one who are using UniSharp/laravel-ckeditor
<script>
var options = {
fillEmptyBlocks: false,
};
CKEDITOR.replace( 'content', options);
</script>
We have a component that contains a background image. Our front-end guy needs it to be loaded through CSS (i.e. background: url(/*path here*/)...). The following is a possible solution we came up with:
#string src = // Get image path from Sitecore().Field("Picture");
<div style="background: url(#src) left top no-repeat;"> ... </div>
However, there are two problems with this approach:
It makes it very difficult for the content editor to swap out the image. They will have to manually change it through edit item.
It feels like a hack/workaround.
So the question is as follows: Is there a way to edit the CSS of an element through Razor/Sitecore? Specifically, the background: field.
I had a similar case and I used :
<footer class="layout_footer" style="background-color: #Model.BackgroundColor">
on view rendering (cshtml file)
And on the model we have :
public string BackgroundColor
{
get
{
Sitecore.Data.Fields.ImageField imgField =((Sitecore.Data.Fields.ImageField)item.Fields["BackgroundImage"]);
return Sitecore.Resources.Media.MediaManager.GetMediaUrl(imgField.MediaItem);
}
}
For editing this field in page editor you can use Sitecore Field Editor from a command : http://blog.istern.dk/2012/05/21/running-sitecore-field-editor-from-a-command/
Check for edit mode, and display in edit mode a editable field. Also create a Custom Experience Button from the Field Editor Button Type. You can also display. See User friendly developing with the Sitecore Experience Editor
#string src = // Get image path from Sitecore().Field("Picture");
<div style="background: url(#src) left top no-repeat;">
#if (IsInEditingMode)
{
<h3>Backgroiund Picture: #Editable(m => m.Picture)</h3>
}
</div>
There is no Sitecore extension method which will do this out of the box (i.e. #Html.Sitecore().Field("fieldName") will not work here as it would render the entire image tag (also a load of other non-image markup in page editor mode) as you probably know.
The method that #sitecore climber mentions is useful for controller renderings (or view renderings with a custom RenderingModel). If you want to stick with simple view renderings (i.e. not create a RenderingModel) then you could create a Html extension method which can be re-used on any view rendering. This could be something like the following:
public string ImageFieldSrc(this SitecoreHelper sitecoreHelper, string fieldName, Item item = null)
{
if (item == null) {
item = sitecoreHelper.CurrentItem;
}
var imageField = new ImageField(item.Fields[fieldName]);
var mediaItem = imageField.MediaItem;
var mediaUrl = MediaManager.GetMediaUrl(mediaItem);
mediaUrl = HashingUtils.ProtectAssetUrl(mediaUrl); //if you want to use media request protection (adding the hash onto the end of the URL, use this line
return mediaUrl;
}
It's worth noting that if you are using Sitecore 7.5 or above there is a feature to protect media URLs with a hash to prevent malicious DoS type attacks described in this blog post by Adam Najmanowicz.
In summary; if you are using Sitecore 7.5+ and you use media hashing then you will need to call HashingUtils.ProtectAssetUrl on the media URL if it is to respect size parameters.
i am trying to put context path for an image in HTML.<img src="/MyWeb/images/pageSetup.gif">
Here /MyWeb is the ContextPath which is hardcoded. How can i get dynamically.
i am using as <img src=contextPath+"/images/pageSetup.gif">but image is not displaying. Is there any option.
First of all, "Context path" is a term which is typically used in JSP/Servlet web applications, but you didn't mention anything about it. Your question history however confirms that you're using JSP/Servlet. In the future, you should be telling and tagging what server side language you're using, because "plain HTML" doesn't have a concept of "variables" and "dynamic generation" at all. It are server side languages like JSP which have the capability of maintaining and accessing variables and dyamically generating HTML. JavaScript can be used, but it has its limitations as it runs in webbrowser, not in webserver.
The question as you initially have will only confuse answerers and yield completly unexpected answers. With question tags you reach a specific target group. If you use alone the [html] tag, you will get answers which assume that you're using pure/plain HTML without any server side language.
Back to your question: you can use ${pageContext.request.contextPath} for this.
<img src="${pageContext.request.contextPath}/images/pageSetup.gif">
See also:
How to use relative paths without including the context root name?
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
You can't write JavaScript in the src attribute. To do what you want, try some code like this:
var img = new Image();
img.src = contextPath + "/images/pageSetup.gif";
document.getElementById('display').appendChild(img);
Here the target; the place where you want to display the image, is a div or span, with the id display.
Demo
With HTML, you'll have to take some extra traffic of producing an error, so you can replace the image, or you can send some traffic Google's way. Please do not use this:
<img src='notAnImage' onerror='this.src= contextPath + "/images/pageSetup.gif" '>
Demo
Do not use this.
You must use JavaScript for this.
First, have all images point to some dummy empty image on your domain while putting the real path as custom attribute:
<img src="empty.gif" real_src="/images/pageSetup.gif" />
Now have such JavaScript code in place to iterate over all the images and change their source to use the context path:
var contextPath = "/MyRealWeb";
window.onload = function() {
var images = document.getElementByTagName("img");
for (var i = 0; i < images.length; i++) {
var image = images[i];
var realSource = image.getAttribute("real_src") || "";
if (realSource.length > 0)
image.src = contextPath + realSource;
}
};
First thanks for the awesome charts - they are simple and i am trying them out for a friends website.
A brief abt the site -it is a stock market related website trying to show a index from Bombay Stock Exchange in detail. Doing it for a friend basically for free.
The site is in wordpress and use wp exec php for inserting php into posts etc. I am trying to insert the chart html code inside php - since I get a variable data through php from a url and on the fly i define it into a csv - field like - echo $mycsvfile[49][0]; which out puts a value from 49th row 0 coloum.
So if the php ends the temp values are lost so basicallt what i have to do is - get both the java script and also html div into the php.
what i tried first was to get the div only into php to sse the default output - but the output is coming as - base64 code - ie numericals etc. I dont know how to output that into image and embed into the page - inside php.
The link being - http://www.shariah50.net/live-stock-price-quotes-shariah-index-bse/
Trying to display two images- inside php and another one pure html as u had given.
pls guide
how to output that into php and get an image
how to code the javascript into php - since i need to pass variables into the javascript.
Two ideas i had - dont know how good they are - is it ok to convert the canvas element into a jpeg or png, and secondly - can we convert the in page javascript into a php query...
Waiting for ur reply - tried to find a solution for it but couldnt online ...
What code i am using is basically below -
echo ' ';
echo ' ';
echo ' Your web-browser does not support the HTML 5 canvas element.';
echo ' ';
echo ' ';
?>
.chart_container{ text-align: center; width: 400px; height: 400px; margin: 0px 25px; float: right; }
<div class="chart_container">
<canvas id="chartCanvas11" width="400px" height="400px" float="right";>
Your web-browser does not support the HTML 5 canvas element.
</canvas>
</div>
<script type="application/javascript">
var chart11 = new AwesomeChart('chartCanvas11');
chart11.chartType = "horizontal bars";
chart11.title = "Charts";
chart11.data = [-12.62,13.3,10.06,4.27,1.96,0.78];
chart11.labels = ['IE','Firefox','Chrome','Safari','Opera','Other'];
chart11.colors = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8'];
chart11.randomColors = true;
chart11.draw();
</script>
Ok, the basic flow is:
Create an Image element that has the base64 image string as src value. Example: <img src="data:image/png;base64,iVBORw0KG...
I don't really understand your question and how it is related to html5, but "putting javascript into php code" is the same as "putting html into php code".
I have a scenario that I get an string with html data, this is not just html data it's an email (outlook) saved as an html file and dropped in the string.
Now this string needs to be formatted to an html document and should be a clickable link in a datagrid. So when I click on the link, the HTML document should pop-up and should gave me a nice HTML page that is readable for the normal users. I hope it's a bit clear what I want o_0.
I don't know where to start.
You can download the example html from here: http://www.mediafire.com/?b2gfwymw70ynxir
Thanks!
---edit
Hopefully I can explain it a little bit better. I need to create an link and when they click on it they get an HTML page.
The string variable has HTML data in it, to be precise, the source data of the HTML example above.
example:
public var html:String = source_code_of_example_file;
The entire source code of the HTML page is in my variable html. Now I need to make this an link and when they click on it, they will get the html page (as pop-up) on the fly.
You can use the htmlText property and then specify a CSS to perform the proper formatting:
<mx:TextArea id="resourceText" height="100%" width="100%"
styleName="resourceText" editable="false"
styleSheet="{resourceStyleSheet}" htmlText="{html}"/>
To read in the style sheet I declare it in the model:
public var resourceStyleSheet : StyleSheet;
It gets read in from an external file:
private function loadCSS():void {
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, cssCompleteHandler);
urlLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
try {
urlLoader.load(new URLRequest("folder/base-html.css"));
} catch (error:Error) {
Alert.show("Unable to load requested document.");
}
}
private function cssCompleteHandler(event:Event):void {
// Convert text to style sheet.
var styleSheet:StyleSheet = new StyleSheet();
styleSheet.parseCSS(URLLoader(event.currentTarget).data);
// Set the style sheet.
model.resourceStyleSheet = styleSheet;
}
private function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}
This will get it into the model, but then make sure resourceStyleSheet is bindable when you use it (I actually set a bindable variable on the view that I set to the model value.
It's not really clear what you want to do.
If your problem is you need to show HTML formatted text in flex there is a component which can do this
http://code.google.com/p/flex-iframe/
-- update after edit
If your intention is to open a html popup once the user clicks on the link you could use ExternalInterface to call a javascript function to do this.
Hope it Helps
There is no easy way to display HTML in a flex web application(this is a web application, right?). Like Xavi Colomer said you can use the Flex Iframe but is terribly slow, it requires you to change the display mode for your swf to opaque and this can cause more problems, depending on your application.
You could open a new page in the browser that will be used to display the HTML. Something like:
http://www.yourcooldomain.com/bla/displayTheHtml.php?oneTimeId=jhsfg765437gro734
More info on how to do this from flex here.
On the other side(server) I assume that you keep this html messages on a database(?) so displaying them using php(or whatever you are using :P) should be easy.
If you are gonna choose this path be careful about the security: oneTimeId in
displayTheHtml.php?oneTimeId=jhsfg765437gro734
should really be an one tyme only id.