1.6.5 Vorlagen bearbeiten mit WYSIWYG erweitern

Forum Partner+Friends LinkUs Downloads KNW Suche TS³ Viewer Twitter Facebook

Sie sind nicht angemeldet. Anmelden

Stifli

kennen Einige hier

Beiträge: 335

Geschlecht: Männlich

Wohnort: -=]Kreuzberg[=-

PHPKIT Version: 1.6.5

Mittwoch, 24. August 2011, 18:35

Vorlagen bearbeiten mit WYSIWYG erweitern

Guten Abend...harter Kern

da ich mich immer wieder über die Kitinterne Vorlagenbearbeitung ärgere, habe ich mir gedacht diese um meinen geliebten Tiny zu erweitern. Mich stört immer diese völlig unkomfortable Bearbeitungsmöglichkeit wenn man im Kit vorlagen editieren will.

1

Code kopieren...
2

in Dreamweaver einfügen
3

bearbeiten
4

kopieren
5

zurück in die Vorlage kopieren
6

Speichern

da der Tiny da echt komfortable Möglichkeiten bietet (Tabellen erstellen und formatieren) Grafiken formatieren.... will ich den integrieren. Ich habe mir einen Button erstellt, bei dem mit draufklick der TinyMce per popup geladen wird.

Nun wird der TinyMce zwar eingeblendet, doch er übernimt nur sporadisch den Code aus dem Bearbeitungsformular. Mal ist er drin...mal nicht...die Variable $template_code habe ich ordnungsgemäß mit in den <div>-container eingebaut...trotzdem ist das alles sehr launisch. Hier ist mal mein code der templates_edit.htm (Zeile 61 - 73)

Hier klicken für weitere Informationen

Quellcode

<head>
<!-- Popupbox -->
<script type='text/javascript' src='../js/jquery.js'></script>
<script type='text/javascript' src='../js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='../js/osx.js'></script>
<!-- Popupbox -->
<!-- Load TinyMCE -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1");
</script>

<script type="text/javascript" src="../tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
	$().ready(function() {
		$('textarea.tinymce').tinymce({
			// Location of TinyMCE script
			script_url : '../tinymce/jscripts/tiny_mce/tiny_mce.js',

			// General options
			language : "de",
			theme : "advanced",
			plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

			// Theme options
			theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
			theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
			theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
			theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,

			// Example content CSS (should be your site CSS)
			content_css : "css/content.css",

			// Drop lists for link/image/media/template dialogs
			template_external_list_url : "lists/template_list.js",
			external_link_list_url : "lists/link_list.js",
			external_image_list_url : "lists/image_list.js",
			media_external_list_url : "lists/media_list.js",

			// Replace values for the template plugin
			template_replace_values : {
				username : "Some User",
				staffid : "991234"
			}
		});
	});
</script>

<!-- /TinyMCE -->

</head>
<body>
<!-- Popupbox -->
<link type='text/css' href='../css/osx.css' rel='stylesheet' media='screen' />
<!-- JS files are loaded at the bottom of the page -->

<!-- TinyMce Popup -->
		<div id="osx-modal-content">
			<div id="osx-modal-title">Webseitenvorschau (WYSIWYG)</div>
			<div class="close"><a href="#" class="simplemodal-close">X</a></div>
			<div id="osx-modal-data">
			<textarea id="elm1" name="elm1" rows="15" cols="80" style="width:100%" class="tinymce">$template_code</textarea>
		
			</div>
	</div>
	
</div>

<!-- TinyMce Popup -->

<script language="Javascript" src="fx/main.js"></script>

<table class="standard" border="0" cellspacing="1" cellpadding="4" width="100%">
	<form name="edittemplate" method="post" action="include.php?path=templates">
	<input type="hidden" name="template_id" value="$template_id" />
	<input type="hidden" name="save" value="$LANG[save]" />
	<input type="hidden" name="delete" value="$LANG[delete]" />
	<input type="hidden" name="cancel" value="$LANG[cancel]" />
 <tr>
  <td class="heads" colspan="4">Vorlage bearbeiten</td>
 </tr>
	$template_edit_error
 <tr>
  <td class="even" width="10%">Vorlagenname</td>
  <td class="odd" width="40%">
	<input type="text" name="template_name" value="$template_name" size="15" class="w90" /></td>
  <td class="even" width="10%">Vorlagenpaket</td>
  <td class="odd" width="40%">
	<select name="templatepack_id" size="1" class="w90">
	<option value="0" $select0>$LANG[templatepack_modified]</option>
	$pack_select
	</select></td>
 </tr>
 <tr>
  <td class="even" colspan="4">
	<table border="0" cellspacing="0" cellpadding="0" width="100%">
	 <tr>
	  <td nowrap>
		<input type="button" value="$LANG[preview]" onClick="javascript:previewTemplate()" />
		<input type="button" value="$LANG[copy]" onClick="javascript:HighlightAndCopy()" />
		<input type="reset" value="$LANG[reset]" />
        <input type='button' name='osx' value='WYSIWYG' class='osx demo'/>
       </td>
	  <td nowrap align="right">
		<input name="searchstring" type="text" size="10" onChange="n=0;" />
		<input type="button" value="$LANG[search]" onClick="javascript:highlightSearch(document.edittemplate.searchstring.value)" /></td>
	 </tr>
	</table>
  </td>
 </tr>
  <tr>
  <td class="odd" colspan="4">
	<table border="0" cellspacing="0" cellpadding="0" width="100%">
	 <tr>
	  <td><textarea class="code"  name="template_value" cols="60" rows="30" wrap="off" style="width: 100%">$template_code</textarea></td>
	 </tr>
	</table>
    </td>
 </tr>
 <tr>
  <td class="heads" colspan="4" align="center">
	<input type="submit" name="action" value="$LANG[save]" />
	<input type="submit" name="action" value="$LANG[cancel]" />
	<input type="submit" name="action" value="$LANG[delete]" class="highlight" /></td>
 </tr>
	</form>
</table>

Quellcode

<head>
<!-- Popupbox -->
<script type='text/javascript' src='../js/jquery.js'></script>
<script type='text/javascript' src='../js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='../js/osx.js'></script>
<!-- Popupbox -->
<!-- Load TinyMCE -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1");
</script>

<script type="text/javascript" src="../tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
	$().ready(function() {
		$('textarea.tinymce').tinymce({
			// Location of TinyMCE script
			script_url : '../tinymce/jscripts/tiny_mce/tiny_mce.js',

			// General options
			language : "de",
			theme : "advanced",
			plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

			// Theme options
			theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
			theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
			theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
			theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,

			// Example content CSS (should be your site CSS)
			content_css : "css/content.css",

			// Drop lists for link/image/media/template dialogs
			template_external_list_url : "lists/template_list.js",
			external_link_list_url : "lists/link_list.js",
			external_image_list_url : "lists/image_list.js",
			media_external_list_url : "lists/media_list.js",

			// Replace values for the template plugin
			template_replace_values : {
				username : "Some User",
				staffid : "991234"
			}
		});
	});
</script>

<!-- /TinyMCE -->

</head>
<body>
<!-- Popupbox -->
<link type='text/css' href='../css/osx.css' rel='stylesheet' media='screen' />
<!-- JS files are loaded at the bottom of the page -->

<!-- TinyMce Popup -->
		<div id="osx-modal-content">
			<div id="osx-modal-title">Webseitenvorschau (WYSIWYG)</div>
			<div class="close"><a href="#" class="simplemodal-close">X</a></div>
			<div id="osx-modal-data">
			<textarea id="elm1" name="elm1" rows="15" cols="80" style="width:100%" class="tinymce">$template_code</textarea>
		
			</div>
	</div>
	
</div>

<!-- TinyMce Popup -->

<script language="Javascript" src="fx/main.js"></script>

<table class="standard" border="0" cellspacing="1" cellpadding="4" width="100%">
	<form name="edittemplate" method="post" action="include.php?path=templates">
	<input type="hidden" name="template_id" value="$template_id" />
	<input type="hidden" name="save" value="$LANG[save]" />
	<input type="hidden" name="delete" value="$LANG[delete]" />
	<input type="hidden" name="cancel" value="$LANG[cancel]" />
 <tr>
  <td class="heads" colspan="4">Vorlage bearbeiten</td>
 </tr>
	$template_edit_error
 <tr>
  <td class="even" width="10%">Vorlagenname</td>
  <td class="odd" width="40%">
	<input type="text" name="template_name" value="$template_name" size="15" class="w90" /></td>
  <td class="even" width="10%">Vorlagenpaket</td>
  <td class="odd" width="40%">
	<select name="templatepack_id" size="1" class="w90">
	<option value="0" $select0>$LANG[templatepack_modified]</option>
	$pack_select
	</select></td>
 </tr>
 <tr>
  <td class="even" colspan="4">
	<table border="0" cellspacing="0" cellpadding="0" width="100%">
	 <tr>
	  <td nowrap>
		<input type="button" value="$LANG[preview]" onClick="javascript:previewTemplate()" />
		<input type="button" value="$LANG[copy]" onClick="javascript:HighlightAndCopy()" />
		<input type="reset" value="$LANG[reset]" />
        <input type='button' name='osx' value='WYSIWYG' class='osx demo'/>
       </td>
	  <td nowrap align="right">
		<input name="searchstring" type="text" size="10" onChange="n=0;" />
		<input type="button" value="$LANG[search]" onClick="javascript:highlightSearch(document.edittemplate.searchstring.value)" /></td>
	 </tr>
	</table>
  </td>
 </tr>
  <tr>
  <td class="odd" colspan="4">
	<table border="0" cellspacing="0" cellpadding="0" width="100%">
	 <tr>
	  <td><textarea class="code"  name="template_value" cols="60" rows="30" wrap="off" style="width: 100%">$template_code</textarea></td>
	 </tr>
	</table>
    </td>
 </tr>
 <tr>
  <td class="heads" colspan="4" align="center">
	<input type="submit" name="action" value="$LANG[save]" />
	<input type="submit" name="action" value="$LANG[cancel]" />
	<input type="submit" name="action" value="$LANG[delete]" class="highlight" /></td>
 </tr>
	</form>
</table>

Der betreffende div-container ist mit "TinyMcePopup" auskommentiert. So sollte es eigentlich aussehen wenn es richtig funzt. (Abgesehen von den css Fehlern, die aber nun behoben sind.

MfG Stifli...der schon wieder nix besseres zu tun hat....

OffTopic