Preview Page & Button

Timespider · Post by **Timespider** » 2011-01-06 03:42

Hi guys, I am having an issue creating the preview page in KTML,(first time I've used KTML). I have followed the tutorial here http://www.interaktonline.info/document ... ntprev.htm.

Here is the code I have is it correct?

Code: Select all

<script>
function previewKTML(k) {
k.save(function() {
var value = k.formElement.value;
wnd = utility.window.openWindow("ktml_preview_window", k.iframeSRC2, window.screen.availWidth-5, window.screen.availHeight - 45);
if (wnd) {
html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' + "\r\n";
html += '<html><head><link href="' + k.getModuleProperty("css", "PathToStyle") + '" rel="stylesheet" type="text/css"></head><body>';
html += value;
html += '<input type="button" value="Close" onclick="window.close()" />';
html += '</body></html>';
wnd.moveTo(-3,-3);
wnd.document.open("text/html; charset=" + k.charset);}
wnd.document.write(html);
wnd.document.close();
}
});
}
var previewButton = new ToolbarButton({
'name': 'preview',
'button_type': 'img',
'button_icon': KtmlRelativeImagePath + 'preview.gif',
'command_type': $KT_JS_STRING,
'command_string':'previewKTML(this.ktml)'
});
<script type="text/javascript">
  // KTML4 Object
  ktml_article_art_<?php echo $cnt1; ?> = new ktml("article_art_<?php echo $cnt1; ?>");
</script>

I can't even see the preview button which I've uploaded to the server. The KTML object is the one in my page a nextensio form text area.

Thanks Chris

Post by **Fred** » 2011-01-09 12:35

Hi Chris.
Just had a quick look and the only difference I can see is I had my script blow the actual KTML Object.

Here is a complete copy of the ktml_initiation:

Code: Select all

<script type="text/javascript">
	ktml_init_object = {
		"debugger_params": false,
		"path": "../includes/ktm/",
		"server": "php"
	};
</script>
<script type="text/javascript">
<!--
pg_content_config = {
		"width": 900,
		"height": 600,
		"show_toolbar": "load",
		"show_pi": true,
		"font_family": "Verdana, Arial, Helvetica, sans-serif",
        "font_size": "12px",
		"background_color": "#FFFFFF",
		"strip_server_location": true,
		"auto_focus": false,
		"module_props": { },
		"buttons": [
			[1, "standard", ["cut", "copy", "paste", "undo", "redo", "find_replace", "toggle_visible", "spellcheck", "toggle_editmode", "toggle_fullscreen", "help"]],
			[1, "formatting", ["bold", "italic", "underline", "align_left", "align_center", "align_right", "align_justify", "numbered_list", "bulleted_list", "outdent", "indent", "clean_menu", "foreground_color", "background_color", "superscript", "subscript"]],
			[2, "styles", ["heading_list", "style_list", "fontsize_list"]],
			[2, "insert", ["insert_link", "insert_anchor", "insert_table", "insert_image", "insert_template", "horizontal_rule", "insert_character"]]
		]
	};
	<?php
		$ktml_pg_content = new ktml4("pg_content");
		$ktml_pg_content->setModuleProperty("filebrowser", "AllowedModule", "true", false);
		$ktml_pg_content->setModuleProperty("filebrowser", "MaxFileSize", "1024", true);
		$ktml_pg_content->setModuleProperty("filebrowser", "RejectedFolders", "", false);
		$ktml_pg_content->setModuleProperty("file", "UploadFolder", "../uploads/files/", false);
		$ktml_pg_content->setModuleProperty("file", "UploadFolderUrl", "../uploads/files/", true);
		$ktml_pg_content->setModuleProperty("file", "AllowedFileTypes", "ttt", true);
		$ktml_pg_content->setModuleProperty("media", "UploadFolder", "../uploads/media/", false);
		$ktml_pg_content->setModuleProperty("media", "UploadFolderUrl", "../uploads/media/", true);
		$ktml_pg_content->setModuleProperty("media", "AllowedFileTypes", "bmp, jpg, jpeg, gif, png, wm, swf", true);
		$ktml_pg_content->setModuleProperty("templates", "AllowedModule", "true", false);
		$ktml_pg_content->setModuleProperty("templates", "UploadFolder", "../uploads/templates/", false);
		$ktml_pg_content->setModuleProperty("xhtml", "AllowedModule", "true", false);
		$ktml_pg_content->setModuleProperty("xhtml", "xhtml_view_source", "true", true);
		$ktml_pg_content->setModuleProperty("xhtml", "xhtml_save", "true", true);
		$ktml_pg_content->setModuleProperty("spellchecker", "AllowedModule", "true", false);
		$ktml_pg_content->setModuleProperty("css", "PathToStyle", "../styles/KT_styles.css", true);
		$ktml_pg_content->Execute();
	?>

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->

Here is a complete copy of the object

Code: Select all

  // KTML4 Object
  ktml_pg_content_<?php echo $cnt1; ?> = new ktml("pg_content_<?php echo $cnt1; ?>");
</script>
<!-- KTML Preview Function -->
      <script>
function previewKTML(k) {
k.save(function() {
var value = k.formElement.value;
wnd = utility.window.openWindow("ktml_preview_window", k.iframeSRC2, window.screen.availWidth-5, window.screen.availHeight - 45);
if (wnd) {
html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' + "\r\n";
html += '<html><head><link href="' + k.getModuleProperty("css", "PathToStyle") + '" rel="stylesheet" type="text/css"></head><body>';
html += value;
html += '<input type="button" value="Close" onclick="window.close()" />';
html += '</body></html>';
wnd.moveTo(-3,-3);
wnd.document.open("text/html; charset=" + k.charset);}
wnd.document.write(html);
wnd.document.close();
}
);
}
var previewButton = new ToolbarButton({
'name': 'preview',
'button_type': 'img',
'button_icon': KtmlRelativeImagePath + 'preview.gif',
'command_type': $KT_JS_STRING,
'command_string':'previewKTML(this.ktml)'
});
ktml_pg_content_<?php echo $cnt1; ?>.addCustomButton(previewButton, 'toggle_fullscreen', 0);
                </script>
      <!-- End KTML Preview Function -->

There is a couple of issues with KTML that I found to much hassle to try and correct. So I am using TinyMCE as well as a jquery based file manages to replace KTML.
Works well and is easy to integrate.

Timespider · Post by **Timespider** » 2011-01-12 00:39

I have put it below like you pointed out & now it works. Just a note, on this site under documents KTML 4 then extending KTML 4 creating a preview page it says to put the code before the object, I'm using DW8 & as this thread says it didn't work. For anyone else who has this issue the code below is the working one for me & compares equally to my first post, just rename article_art with the correct name from your database.

Thanks Fred your a great help

Code: Select all

<script type="text/javascript">
  // KTML4 Object
  ktml_article_art_<?php echo $cnt1; ?> = new ktml("article_art_<?php echo $cnt1; ?>");
</script>
<!-- KTML Preview Function -->
      <script>
function previewKTML(k) {
k.save(function() {
var value = k.formElement.value;
wnd = utility.window.openWindow("ktml_preview_window", k.iframeSRC2, window.screen.availWidth-5, window.screen.availHeight - 45);
if (wnd) {
html = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' + "\r\n";
html += '<html><head><link href="' + k.getModuleProperty("css", "PathToStyle") + '" rel="stylesheet" type="text/css"></head><body>';
html += value;
html += '<input type="button" value="Close" onclick="window.close()" />';
html += '</body></html>';
wnd.moveTo(-3,-3);
wnd.document.open("text/html; charset=" + k.charset);}
wnd.document.write(html);
wnd.document.close();
}
);
}
var previewButton = new ToolbarButton({
'name': 'preview',
'button_type': 'img',
'button_icon': KtmlRelativeImagePath + 'preview.gif',
'command_type': $KT_JS_STRING,
'command_string':'previewKTML(this.ktml)'
});
ktml_article_art_<?php echo $cnt1; ?>.addCustomButton(previewButton, 'toggle_fullscreen', 0);
                </script>
      <!-- End KTML Preview Function -->

Chris

Post by **Fred** » 2011-01-12 11:02

Thanks for the pointer.
I never noticed it...

Friends of InterAkt Extensions

Friends of InterAkt Extensions

Preview Page & Button

Preview Page & Button

Re: Preview Page & Button

Re: Preview Page & Button

Re: Preview Page & Button