I'm using tinymce which applies inline css for text colour etc. My issue is, if I apply colour change to some text tinymce produces the following:
<p><span style="color: #ff0000;">asdf</span></p>
When I save this reply:
reply = current_user.reply_to_sender(receipt[messageIndex], params[:body])
... and check the database it has:
<p><span>asdf</span></p>
If I simply print params[:body] everything is fine, it's just the result of the save
Am I missing something here. I tried this without tinymce i.e. just put the html directly into a textarea with the same results so it's not tinymce.
Also I have tinymce in other areas of my app and it works fine with the same code
Turns out that it's down to the default behaviour of the reply_to_sender method in Mailboxer where sanitize_text is set to true
(Object) reply_to_sender(receipt, reply_body, subject = nil, sanitize_text = true, attachment = nil)
changing my method call to the following fixed this:
reply = current_user.reply_to_sender(receipt[messageIndex], params[:body], nil, false, nil)
Related
I have two editors on the screen, one read-only. What I want to do is allow the user to select content from the read-only editor and paste it into the current position of the other by clicking a button. (the logic may manipulate the text which is one reason I don't want to use the system's clipboard.)
So far I have the function that is able to paste the text like as follows. (I am using the Angular wrapper which explains the presence of the CKEditorComponent reference.
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.change(writer => {
writer.insertText(pasteEvent.text, editor.model.document.selection.getFirstPosition() );
});
}
What I can't find from the documentation is how to extract the selected text. What I have so far is:
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
const selection = editor.model.document.selection;
console.log('clickPasteAll selection', selection);
console.log('clickPasteAll selectedcontent', editor.model.document.getSelectedContent);
}
The selection appears to change depending on what is selected in the editor's view. The getSelectedContent function is undefined. How do I get the content?
With a bit of poking around I figured out how to do this. I'll document it here on the chance that it will help someone down the road avoid the process of discovery that I went through.
On the source document I have a ckeditor element like this:
<div *ngIf="document">
<ckeditor #ckEditor
[editor]="Editor" [config]="ckconfig" [disabled]="true"
[(ngModel)]="document.text"></ckeditor>
<button mat-flat-button (click)="clickPasteSelectedPlain(ckEditor)">Paste Selected Text Plain</button>
</div>
In the component the function called on the click event is like this:
#Output() paste = new EventEmitter<PasteEvent>();
...
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
this.paste.emit({
content: editor.model.getSelectedContent(editor.model.document.selection),
obj: this.document,
quote: false
});
}
The PasteEvent is defined as an exported interface which I will omit here to save space. The content key will refer to a DocumentFragment.
Note that I am passing the CKEditorComponent as a parameter. You could also access it via an Angular #ViewChild declaration but note that my ckeditor is inside an *ngIf structure. I think that works well in Angular 6 but in the past I have had difficulty with #ViewChild references when the target was conditionally in the DOM. This method always works but use whatever method you want.
The event fired by the emit is processed with a method that looks like this:
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.insertContent(pasteEvent.content);
}
Because the content is a DocumentFragment the paste operation will include all formatting and text attributes contained in the selected source. But that's all there is to it.
Update: I used HtmlView and yes, the height is dynamic with the content,
but it seems like not support <img />
I'm currently using WebView to render the markdown content as below
<WebView :src="marked_content" height="1200px" margin="20dp" />
The result is fixed at 1200px with scrollBar as expected, but what I actually want to do is to render the whole markdown content with various height and without scrollBar.
Anyone may help, please?
PS: Any other methods which may render markdown content is welcome! Thank you!
Do you have control over the website, if Yes you can do this
https://discourse.nativescript.org/t/dynamic-webview-height/4215/2?u=manojdcoder
I have worked out how to do this without plugins.
There is a solution above which appends the URL with a hash containing the page height. It didn't work for me because I'm adding HTML code directly.
For example
src="<p>blah blah</p>"
This is a plain JS solution, so you'll have to rework it to get it working in Vue / Typescript.
Give your WebView an id, do not set the height, and add the "loaded" and "loadFinished" handlers.
For the loaded handler.
platformModule = require("tns-core-modules/platform");
var webViewSrcObj = {};
exports.webViewLoaded = function(webargs){
if(platformModule.isAndroid){console.log("IS ANDROID!!!"); return false;}
webview = webargs.object;
if(webview.height == "auto"){
webViewSrcObj[webview.id] = webview.src;
webview.src += '<script>function getPageHeight(){if(document.documentElement.clientHeight>document.body.clientHeight){height = document.documentElement.clientHeight}else{height = document.body.clientHeight}; ph = document.getElementById("pageHeight"); window.location = "pageHeight.html?height="+height;} setTimeout(getPageHeight, 1);</script>';
}
}
It checks the platform, and returns false if it is Android (Android works fine already).
Then it checks if the height is set to "auto" (which is default).
if it is set to auto, it will copy the HTML content. I'll explain more about this later. It then appends the html with some JavaScript code that calculates the view height, and then redirects to an empty page. It does this in order to use the query string for the page height. Make sure that page exists in your app folder to avoid any page not found errors!
Then for the onLoadeFinished handler...
exports.webViewLoadFinished = function(webargs){
if(platformModule.isAndroid){
console.log("IS ANDROID!!!"); return false;
}
webview = webargs.object;
if(webargs.url.indexOf("?height") > -1){
height = (webargs.url).split("?height=");
height = height[1].substr(0, height[1].length)/1;
webview.height = height; webview.src = webViewSrcObj[webview.id];
}
}
This will check to see if the query string height value exists.
If so it uses the height value to set the height of the webview.
And finally it adds the HTML content that was copied in the onLoaded handler.
My initial testing works well even with multiple webviews in a page.
I haven’t done extensive testing, but it might help to increase the setTimeout time if you experience any problems.
If anyone is able to improve this solution, please share your results.
I have a <div id="tguide"> that I use as a place holder. I was told iframes are inferior to jquery load. So this is what I have:`$(window).on('load resize',function(e){
var transferguidelocation = "../"
var title = $(document).attr('title');
if(title == 'System Manuals') {
var transferguidelocation = "../SystemManuals/"
};
document.getElementById("tguide").innerHTML='<object type="text/html" data="' + transferguidelocation + 'shared/TransferGuide.html" style="width:100%;height:100%;"></object>';
As you can first it checks to see which page it's on, then it adds an extra folder location to the TransferGuide.html location.
The file loads into the <div> no problem, it looks exactly the way I want it to and data is correct, the problem is that I'm getting the below error in the browser inspector:
It's a bit annoying and I'm not a fan of the errors. Does anyone know how I can get rid of this?
I figured it out. I was referencing my custom.js file before the js.min file, so it didn't recognize it. I just reversed the two and the error went away
I need to create various reports in PDF format and email it to specific person. I managed to load HTML template into string and am replacing certain "custom markers" with real data. At the end I have a fulle viewable HTML file. This file must now be printed into PDF format which I am able todo after following this link : https://www.appcoda.com/pdf-generation-ios/. My problem is that I do not understand how to determine the number of pages from the HTML file as the pdf renderer requires creating page-by-page.
I know this is an old thread, I would like to leave this answer here. I also used the same tutorial you've mention and here's what I did to make multiple pages. Just modify the drawPDFUsingPrintPageRenderer method like this:
func drawPDFUsingPrintPageRenderer(printPageRenderer: UIPrintPageRenderer) -> NSData! {
let data = NSMutableData()
UIGraphicsBeginPDFContextToData(data, CGRect.zero, nil)
printPageRenderer.prepare(forDrawingPages: NSMakeRange(0, printPageRenderer.numberOfPages))
let bounds = UIGraphicsGetPDFContextBounds()
for i in 0...(printPageRenderer.numberOfPages - 1) {
UIGraphicsBeginPDFPage()
printPageRenderer.drawPage(at: i, in: bounds)
}
UIGraphicsEndPDFContext()
return data
}
In your custom PrintPageRenderer you can access the numberOfPages to have the total count of the pages
is there a way to change stylesheet file dynamically depending on if the document is in edit or read mode?
What I would like to do is to add the following code to the "compute value" option of the resource href property:
if(document.isEditable()){
return "style_edit.css"
}
else{
return "style_read.css"
}
My main problem with this is that when the page loads, it gives the error "document not found". This is probably because when the page loads, there is only a view that includes the documents and when the user clicks a document id, then the custom control with the binded document appears. I don't know how to make the binded to custom control document available on load of the page.
Edited:
I tried a try/catch block and now the xpage opens without displaying an error. But although the custom control is refreshed, the css file does not change, althoug I use compute dynamically and not compute on load
Thank you in advance!
You can set the resource href attribute as computed. For this go to All Properties of XPage "basics > resources > styleSheet". Here you can compute the href attribute with your JavaScript code. So your resource in XPage source would look something like this
<xp:this.resources>
<xp:styleSheet>
<xp:this.href><![CDATA[#{javascript:if (document.isEditable()) {
return "style_edit.css";
} else {
return "style_read.css";
}}]]></xp:this.href>
</xp:styleSheet>
</xp:this.resources>
To access the data source from custom control you can use the global variable currentDocument instead of document.
Why force user to download separate files on edition when You can simply add computed styleClass to some panel/component:
<xp:panel>
<xp:this.styleClass><![CDATA[#{javascript:return document.isEditable()?"docEditMode":"docReadMode";}]]></xp:this.styleClass>
</xp:panel>
and use it as a selector inside style.css