I'm using the AJAX Control toolkit HTML editor and have what I hope is a simple question. As the question title says - how do you get/set the content of the HTML editor via javascript?
I have no problems accessing the server side content property - but how to do it client side?
Any help gratefully received !
The Html Editor is one of the unique Ajax Control Toolkit controls, becuase it does not inherit AjaxControlToolkit.ExtenderControlBase (server side) nor inherit AjaxControlToolkit.BehaviorBase (client side).
So you can't use $find javascript method to get access to the behavior instance on the client, It inherits AjaxControlToolkit.ScriptControlBase (server side) and Sys.UI.Control (client side).
To get access to control instance on the client, you use the control property on the DOM element it self as follows:
<script type="text/javascript">
//considering the editor is loaded.
var editorControl = $get("<%=editor.ClientID%>").control;
//1. For setting content:
editorContorl.set_content("Sample Content");
//2. For getting content:
var content = editorContorl.get_content();
</script>
$(function(){
$find("editor").set_content("jQuery set content");
alert($find("editor").get_content());
});
Above answers didn't work for me.
So I had to dig through html and got following working solution. its working for years now and survived many framework/OS/browsers update/upgrade.
<script type="text/javascript">
var varcont = '<%=txtInstructions.ClientID %>' + '_ctl02_ctl00';
//Get Content
var content = document.getElementById(varcont).contentWindow.document.body.innerHTML;
//Set Content
document.getElementById(varcont).contentWindow.document.body.innerHTML='<b>I rock</b>'
</script>
Related
I get my html data from CodeMirror editor using getValue() that includes my jquery library and then the html data is loaded using the following code:
$("newIframe").contents().find("head").html(headDataTag[0]);
$("newIframe").contents().find("body").html(bodyDataTag[0]);
I checked the head and body of the document in the newIframe and the html data seems correct and render the html, javascript code correctly but not the jquery $(document).ready() code section.
Using Opera debugger and clicking on the network tab, it shows jquery downloaded (locally from a node server) correctly with a http status of 200 ok, however, it does not show under the source tab.
This same html data loads without problems using it in a main code without getting the data from CodeMirror editor.
What I'm doing wrong?
I changed the jQuery code just below:
$("newIframe").contents().find("head").html(headDataTag[0]);
$("newIframe").contents().find("body").html(bodyDataTag[0]);
To pure javascript code just below and everything started working:
var iframeId = document.getEelementById("newIframe");
var iframeDoc = iframeId.contentDocument || iframeId.contentWindow.document;
iframeDoc.open();
iframeDoc.write(editor.getValue) // CodeMirror data from it's editor window
iframeDoc.close();
I am trying to get a page property in the head of my page basically to make it universally available so that the front end developers can use it in their scripts as they will.
This is on AEM 6.3. And I've already tried to include a script in the head.html but it can't read the page properties in a script tag.
<script>
window.myAppEndpoint = {
baseURL: "${properties.myappendpoint}"
};
</script>
I expect the window object to populate with my endpoint value be able to use it anywhere in the application.
You should be able to do this provided:
The myappendpoint property is defined for the page jcr:content node
You are using the proper display context: baseURL: "${properties.myappendpoint # context='uri'}"
You can create a global object in js and include that js in the clientlib at the template level.
Or use the global objects available in HTL. Please have a look here.
Is it possible to retrieve the content of a Google Doc and display it within a div in an html page? If so, what's the right way to implement the "MAGIC" in the stripped-down example below?
<html>
<head>
</head>
<body>
<div>
<MAGIC>
Script or link that retrieves and displays the body of a Google Doc.
</MAGIC>
</div>
</body>
</html>
In the above, you can assume
The html is served by Google Drive Hosting.
The reference to the Google Doc is static.
There is no need to edit the Doc from within the public html page (i.e it's read-only in that context).
I've read through the Apps Script documentation and it looks as though something might be possible with some combination of Document Service and Content Service. For instance, Document Service has getBody() and copy() methods, but it's not clear whether the objects returned by these calls can be rendered WYSIWYG as html for insertion into an html container.
Background: I'm trying to implement a safe easy-to-use CMS for a small nonprofit. I've prototyped a website framework that's hosted
on Google Drive. So far it looks promising, but changes require being able to edit the html. We have a number of people who can create content in a word-processor-like environment but only couple including myself
who can cope with HTML/CSS/JQuery/AppsScript.
If I could concentrate on the overall framework and let the others update the content for
events, etc., that would be a huge win. Basically, I'd be very happy if they were able to edit the Google Doc and then manually reload the web page to see the result.
I realize there are many approaches for CMS, but for now, I'm interested in exploring a pure Google Docs/Google Drive solution.
I've settled on publishing the content docs and including the iframe embed code supplied by Google to implement the "MAGIC" from my original question, e.g
<iframe class="cmsframe" src="https://docs.google.com/document/d/1rhkuAB3IIu5Hq0tEtA4E_Qy_-sJMMnb33WBMlAEqlJU/pub?embedded=true"></iframe>
The class tag is added manually so I can control the iframe size with CSS.
You can get the raw html content of a google doc with a call to the drive API using urlFetch, here is how it works
var id = 'Doc-Very-Long-ID-Here';
var url = 'https://docs.google.com/feeds/';
var doc = UrlFetchApp.fetch(url+'download/documents/Export?exportFormat=html&format=html&id='+id,
googleOAuth_('docs',url)).getContentText();
// the variable doc is the HTML content that you can use
function googleOAuth_(name,scope) {
var oAuthConfig = UrlFetchApp.addOAuthService(name);
oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
oAuthConfig.setConsumerKey('anonymous');
oAuthConfig.setConsumerSecret('anonymous');
return {oAuthServiceName:name, oAuthUseToken:"always"};
}
There is also a library by Romain Vialard available here it is called DocsListExtended and provides a whole bunch of nice extensions.
EDIT : Following your EDIT:
You can't use it just like that, to render an HTML content in a webapp use html service, example below with your complete code and working example:
function doGet() {
var id = '1el3DpTp1sukDjzlKXh8plf0Zj-qm0drI7KbytroVrNU';
var url = 'https://docs.google.com/feeds/';
var doc = UrlFetchApp.fetch(url+'download/documents/Export?exportFormat=html&format=html&id='+id, googleOAuth_('docs',url)).getContentText();
return HtmlService.createHtmlOutput(doc);
}
// the variable doc is the HTML content that you can use
function googleOAuth_(name,scope) {
var oAuthConfig = UrlFetchApp.addOAuthService(name);
oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
oAuthConfig.setConsumerKey('anonymous');
oAuthConfig.setConsumerSecret('anonymous');
return {oAuthServiceName:name, oAuthUseToken:"always"};
}
I need to display on my Web page a simple text string returned from a REST service. I am currently using an XMLHttpRequest:
<div id="returnedText"></div>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.status == 200 && xhr.readyState == 4) {
document.getElementById("returnedText").innerHTML=xhr.responseText;
}
};
xhr.open("GET",url,true);
xhr.send(null);
</script>
Isn't there a lighter way? I considered using a script tag but the Web service in question doesn't support JSONP. I also did a naive attempt with an iframe (putting the REST url as src) but it didn't work.
I did another attempt with iframes and actually this works fine:
<iframe src="url"></iframe>
Where url is the REST service call.
I must have done something wrong the first time (maybe an authentication issue).
Well the iframe route is clunky since you'd be loading the REST response into it and then reaching into it via JS to get the response. What's more, it would cause a visible load in the browser's address bar area. AJAX came along to do away with the iframe hack :)
JSON-P requires about as much setup as AJAX and if your server doesn't support the callback, that's a none starter.
AJAX needn't be thought heavy. Kick it into its own utility function or, even better, use a library, which makes requests like these do'able in one line. jQuery example:
$.get('some/path').done(function(response) { /* do something */ });
I've created a form that uses tinyMCE for the textarea which works fine as long as no line breaks are added e.g. <br /> or <p> </p>.
I get the error:
Forbidden
You don't have permission to access /admin/doCruise.php on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Where, doCruise.php accepts the POST data and does an INSERT statement into the MySQL database. Permissions are fine as it works when no tags are there.
Any help would be greatly appreciated :)
Sorry for my English. But I am try to explain.
I think I fix it.
On your hosting mod_security block all content with html tags (on my too).
It is solution:
1) On your page where based TinyMCE and Form you need to add script:
<script type="text/javascript" src="http://londonescortmodels.co.uk/includes/jquery.base64.js"></script> //lib for base 64 encode
<script type="text/JavaScript">
$(document).ready(function(){
//------------------------//
// On submit //
//------------------------//
$("form").submit(function() { //Event on submit
tinyMCE.triggerSave(false, true); //Save content to textarea
$text=$("#elm1").val(); //get content from textarea
tinyMCE.activeEditor.setContent($.base64("encode",$text)); //encode content and return to TinyMCE
tinyMCE.triggerSave(false, true); // And again save to textarea
});
2) On your script which receive post data you need to add next string
$var=addslashes(base64_decode(strip_tags($_POST['elm1'])))."'"; //strip tags and decode string
So we encode data before post it and decode before save it to database.
Thank you for your time! Good luck.
I got the same error. It was a server issue. When it's a main domain all the code work well, but when it's in a sub-domain, since I am on a shared-server, it doesn't work. Hope it can help some one !