Nicedit for SketchUp (javascript issue)

inteloide

Hello Everybody,

For one of my plugin, I would like to add a Rich Text area.
I have seen that nicedit is a good javascript package to do this. Therefore I try to integrate it in SU.
Nevertheless, I have some difficulties with the event management : it looks like it doesn't work...
Has anybody already work with nicedit ?

Here is the HTML page I want. Inside there is a textarea, converted by nicedit in Rich Text editor, but the event "key up" doesn't trigger at all...snifff


<html>
	<script type="text/javascript" src="../nicEdit.js"></script>
	<script>
		function start(){			 
			var myEditor = new nicEditor({fullPanel ; true }).panelInstance('comments');
			myEditor.addEvent("key", function() { alert('test') }); 
			nicEditors.findEditor('comments').setContent(
				'<a class="someclass" href="http://www.google.com">Click Here</a>'
			);

			$('.nicEdit-main').on('click','.someclass',function(){
				alert('clicked');
			});
			
			$("div.nicEdit-main").keyup(function () {
				alert('clicked');
			});
		}
	</script>

	<body onload="start();">
		<textarea name="comments" id="comments" cols="40"></textarea>
	</body>
</html>

And here are the nicedit files required (to be place in upper folder)
nicedit

Here you have an example to script working (See counter count down when key up)
http://jsfiddle.net/jGLRn/15/

In SU the event is not raised, as trapped by SU...

Thank you in advance for your help.
Inteloide

jolran

Hi. Without testing any code... You might try attaching some meta tags to the HTML, if you havent done so.

Something like.(for windows only)

<meta http-equiv="content-type" content="charset=UTF-8" />
	<meta http-equiv="MSThemeCompatible" content="Yes" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge>

Your javascript library might require a later version of browser than what is automatically loaded from a default webdialog. I think it is reverted to IE8 ? Not lastest one installed.

inteloide

Hello Jolran,

I try to add the meta tags, but it still doesn't work.
I'm surprised that SU webdialog reverse back to IE 8, but I will try other tests in that direction...

In any case, thanks for your answer.
Inteloide

jolran

@unknownuser said:

I try to add the meta tags, but it still doesn't work.

Ah, to bad. That's the only "quick" solution I could think of..
I know nothing about NicEdit, can not comment on it's compability with Sketchup.

I assume you are aware of webdialog focus and issues trapping keyevents ?

http://sketchucation.com/forums/viewtopic.php?f=180%26amp;t=57462

Maybe have a peek into Aerilius different consols, if you wish to solve this sans JS library.
Can't have different color highlighting in a HTML text-inputfield though

BTW, this topic may get moved to the developper section...

Rich O Brien

Moved

tt_su

Visual Studio Express is a nice tool to debug WebDialogs. Install Visual Studio and in your JS code add debugger; where you want to jump into the debugger where you can step through the code, inspect variables and see any exceptions raised.
I think you also need to enable debugging in Internet Explorer advanced settings.

Dan Rathbun

I think you need to declare the var in the global scope, outside the %(#8000BF)[start()] function.

<html>
   <script type="text/javascript" src="../nicEdit.js"></script>
   <script>
      var myEditor;
      function start(){          
         myEditor = new nicEditor({fullPanel ; true }).panelInstance('comments');
         myEditor.addEvent("key", function() { alert('test') }); 
         nicEditors.findEditor('comments').setContent(
            '<a class="someclass" href="http://www.google.com">Click Here</a>'
         );

         $('.nicEdit-main').on('click','.someclass',function(){
            alert('clicked');
         });
         
         $("div.nicEdit-main").keyup(function () {
            alert('clicked');
         });
      }
   </script>

   <body onload="start();">
      <textarea name="comments" id="comments" cols="40"></textarea>
   </body>
</html>

Dan Rathbun

Your keyup function is set to a DIV element of class "nicEdit-main", which does not exist in the example above (in the original post.)

inteloide

Hello,

thank you for your answer.
Actually the main reason why it didn't work, is beceause jQuery was required. Once added, it work fine.

Inteloide