Nicedit for SketchUp (javascript issue)

inteloide · 4 May 2014, 18:25

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 · 4 May 2014, 19:58

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 · 5 May 2014, 05:12

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 · 5 May 2014, 07:29

@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 · 5 May 2014, 08:02

Moved

tt_su · 5 May 2014, 09:09

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 · 5 May 2014, 11:41

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 · 5 May 2014, 23:21

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 · 7 May 2014, 19:56

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