How to view ckeditor content as html in new modal window when a button is clicked which is placed beside the editor.
below is the html
<img src="Image/icons/preview.png" alt="Preview" id="img1" class="preview" />
<textarea rows="30" cols="22" id="txtHtmlHead" class="editor"></textarea>
The above textarea behaves as a ckeditor .
Please help me..
You can use window.open() with a tricky url to do that (fiddle):
CKEDITOR.replace( 'editor', {
plugins: 'sourcearea,wysiwygarea,toolbar,basicstyles',
height: 100
} );
// Executen on button click.
function show() {
var url = 'javascript:void( function(){' +
'document.open();' +
// Note that you may need to escape HTML entities here:
'document.write( "' + CKEDITOR.instances.editor.getData() + '" );' +
'document.close();' +
'})()';
window.open( url );
}
Such feature is also provided by the official Preview plugin so you might find it interesting.
Related
I have a script that opens a UI which is used to open another spreadsheet
When I click to open the link I would like the UI to close automatically if possible.
function ServiceSetServiceSheets(){
var html = "<a href='https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxx'; target='_blank'>Open The Service Sheet</a>";
var anchor = HtmlService.createHtmlOutput(html).setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(60).setWidth(150);
SpreadsheetApp.getUi().showModalDialog(anchor,"Click the link to")
}
Can anyone help please?
In your situation, how about using google.script.host.close() as follows? Please modify your script as follows.
From:
var html = "<a href='https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxx'; target='_blank'>サービス シートを開く";
To:
var html = "<a href='https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxx'; target='_blank' onclick='google.script.host.close()'>サービス シートを開く";
By this modification, when you click the link, the dialog is closed by google.script.host.close().
Example:
Execute launchClickAndClose();
function launchClickAndClose() {
let html = '<!DOCTYPE html><html><head><base target="_top"></head><body>';
html += '<input type="button" value="Doit" onClick="doSomething();" />';
html += '<script>function doSomething(){google.script.run.withSuccessHandler(() => {google.script.host.close()}).doitontheserver();}</script>'
html += '</body></html>';
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Close Automatically")
}
function doitontheserver() {
const ss = SpreadsheetApp.getActive();
ss.toast("Doing it");
return;
}
So let's say that I have the following source in the CKEditor:
<p>This is my <b>description</b> content.</p>
When this is saved. I know that it will go into a content block on my web site, something like the following:
<html>
<head>
<link href="//styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">
<div id="heading">{{ heading }}</div>
<div id="description">{{ description }}</div>
</div>
</body>
</html>
And let's say that the file styles.css has the following rule:
#description p {
text-indent: 15px;
}
#description b {
font-size: larger;
}
What I would like to do is to be able to see, as I'm typing, what things are going to look like on the site. Now I'm sure this could be done piecemeal by inserting these styles into the editor manually, but that's not going to work, as our site styles are considerably more complex and vary depending on which site we are on. What I need to be able to do is surround what's in the editor with the tags below, so that what's in the CSS file will naturally take effect in the editor display, giving our editors a realistic expectation of what they will see once their stories are up on the site.
In short, I need something like this:
cke.before_code = '<html><head><link href="//styles.css" rel="stylesheet" type="text/css"></head><body><div id="content"><div id="description">';
cke.after_code = '</div></div></body></html>';
And then I would expect the output that would be seen to be this:
before_code + "whatever the editor is typing presently" + after_code
Hopefully all that's clear. If anyone has any tips as to how this might be accomplished, would much appreciate any pointers.
I was not able to find a way to integrate html / styling in the way that I had asked for above. And given the radio silence on this issue, I suspect that what I've asked for here may not be possible. I did, however, figure out a way to achieve the next best thing using the preview button. Depending on the item our editors are editing, clicking the preview button will now show an instant preview for that particular item, styled as if it were live on our sites. Here's a step-by-step for those interested.
First, assume we have the following to start:
CKEDITOR.replace('editor', config);
Second, We'll want to add the following to the config and place it before the line above so that the event is registered to the editor:
Object.assign(config, {
on: {
contentPreview: function(e) {
let match = e.data.dataValue.match(/<body[^>]*>((?:.|\s)*)<\/body>/),
before = '' +
'<html>' +
'<head>' +
'</head>' +
'<body>',
content = match[1],
after = '' +
'</body>' +
'</html>;
e.data.dataValue = before + content + after;
}
}
});
content will now contain whatever the user has entered in the editor. And by adding before, content, and after together, we end up with the web page that will be presented in the preview. Only now, the page is under our control, and we can make adjustments based on what page the editor is viewing, other fields on the page, and so on, and we can add in links to our site's live styles.
Let's say that I now want to add in Bootstrap and a link to my site's styling. And let's say I want to surround content with one type of container if an editor is working on a blog and another if he is working on a news story. In this case, I might do something like this:
Object.assign(config, {
on: {
contentPreview: function(e) {
let match = e.data.dataValue.match(/<body[^>]*>((?:.|\s)*)<\/body>/),
before = '' +
'<html>' +
'<head>' +
'<link href="//stackpath.bootstrapcdn.com/bootstrap/4.5.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">' +
'<link href="//mylivesite.com/styles.css" rel="stylesheet" type="text/css">' +
'<script src="//mylivesite.com/scripts.js"></' + 'script>' +
'</head>' +
'<body>',
content = match[1],
after = '' +
'</body>' +
'</html>;
if (location.pathname.indexOf('blog') > -1)
content = '' +
'<div class="row blog">' +
'<div class="col-sm-8">' + content + '</div>' +
'<div class="col-sm-4">Blog Right Column Content</div>' +
'</div>';
else
content = '' +
'<div class="row news">' +
'<div class="col-sm-8">' + content + '</div>' +
'<div class="col-sm-4">News Right Column Content</div>' +
'</div>';
e.data.dataValue = before + content + after;
}
}
});
Now when the preview opens, it will have all the styling from the live site as well as bootstrap columns, so the editor can play with the browser and see how everything will look at various dimensions.
In a sense then, this is superior to just seeing styles in the editor as you type (although that still would be nice), since it allows editors to get a sense of what the content will look like in the context of the page on which it appears after styles have loaded and scripts executed. And if content will appear differently based upon which options the editor has selected, you can build the preview page dynamically based on those values prior to presenting the preview.
This was the solution I ended up with, and my people were very pleased with it, so I thought I would share.
I don't know how can't I find any examples on this, like no one used it before..
I want to open file manager in iframe and on images click to insert image url to input. Their example opens new window...
I am using laravel file manager standalone button to change avatar image but by their docs I can do it like this:
<div class="input-group">
<span class="input-group-btn">
<a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
<i class="fa fa-picture-o"></i> Choose
</a>
</span>
<input id="thumbnail" class="form-control" type="text" name="filepath">
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">
And calling $('#lfm').filemanager('image');
Which works but it opens new window because this is .filemanager()
(function( $ ){
$.fn.filemanager = function(type, options) {
type = type || 'file';
this.on('click', function(e) {
var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
localStorage.setItem('target_input', $(this).data('input'));
localStorage.setItem('target_preview', $(this).data('preview'));
window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
window.SetUrl = function (url, file_path) {
//set the value of the desired input to image url
var target_input = $('#' + localStorage.getItem('target_input'));
target_input.val(file_path).trigger('change');
//set or change the preview image src
var target_preview = $('#' + localStorage.getItem('target_preview'));
target_preview.attr('src', url).trigger('change');
};
return false;
});
}
})(jQuery);
Now changing:
window.open(route_prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
To:
$('iframe').attr('src', route_prefix + '?type=' + type);
Will append filemanager to iframe as I want but when I click on image inside iframe it opens image in new tab as it is setting new url but skipping the script?
I think that I could get image url if it was opening in iframe but it is not...
Do you maybe know how to do this?
Thanks
I found out answer for my needs, not finished one tho but it works as needed:
Open up script.js from vendor/..../js folder and change useFIle function if/else statement where it looks up are you using any editor (cke,mce,etc..) and if not it just opens image in new window.
I remove that option and added this:
// parent.document.getElementById(field_name).value = url;
var target_input = parent.document.getElementById(localStorage.getItem('target_input'));
target_input.value = url;
//set or change the preview image src
var target_preview = parent.document.getElementById(localStorage.getItem('target_preview'));
target_preview.src = url;
From my question you can see jquery-plugin for opening laravel-filemanager into iframe and adding elements to localstorage.
I used that elements from localstorage in iframe to append url in input and display image in holder.
Now I will change this a little bit, since I wan't to leave this script as it is for full manager page on that url. I will just add another field as uri to be able to say this url is opened by iframe and use someOtherFUnction instead of useFile function by default.
I have an ASP.NET MVC 4 application that uses the CKEditor control (4.4.5) to capture HTML which is then rendered to a Word (docx) document.
When I use the CKEditor "Page break" button, it produces
<div style="page-break-after: always"><span style="display: none;"> </span></div>
which is retained in the editor's HTML, however it is not rendered in Word.
What does work in Word is:
<br> <br style="page-break-after: always;" />
But I am finding that my CKEditor setup strips this out each time you save data in the CKEditor box.
Can I change CKEditor to put in the code that Word recognizes with the page break button, or should I be considering another option to resolve this?
I've created this tiny plugin for version 4.x:
CKEDITOR.plugins.add('wordpagebreak', {
icons : 'wordpagebreak',
init : function(editor) {
var pluginName = 'wordpagebreak';
editor.addCommand(pluginName, {
exec : function(editor) {
var html = '<br class="wordpagebreak" clear="all" ' +
'style="mso-special-character: line-break; ' +
'page-break-before: always">';
var element = CKEDITOR.dom.element.createFromHtml(html);
editor.insertElement(element);
}
});
editor.ui.addButton(pluginName, {
label : 'Word Page Break',
icon : 'wordpagebreak',
command : pluginName,
toolbar : 'insert'
});
}
});
I have a file named download.php and call getpdf function inside it.
I call download.php via ajax to download pdf file when users click download button. but nothing happend and no download window appears. I checked it in firebug Net tab and download.php are requested on click event. Its size also changes that shows the file is reading from its location,but no download window.
Here's getpdf code:
function getpdf($id) {
header('Content-Type: application/pdf');
readfile('/san/theo-books/PDFs/'.$id.'.pdf');
exit;
}
And here's download.php code:
$pdf_id = $_POST('pdi');
echo getpdf($pdf_id);
What is the problem? Would you help me?
Here is the full postback version. It's not using the jQuery Ajax, because Popup download window needs the full postback:
<a id="pdf-10" href="#">PDF Export</a>
$(document).ready(function () {
$('a[id^="pdf"]').click(function (event) {
event.preventDefault();
var pdfExportPath = "/san/theo-books/PDFs/";
var $a = $(this);
var postId = $a.attr('id').replace("pdf-","");
var form = $('<form action="' + pdfExportPath + '" name="pdf' + postId + '" id="pdf' + postId + '" method="POST"> <input id="id" name="id" type="hidden" value="' + postId + '" /></form>');
$(form).appendTo('body');
form.submit();
});
});