We have a hybrid application where some of the code is Classic ASP and some is .Net. We need to be able to incorporate the HTMLEditor in both environments. How can we do this? Is there a KB article available for this?
Hello @Rick,
I would stick with the pure js and html representation of the control in order to avoid the differences on the server. Since the igHtmlEditor is a simply jQuery widget you can reference all js, and css dependences in your page where you would like to show the widget then bring it up via js code e.g.
We don’t KB yet since the control is CTP, however in the upcoming release there will be extensive documentation and walkthroughs for the control.
In your installation directory of jQuery NetAdvantage you can find a basic example of this widget that you can start with.
@Rick,
Forgot to post a link to the live samples at : http://samples.infragistics.com/jquery/html-editor/basic-functionalities
Hope it helps
Rado,
All good in that I have a working HTML Editor BUT I have no way of retrieving the HTML that the user input in order to be submitted to the back end. Your examples don’t help as they don’t even have a <form> tag. How can I get the value back from the HTML Editor?
Also, I note that for this forum you are using TinyMCE - shouldn't you be using your own editor?
Rick.
Hello Rick,
If you wrap the control in form tag you should be able to take its value from the Request object on the server. The community forums are third party software that is shipped with its own component due to that reason we are not using our own components in.
Hope this helps,
It simply doesn't work that way. I have a sample ASP page that does the following:
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var {
background: transparent;
border: 0 none;
font-size: 100%;
margin: 0;
padding: 0;
}
</style>
<!--#BEGIN SNIPPET#-->
<script type="text/javascript" src="http://samples.infragistics.com/samplesbrowser/scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://samples.infragistics.com/samplesbrowser/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://samples.infragistics.com/samplesbrowser/scripts/jquery.tmpl.js"></script>
<link type="text/css" href='http://samples.infragistics.com/jquery/SamplesCommon/jQuery/Styles/min/ig/jquery.ui.custom.min.css' rel="stylesheet" />
<link type="text/css" href='http://samples.infragistics.com/jquery/SamplesCommon/jQuery/Styles/base/ig.ui.min.css' rel="stylesheet" />
<script type="text/javascript" src='http://samples.infragistics.com/jquery/SamplesCommon/jQuery/Scripts/combined/min/ig.ui.min.js'></script>
<script type="text/javascript" src="http://samples.infragistics.com/jquery/SamplesCommon/jQuery/Scripts/combined/min/ig.ui.dialog.min.js"></script>
<script type="text/javascript" src="http://samples.infragistics.com/jquery/SamplesCommon/jQuery/Scripts/combined/min/ig.ui.htmleditor.min.js"></script>
<!--#END SNIPPET#-->
.ui-ightmleditor .ui-igtoolbar .ui-igcombo { font-size: 0.8em; }
.ui-widget .ui-widget { font-size: 1em; }
<script type="text/javascript">
function unload(source, target) {
$(target).value = $(source).innerHTML;
</script>
</head>
<body>
<form method="post" action="ShowState.asp" onSubmit="BLOCKED SCRIPTunload('#htmlEditorSample', '#input_text');">
<div class="sampleContents">
<div class="sample-container">
<div id="htmlEditorSample"></div>
<input type="hidden" name="input_text" id="input_text" />
<script type="text/javascript">$(function(){$('#htmlEditorSample').igHtmlEditor();});</script>
</div>
<input type=submit name=submit value=submit />
</form>
</body>
</html>
And when I post to the server all I see is:
SUMMARY INFORequest Type = POSTStatus Code = 200 OKSession.CodePage = 1252Session.LCID = 3081Session.SessionID = 76635843Session.Timeout = 20QUERYSTRING COLLECTIONFORM COLLECTIONsource=submit=submitinput_text=
So the data is NEVER being sent to the server.
Rick
Bozhidar,
That helps. I can now unload the form correctly however whenever I press a toolbar button it is being treated as a Submit of the form. I think I can work around that (I'll try tomorrow).
So, when is the upcoming release scheduled for? At the moment we have rolled back to some HTML editor code I wrote in JS around 10 years ago - not easy to maintain!
Hi Rick,
In the upcoming release version of the HtmlEditor retrieving data through its API is really improved. Until then I can suggest you the following a work around.
$(target).val($(source + "_editor").contents().find("body").html());
With the id of the editor (#htmlEditorSample) and with the _editor suffix you can locate the html editor source iframe (#htmlEditorSample_editor) and retrieve the html from it.
Regards,
Bozhidar
Sorry - should have added that I have even tried to "unload" the values from the HTML Editor using javascript (and that's what the sample above does) but with no luck. We use TinyMCE as our current editor - hence the attempt at the unload.