I'm using CKEditor 3 and I need to integrate a cost-free filebrowser/uploader. I tried to integrate the one that comes with FCKEditor but I always get this XML error:
The server didn't send back a proper XML response. Please contact your system administrator.
XML request error: OK (200)
Requested URL: http://example.com/admin/filemanager/browser/default/?Command=GetFoldersAndFiles&Type=File&CurrentFolder=%2F&uuid=1260817820353
Response text:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Index of /admin/filemanager/browser/default</title>
</head>
<body>
<h1>Index of /admin/filemanager/browser/default</h1>
<table><tr><th><img src="/icons/blank.gif" alt="[ICO]"></th>
<th>Name</th>
<th>Last modified</th>
<th>Size</th>
<th>Description</th></tr>
<!-- edited for brevity -->
I'm trying to do it in this way:
<script type="text/javascript">
window.onload = function(){
CKEDITOR.config.language='es';
CKEDITOR.config.forcePasteAsPlainText = true;
CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV;
CKEDITOR.replace('ncCont',{
filebrowserBrowseUrl: 'filemanager/browser/default/browser.html',
filebrowserUploadUrl : 'filemanager/connectors/php/upload.php'
});
};
</script>
Can FCKeditor be integrated with CKEditor? If yes, how can this be done? If not, is there a free filebrowser/uploader alternative?
Wanted to piggy back off Penuel whose code helped me a lot.
add this to /filemanager/connectors/php/upload.php
// Get the CKEditor Callback
$CKEcallback = $_GET['CKEditorFuncNum'];
//modify the next line adding in the new param
FileUpload($sType, $sCurrentFolder, $sCommand, $CKEcallback);
add this to /filemanager/connectors/php/io.php
// This is the function that sends the results of the uploading process to CKE.
function SendCKEditorResults ($callback, $sFileUrl, $customMsg = '')
{
echo '<script type="text/javascript">';
$rpl = array( '\\' => '\\\\', '"' => '\\"' ) ;
echo 'window.parent.CKEDITOR.tools.callFunction("'. $callback. '","'.
strtr($sFileUrl, $rpl). '", "'. strtr( $customMsg, $rpl). '");' ;
echo '</script>';
}
modify this /filemanager/connectors/php/commands.php
//line 158
function FileUpload($resourceType, $currentFolder, $sCommand, $CKEcallback = '')
//line 166
if ( (isset($_FILES['NewFile']) && !is_null($_FILES['NewFile']['tmp_name']))
# This is for the QuickUpload tab box
or (isset($_FILES['upload']) and !is_null($_FILES['upload']['tmp_name'])))
{
global $Config ;
$oFile = isset($_FILES['NewFile']) ? $_FILES['NewFile'] : $_FILES['upload'];
...
if($CKEcallback == '')
{
// this line already exists so wrap the if block around it
SendUploadResults( $sErrorNumber, $sFileUrl, $sFileName ) ;
}
else
{
//issue the CKEditor Callback
SendCKEditorResults ($CKEcallback, $sFileUrl,
($sErrorNumber != 0
? 'Error '. $sErrorNumber. ' upload failed. '. $sErrorMsg
: 'Upload Successful'));
}
You'll need to add the upload URL's to your CKEDITOR definition like so:
var filemanager = '/js/ckeditor/filemanager/';
var browser = filemanager + 'browser/default/browser.html';
var connector = filemanager + 'connectors/php/connector.php';
var upload = filemanager + 'connectors/php/upload.php';
CKEDITOR.replace( id,
{
customConfig : this.config,
filebrowserBrowseUrl : browser +'?Connector=' + connector,
filebrowserImageBrowseUrl : browser + '?Type=Image&Connector='
+ connector,
filebrowserFlashBrowseUrl : browser + '?Type=Flash&Connector='
+ connector,
filebrowserUploadUrl : upload + '?type=Files',
filebrowserImageUploadUrl : upload + '?type=Images',
filebrowserFlashUploadUrl : upload + '?type=Flash'
});
I think that covers everything left off by Penuel
To answer your question I have posted one small tutorial on my blog with step by step instructions to integrate the File Browser of FCKEditor in CKEditor. Please goto:
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
I have done this for PHP connector but should be pretty simple for other languages as well.
You can also download the already done example or view the demo from this article.
I'm using a custom file browser with my implementation of ckeditor, so I don't see why you couldn't use the old file browser. It uses the same javascript to populate the editor.
Just install the old FCK editor in whatever directory, and make sure you have the correct path to that browser in your config. I'm guessing that you have a pathing problem above.
Related
Is there a way to write a google apps script so when ran, a second browser window opens to www.google.com (or another site of my choice)?
I am trying to come up with a work-around to my previous question here:
Can I add a hyperlink inside a message box of a Google Apps spreadsheet
This function opens a URL without requiring additional user interaction.
/**
* Open a URL in a new tab.
*/
function openUrl( url ){
var html = HtmlService.createHtmlOutput('<html><script>'
+'window.close = function(){window.setTimeout(function(){google.script.host.close()},9)};'
+'var a = document.createElement("a"); a.href="'+url+'"; a.target="_blank";'
+'if(document.createEvent){'
+' var event=document.createEvent("MouseEvents");'
+' if(navigator.userAgent.toLowerCase().indexOf("firefox")>-1){window.document.body.append(a)}'
+' event.initEvent("click",true,true); a.dispatchEvent(event);'
+'}else{ a.click() }'
+'close();'
+'</script>'
// Offer URL as clickable link in case above code fails.
+'<body style="word-break:break-word;font-family:sans-serif;">Failed to open automatically. Click here to proceed.</body>'
+'<script>google.script.host.setHeight(40);google.script.host.setWidth(410)</script>'
+'</html>')
.setWidth( 90 ).setHeight( 1 );
SpreadsheetApp.getUi().showModalDialog( html, "Opening ..." );
}
This method works by creating a temporary dialog box, so it will not work in contexts where the UI service is not accessible, such as the script editor or a custom G Sheets formula.
You can build a small UI that does the job like this :
function test(){
showURL("http://www.google.com")
}
//
function showURL(href){
var app = UiApp.createApplication().setHeight(50).setWidth(200);
app.setTitle("Show URL");
var link = app.createAnchor('open ', href).setId("link");
app.add(link);
var doc = SpreadsheetApp.getActive();
doc.show(app);
}
If you want to 'show' the URL, just change this line like this :
var link = app.createAnchor(href, href).setId("link");
EDIT : link to a demo spreadsheet in read only because too many people keep writing unwanted things on it (just make a copy to use instead).
EDIT : UiApp was deprecated by Google on 11th Dec 2014, this method could break at any time and needs updating to use HTML service instead!
EDIT :
below is an implementation using html service.
function testNew(){
showAnchor('Stackoverflow','http://stackoverflow.com/questions/tagged/google-apps-script');
}
function showAnchor(name,url) {
var html = '<html><body>'+name+'</body></html>';
var ui = HtmlService.createHtmlOutput(html)
SpreadsheetApp.getUi().showModelessDialog(ui,"demo");
}
There really isn't a need to create a custom click event as suggested in the bountied answer or to show the url as suggested in the accepted answer.
window.open(url)1 does open web pages automatically without user interaction, provided pop- up blockers are disabled(as is the case with Stephen's answer)
openUrl.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<script>
const url1 ='https://stackoverflow.com/a/54675103';
const winRef = window.open(url1);
winRef ? google.script.host.close() : window.alert('Allow popup to redirect you to '+url1) ;
window.onload=function(){document.getElementById('url').href = url1;}
</script>
</head>
<body>
Kindly allow pop ups</br>
Or <a id='url'>Click here </a>to continue!!!
</body>
</html>
code.gs:
function modalUrl(){
SpreadsheetApp.getUi()
.showModalDialog(
HtmlService.createHtmlOutputFromFile('openUrl').setHeight(50),
'Opening StackOverflow'
)
}
Google Apps Script will not open automatically web pages, but it could be used to display a message with links, buttons that the user could click on them to open the desired web pages or even to use the Window object and methods like addEventListener() to open URLs.
It's worth to note that UiApp is now deprecated. From Class UiApp - Google Apps Script - Google Developers
Deprecated. The UI service was deprecated on December 11, 2014. To
create user interfaces, use the HTML service instead.
The example in the HTML Service linked page is pretty simple,
Code.gs
// Use this code for Google Docs, Forms, or new Sheets.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Dialog')
.addItem('Open', 'openDialog')
.addToUi();
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Dialog title');
}
A customized version of index.html to show two hyperlinks
<a href='http://stackoverflow.com' target='_blank'>Stack Overflow</a>
<br/>
<a href='http://meta.stackoverflow.com/' target='_blank'>Meta Stack Overflow</a>
Building of off an earlier example, I think there is a cleaner way of doing this. Create an index.html file in your project and using Stephen's code from above, just convert it into an HTML doc.
<!DOCTYPE html>
<html>
<base target="_top">
<script>
function onSuccess(url) {
var a = document.createElement("a");
a.href = url;
a.target = "_blank";
window.close = function () {
window.setTimeout(function() {
google.script.host.close();
}, 9);
};
if (document.createEvent) {
var event = document.createEvent("MouseEvents");
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
window.document.body.append(a);
}
event.initEvent("click", true, true);
a.dispatchEvent(event);
} else {
a.click();
}
close();
}
function onFailure(url) {
var div = document.getElementById('failureContent');
var link = 'Process';
div.innerHtml = "Failure to open automatically: " + link;
}
google.script.run.withSuccessHandler(onSuccess).withFailureHandler(onFailure).getUrl();
</script>
<body>
<div id="failureContent"></div>
</body>
<script>
google.script.host.setHeight(40);
google.script.host.setWidth(410);
</script>
</html>
Then, in your Code.gs script, you can have something like the following,
function getUrl() {
return 'http://whatever.com';
}
function openUrl() {
var html = HtmlService.createHtmlOutputFromFile("index");
html.setWidth(90).setHeight(1);
var ui = SpreadsheetApp.getUi().showModalDialog(html, "Opening ..." );
}
I liked #Stephen M. Harris's answer, and it worked for me until recently. I'm not sure why it stopped working.
What works for me now on 2021-09-01:
function openUrl( url ){
Logger.log('openUrl. url: ' + url);
const html = `<html>
<a id='url' href="${url}">Click here</a>
<script>
var winRef = window.open("${url}");
winRef ? google.script.host.close() : window.alert('Configure browser to allow popup to redirect you to ${url}') ;
</script>
</html>`;
Logger.log('openUrl. html: ' + html);
var htmlOutput = HtmlService.createHtmlOutput(html).setWidth( 250 ).setHeight( 300 );
Logger.log('openUrl. htmlOutput: ' + htmlOutput);
SpreadsheetApp.getUi().showModalDialog( htmlOutput, `openUrl function in generic.gs is now opening a URL...` ); // https://developers.google.com/apps-script/reference/base/ui#showModalDialog(Object,String) Requires authorization with this scope: https://www.googleapis.com/auth/script.container.ui See https://developers.google.com/apps-script/concepts/scopes#setting_explicit_scopes
}
https://developers.google.com/apps-script/reference/base/ui#showModalDialog(Object,String) Requires authorization with this scope: https://www.googleapis.com/auth/script.container.ui See https://developers.google.com/apps-script/concepts/scopes#setting_explicit_scopes
Currently im building a application using phonegap & jQuery Mobile
I have done the version which is perfectly working on iOS & Android.But the same code does not work on windows phone.When i click any link,redirection to the respective page is not loading..Its still says "Error Page loading".
<!DOCTYPE html>
Test
<div id="bg">
<div style="padding-top:14%;width:100%;text-align:center">
<div style="float:left;text-align:center;width:50%"><img src="pics/btn_1.png" /></div>
<div style="float:left;text-align:center;width:50%"><img src="pics/btn_2.png" /></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
Need help on this.
Solution
Add data-ajax=false or rel=external to your anchor tag. But, if you do this, you will lose transitions. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. You could enable this if the incoming device is a windows phone if needed :
$(document).on("mobileinit", function () {
//check for windows phone
$.mobile.ajaxEnabled = false;
});
Else, make your code into a single page template. Here's a demo of that : http://jsfiddle.net/hungerpain/aYW2f/
Edit
Currently jQM doesn't support query string parameters. You could use the localStorage API to store the parameters in cache and retrieve them later. Assuming you want to go to index.html from here :
<img src="pics/btn_2.png" />
You'd add a click event for it :
$(document).on("click", "a", function() {
//gets qs=2 and changes it into ["qs",2]
var query = this.href.split["?"][2].split["="];
//construct an array out of that
var paramString = { query[0]: query[1]} ;
//store it in localstorage
locaStorage["query"] = JSON.stringify(paramString);
//continue redirection
return true;
});
In your index.html :
$(document).on("pageinit", "[data-role=page]", function() {
//store it in localstorage
var params = JSON.parse(locaStorage["query"]);
//now params will contain { "qs" : 2 }
//you could access "2" by params["qs"]
});
More info about localStorage here.
I had Also same issue and finally resolve it by using below code
my html page is index.html and i am writtinga all code in one html
Before
$.mobile.changePage( "#second", {});
After
var url = window.location.href;
url = url.split('#').pop().split('?').pop();
url = url.replace(url.substring(url.lastIndexOf('/') + 1),"index.html#second");
$.mobile.changePage(url, { reloadPage : false, changeHash : false });
and suppose you have multiple html page then for more one page to another you can use
var url = window.location.href;
url = url.split('#').pop().split('?').pop();
url = url.replace(url.substring(url.lastIndexOf('/') + 1),"second.html");
$.mobile.changePage(url, { reloadPage : false, changeHash : false });
There is no support of querystring in web application using phonegap for windows phone 7.
However we can replace ? with # or anything else to pass the data,
like convert
Sample.html?id=12312
to
Sample.html#id=12312
I was used Ckeditor in my project. It was worked well. I can put picture in texts but with an url. I know that,if I want upload an picture from my pc, I must used CKfinder.
How can I use Ckfinder with Ckeditor?
I use this code to call CKeditor:
protected void Page_Load(object sender, EventArgs e)
{
String StrScript = "CKEDITOR.replace( '" + TextBox1.ClientID + "',{toolbar : 'Full'});";
ClientScript.RegisterStartupScript(this.GetType(), "Ck-Js/ckeditor", StrScript, true);
}
Thanks.
it takes nearly 5 minutes to complete setup:
Download CKEditor and CKFinder.
Put extracted code of both in one folder inside xampp as below.
Create index file (index.html) which will be containing the editor as below code.
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
</head>
<body>
<h1>CKEditor CKFinder Integration using PHP</h1>
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
CKFinder.setupCKEditor( editor, '../' );
</script>
</body>
</html>
so your folder structure will be something like this:
htdocs
|_integrated
|_ckeditor
| |_config.js
| |_...
|_ckfinder
| |_config.php
| |_...
|_uploads
|_index.html
Now open file config.php inside ckfinder & make following changes:
function CheckAuthentication() {
return true;
}
$baseUrl = 'http://localhost/integrated/uploads/';
$enabled = true;
$config['SecureImageUploads'] = false;
$config['ChmodFolders'] = 0777 ;
Now open url http://localhost/integrated/ and try uploading image.
I think you want use CKFinder and CKEditor, try this :
Documentation : http://docs.cksource.com/CKFinder_2.x/Developers_Guide/ASP/CKEditor_Integration
http://docs.cksource.com/CKFinder_2.x/Developers_Guide/ASP/FCKeditor_Integration
En Francais : http://creer-un-site.fr/integration-du-formulaire-d-upload-ckfinder-a-l-editeur-ckeditor-202.php
If anyone is still having problems integrating CKFinder with CKEditor, try using KCFinder (http://kcfinder.sunhater.com/) instead.
It has all the same functions as CKFinder, but its free, open source, and much easier to install and setup. (Personally, I was never able to get CKFinder installed properly....)
The installation instructions for KCFinder are here:
http://kcfinder.sunhater.com/install
And the integration instructions are here:
http://kcfinder.sunhater.com/integrate
https://ckeditor.com/ckeditor-4/download/
download ckfinder place it both in single place then
<textarea class="ckeditor" id="editor1"></textarea>
place this code in footer.php or direct on page also
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl: 'https://example.com/admin/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl: 'https://example.com/admin/ckfinder/ckfinder.html?type=Images',
filebrowserUploadUrl: 'https://example.com/admin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl: 'https://example.com/admin/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images'
});
in ckfinder/config.php file open and make some change
$config['authentication'] = function () {
return true;
};
$config['backends'][] = array(
'name' => 'default',
'adapter' => 'local',
'baseUrl' => 'https://example.com/admin/ckfinder/userfiles/',
// 'root' => '', // Can be used to explicitly set the CKFinder user files directory.
'chmodFiles' => 0777,
'chmodFolders' => 0755,
'filesystemEncoding' => 'UTF-8',
);
That's it, it work for me.
If this is helpful for you please rate us me
I need to dynamically insert an image in my JS code. In my Razor template I have:
#section Includes {
<script type="text/javascript">
var imgPath = "#Url.Content("~/Content/img/")";
alert(imgPath);
</script>
}
Then in my JS I have:
insertImg = "";
if (response[i].someFlag == 'Y') {
insertImg = "<img src=\"" + imgPath + "/imgToInsert.gif\" width=\"6px\" height=\"10px\" />";
}
But it doesn't work - it will not find the image. The image is stored in /Content/img folder...
What am I doing wrong? I am guessing it is because it is mapping the image from Js script..looks like I will have to hardcode it?
Alert or console.log the following to see if there are too many slashes
" + imgPath + "/imgToInsert.gif"
It might be advantageous to use the MVC TagBuilder Class to build your image tags instead of using a string concatenations. Lets you build tags dynamically and makes sure they are well-formed. Most likely your tag is not well-formed.
Using cleditor, I'm trying to set up a custom button with the following code:
(function($) {
$.cleditor.buttons.link_species = {
name: "link_species",
image: "fish.gif",
title: "Species Link",
command: "inserthtml",
popupName: "link_species",
popupClass: "cleditorPrompt",
popupContent: "Genus: <input type='text' size='15'> Species: <input type='text' size='15'><br />Remove italics? <input type='checkbox' value='remove'> <input type='button' value='Ok' />",
buttonClick: link_speciesClick
};
// Handle the hello button click event
function link_speciesClick(e, data) {
// Wire up the submit button click event
$(data.popup).children(":button")
.unbind("click")
.bind("click", function(e) {
// Get the editor
var editor = data.editor;
var $text = $(data.popup).find(":text"),
genus = $text[0].value,
species = $text[1].value;
var slug = genus + '-' + species;
slug = htmlEntities(slug);
var link = '/dev/species/' + slug + '/';
var rel = link + '?preview=true';
var display = firstUpper(genus) + ' ' + species;
// Get the entered name
var html = '' + display + '';
if ( !$(data.popup).find(":checkbox").is(':checked') ) {
html = '<em>' + html + '</em>';
}
// Insert some html into the document
editor.execCommand(data.command, html, null, data.button);
// Hide the popup and set focus back to the editor
editor.hidePopups();
editor.focus();
});
}
})(jQuery);
It's a WordPress website, and the directory structure is something like this:
/wp-content/plugins/sf-species-profile/cleditor
Within there I have all the cleditor files and config.js.This file is where the above code is stored.
I also have an images folder containing a 24*24 fish.gif file.
For some reason, when I run this code, I get the following error:
[firefox]
a is undefined
<<myurl>>/wp-content/plugins/sf-species-profiles/cleditor/jquery.cleditor.min.js?ver=3.3.1
Line 17
[chrome]
Uncaught TypeError: Cannot read property 'length' of undefined
If I change the "image" argument to image:"" the same image for "B" appears, but the plugin works without error.
Does anyone have any ideas what may be wrong?
It would be easier to debug with the non minimized version. You can get it from here: http://premiumsoftware.net/cleditor/ (zip)
There are 2 functions that include a length call in the code that ends up in line 17 of the minimized code. One in the function hex(s) that processes color. The other is the the imagePath function.
function imagesPath() {
var cssFile = "jquery.cleditor.css",
href = $("link[href$='" + cssFile +"']").attr("href");
return href.substr(0, href.length - cssFile.length) + "images/";
}
It could throw an error of the type you have if your rendered html doesn't include a line like "<link rel="stylesheet" type="text/css" href="path/to/jquery.cleditor.css" />". (Href would then be undefined.)
For wordpress integration, you may find it easier to setup when using the wordpress plugin version of cleditor.