10 replies to this topic

[BDIL]

I found a really simple sollution to implement syntax highlighting in the snippet textarea's, so this will actually work while editing the snippet. I think it looks better then the Helene syntax highlighter from the other topic. I used EditArea to get this done. Here is an example: http://www.cdolivet.net/editarea/editarea/...emple_full.html

To make it work follow these steps:

1. Download EditArea and unpack it on your local HD, you'll see a folder with 3 folders in it: docs, edit_area and exemples. Upload only the edit_area folder (with the .js files in it) into your /media/ folder.


2. Edit the /manager/includes/header.inc.php file and modify this part of the code:

<script type="text/javascript" language="JavaScript1.5" href="./media/script/ieemu.js"></script>
<script type="text/javascript" href="./media/script/domtab.js"></script>

Into:

<script type="text/javascript" language="JavaScript1.5" href="./media/script/ieemu.js"></script>
<script type="text/javascript" href="./media/script/domtab.js"></script>
<script language="javascript" type="text/javascript" src="./media/edit_area/edit_area_full.js"></script>

3. Next edit the /manager/actions/dynamic/mutate_snippet.dynamic.action.php file and modify this part of the code:

<script type="text/javascript">
function deletedocument() {
  if(confirm("<?php echo $_lang['confirm_delete_snippet']; ?>")==true) {
	document.location.href="index.php?id=" + document.mutate.id.value + "&a=25";
  }
}
</script>

Into:

<script type="text/javascript">
function deletedocument() {
  if(confirm("<?php echo $_lang['confirm_delete_snippet']; ?>")==true) {
	document.location.href="index.php?id=" + document.mutate.id.value + "&a=25";
  }
}
</script>
<script language="javascript" type="text/javascript">
editAreaLoader.init({
	id : "snippet_editor"		// textarea id
	,syntax: "php"			// syntax to be uses for highgliting
	,start_highlight: true		// to display with highlight mode on start-up
		,allow_toggle: false
});
</script>

4. And in the same file modify this part of the code:

<div class="subTitle">
	<span class="floatLeft">
	  <img src="media/images/_tx_.gif" width="1" height="5"><br />
	  <a href="#" onClick="documentDirty=false; document.mutate.submit(); saveWait('mutate');" class="doSomethingButton"><?php echo $_lang['save']; ?></a>

Into:

<div class="subTitle">
	<span class="floatLeft">
	  <img src="media/images/_tx_.gif" width="1" height="5"><br />
	  <a href="#" onClick="documentDirty=false; document.mutate.post.value=editAreaLoader.getValue('post'); document.mutate.submit(); saveWait('mutate');" class="doSomethingButton"><?php echo $_lang['save']; ?></a>

5. And also in the same file modify this part of the code:

<textarea name="post" style="width:100%; height: 370px;" onChange='documentDirty=true;'>

Into:

<textarea id="snippet_editor" name="post" style="width:100%; height: 370px;" onChange='documentDirty=true;'>

6. Now you can go edit a snippet and if everything worked you'll see the syntax highlighting.


I'll add the code changes for syntaxt highlighting in the templates and chunks parts too when I have the time, but you can probably figure out yourself how it's done.

Edited by BDIL, 04 October 2006 - 02:02 PM.

[BDIL]

I just found out that the snippet isn't saved when I click save in syntax highlighting mode, I'm trying to find out why, any help would be appreciated here... To make the snippet save, just uncheck the toggle editor box before you press save.

Edited by BDIL, 02 October 2006 - 10:10 AM.

[Ralph]

Several of the available syntax highlighters don't actually allow for editing of the code that is displayed... I have tried several packages and havne't been overly impressed with the flexibility or speed of any of them to date across browser platforms... It may look like you can edit in some of them but you actually cannot... I know I've tested EditArea but don't recall the actual results...

[BDIL]

EditArea allows for editing of the code that is displayed, it works really well. The only problem is that you have to uncheck the "toggle editor" checkbox before saving, or your changes won't be saved.

I think this is because of the documentDirty=true code, which will only register when the syntax highlighting is turned off (this will change the syntax highlighted textarea back into a normal textarea after which you can save the document).

[Ralph]

Ok... If you discover any additional information let us know...

[BDIL]

I was able to fix the problem, I added some javascript code which is now in step 4. Also step 3 has been changed a little. The instructions in the post above are updated. It all works perfectly for me, please let me know if it works for you too.

I only tested it in firefox now.

[Dean]

If you want me to test your install in Safari and Camino, PM me some login specs to a manager where it's installed and I will do it for you :-)

[BDIL]

It works in internet explorer too. I think it will work if tinymce works for you, this will too.

@Dean, it's a local installation, so I can't. Maybe you can install this on your installation, it works great.

[Randy]

BDIL, on Oct 4 2006, 08:04 AM, said:

I was able to fix the problem, I added some javascript code which is now in step 4. Also step 3 has been changed a little. The instructions in the post above are updated. It all works perfectly for me, please let me know if it works for you too.

I only tested it in firefox now.

I've followed your revised instructions. when I [save] the snippet, the word 'false' replaces all the content that was the snippet. The word 'false' is certainly saved, but all other content is lost.

Have you run into this before?

Using 0.6.1.2 with Firefox.

Thanks,

[Randy]

I discovered the error...

Randy, on Nov 25 2006, 10:12 AM, said:

...when I [save] the snippet, the word 'false' replaces all the content that was the snippet.

In step 4 you added this call:

document.mutate.post.value=editAreaLoader.getValue('post');

When I looked at editAreaLoader.getValue:

// allow to get the value of the editarea
	EditAreaLoader.prototype.getValue = function(id){
		if(window.frames["frame_"+id] && editAreas[id]["displayed"]==true){
			return window.frames["frame_"+ id].editArea.textarea.value;	   
		}else if(elem=document.getElementById(id)){
			return elem.value;
		}
		return false;
	};

I noticed it looks for content with getElementById. You pass it the 'name' parameter from the form rather than the ID. So naturally, getValue doesn't find an id parameter of 'post' and it returns 'false' rather than 'elem.value'.

To fix this I changed your call from:

document.mutate.post.value=editAreaLoader.getValue('post');

to:

document.mutate.post.value=editAreaLoader.getValue('snippet_editor');

to match the ID paramater you set in step 5.

Will you please revise your post above?

Hope this is helpful, because now that this works...I'm in a different world. Thanks so much for adding this post!

Regards,

Edited by Randy, 25 November 2006 - 10:41 PM.

[BDIL]

Strange, I can't replicate this problem, I'll try using your modification and if it still works for me I can just add it to the mod itself. Thanks for the info!