Initial Commit Update Telerik

LPWeb20/RichtextEditor/skins/_shared/_layout.xml

@@ -0,0 +1,375 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<panel jsml-class="_shared_layout_{skin}_{color}_{toolbar}" dock="fill" overflow="visible" jsml-append="false">
+
+		<jsml-ref name="rteborderstyle"/>
+
+		<initialize>
+			self.toggle_css_class("tbtoolbar_{skin}");
+			self.toggle_css_class("tbtoolbar_{color}");
+			self.toggle_css_class("tbtoolbar_{skin}_{color}");
+		</initialize>
+
+		<jsml-ref name="toolbar_{toolbar}_{skin}_{color}"/>
+
+	</panel>
+
+	<jsml-def name="_shared_layout_{skin}_{color}">
+
+		<initialize>
+			self.toggle_css_class("rteskin_{skin}");
+			self.toggle_css_class("rteskin_{color}");
+			self.toggle_css_class("rteskin_{skin}_{color}");
+		</initialize>
+
+		<panel dock="bottom" height="26" padding="1,1,1,3" border_width="1,0,0,0" css_class="rtelayoutbottom" visible="false">
+			<panel jsml-base="tbgroup_{skin}_{color}" dock="left" margin="0,2,0,2" visible="false">
+				<image jsml-base="image_{skin}_{color}" command="TabEdit" imagename="design" overflow="visible" tooltip="@TABEDIT">
+					<attach name="editor_ready" arguments="je,editor">
+						if(!editor._config.showeditmode)self.set_visible(false);
+					</attach>
+				</image>
+				<image jsml-base="image_{skin}_{color}" command="TabCode" imagename="htmlview" overflow="visible" tooltip="@TABCODE">
+					<attach name="editor_ready" arguments="je,editor">
+						if(!editor._config.showcodemode)self.set_visible(false);
+					</attach>
+				</image>
+				<image jsml-base="image_{skin}_{color}" command="TabView" imagename="preview" overflow="visible" tooltip="@TABVIEW">
+					<attach name="editor_ready" arguments="je,editor">
+						if(!editor._config.showpreviewmode)self.set_visible(false);
+					</attach>
+				</image>
+				<attach name="editor_ready" arguments="je,editor">
+					if(editor._config.showeditmode)self.set_visible(true);
+					if(editor._config.showcodemode)self.set_visible(true);
+					if(editor._config.showpreviewmode)self.set_visible(true);
+				</attach>
+			</panel>
+			<panel dock="right" jsml-base="rtepluginholder" plugin="resizecorner" width="10" overflow="visible" />
+			<panel dock="right" jsml-base="rtepluginholder" plugin="zoomview" tooltip="@ZOOM" width="10" overflow="visible" />
+			<panel dock="right" jsml-base="rtepluginholder" plugin="statistics" width="10" overflow="visible" />
+			<panel dock="fill" jsml-base="rtepluginholder" plugin="taglist" />
+
+			<method name="find_config">
+				<![CDATA[
+					for(var ctrl=self;ctrl!=null;ctrl=ctrl.get_jsml_parent())
+						if(ctrl._rteconfig)return ctrl._rteconfig;
+					]]>
+			</method>
+			<initialize>
+				<![CDATA[
+					setTimeout(function()
+					{
+						var config=self.find_config();
+						if(config&&!config.showbottombar)
+							return;
+						self.set_visible(true);
+					},30);
+					]]>
+			</initialize>
+		</panel>
+
+		<panel jsml-member="tabeditpanel" dock="fill">
+
+			<panel dock="top" overflow_y="visible" padding="1" border_width="0,0,1,0" border_color="#7E9DB9" css_class="rtelayouttop"  visible="false">
+				<method name="find_config">
+					<![CDATA[
+					for(var ctrl=self;ctrl!=null;ctrl=ctrl.get_jsml_parent())
+						if(ctrl._rteconfig)return ctrl._rteconfig;
+					]]>
+				</method>
+				<initialize>
+					<![CDATA[
+					setTimeout(function()
+					{
+						var config=self.find_config();
+						if(config&&!config.showtoolbar)
+							return;
+						self.set_visible(true);
+						setTimeout(function()
+						{
+							var ctrl=jsml.class_create_instance("_shared_layout_{skin}_{color}_{toolbar}");
+							self.append_child(ctrl);
+							if(self._rteinstance)ctrl.invoke_recursive("editor_ready",self._rteinstance);
+						},222);
+					},10);
+					]]>
+				</initialize>
+				<attach name="editor_ready" arguments="je,editor">
+					<![CDATA[
+					self._rteinstance=editor;
+					editor.AttachEvent("ReloadToolbar",function()
+					{
+						self.dispose_children();
+						var ctrl=jsml.class_create_instance("_shared_layout_{skin}_{color}_{toolbar}");
+						self.append_child(ctrl);
+						ctrl.invoke_recursive("editor_ready",editor);
+					});
+					]]>
+				</attach>
+			</panel>
+
+			<panel jsml-local="rulerpanel1" visible="false" dock="top" height="15" back_color="white">
+				<panel dock="left" width="15" height="15" border_color="#9EAAB6" border_width="0,1,1,0"></panel>
+				<panel dock="fill" background="white url({folder}images/ruler-horizontal.png) repeat-x">
+				</panel>
+			</panel>
+			<panel jsml-local="rulerpanel2" visible="false" dock="left" width="15" background="white url({folder}images/ruler-vertical.png) repeat-y" back_color="white"></panel>
+
+			<htmlcontrol jsml-member="editor_frame_container" dock="fill" back_color="white">
+
+			</htmlcontrol>
+
+			<panel dock="fill" cursor="wait" back_color="white">
+				<attach name="editor_ready" arguments="jevent,arg0">
+					jsml.dispose_delay(self);
+				</attach>
+			</panel>
+
+		</panel>
+
+		<panel jsml-member="tabcodepanel" dock="fill" visible="false">
+			<panel dock="top" overflow_y="visible" padding="3,1,1,3" border_width="0,0,1,0" border_color="#7E9DB9" css_class="rtelayouttop" >
+				<panel dock="fill" jsml-base="rtepluginholder" plugin="toolbar_code" />
+			</panel>
+
+			<panel dock="fill" back_color="black" >
+				<textbox jsml-member="codebox" text_mode="multipleline" dock="fill" back_color="white" border_color="white" border_width="5,0,5,5" font="normal 12px courier new" >
+					<attach name="editor_ready" arguments="jevent,arg0">
+						self._rteinstance=arg0;
+					</attach>
+					<attach name="keydown" arguments="je,de">
+						var editor=self._rteinstance;
+						if(de.keyCode==editor._config.event_fullscreenkeycode)
+						{
+						editor.ExecUICommand(null,"FullScreen");
+						return de.cancel_default();
+						}
+					</attach>
+				</textbox>
+			</panel>
+
+		</panel>
+
+		<panel jsml-member="tabviewpanel" dock="fill" visible="false">
+			<panel dock="top" overflow_y="visible" padding="3,1,1,3" border_width="0,0,1,0" border_color="#7E9DB9" css_class="rtelayouttop" >
+				<panel dock="fill" jsml-base="rtepluginholder" plugin="toolbar_view" />
+			</panel>
+			<htmlcontrol jsml-member="previewcontrol" dock="fill" back_color="white">
+
+			</htmlcontrol>
+		</panel>
+
+		<method name="synctext">
+			<![CDATA[
+			if(self._stopsync)return;
+			self.srchtml=self._rteinstance.GetHtmlCode();
+			self.codebox.set_text(self.srchtml);
+			function handletimer()
+			{
+				self.synctexttimerid=setTimeout(handletimer,10);
+				
+				if(self.srchtml!=self.codebox.get_text())
+				{
+					self.srchtml=self.codebox.get_text();
+					self._stopsync=true;
+					self._rteinstance.SetHtmlCode(self.srchtml);
+					self._stopsync=false;
+				}
+			}
+			handletimer();
+			]]>
+		</method>
+		<method name="updatepanels" arguments="sync">
+			<![CDATA[
+			self.tabeditpanel.set_visible(self._rteinstance.IsTabEdit());
+			self.tabcodepanel.set_visible(self._rteinstance.IsTabCode());
+			self.tabviewpanel.set_visible(self._rteinstance.IsTabView());
+			clearTimeout(self.synctexttimerid);
+			
+			self.codebox.set_disabled(self._rteinstance._config.readonly);
+			
+			if(sync&&self._rteinstance.IsTabCode())
+			{
+				self.synctext();
+			}
+			if(sync)
+			{
+				if(self.previewiframe)
+				{
+					self.previewiframe.setAttribute("src",self._rteinstance._config.blankfileurl);
+					self.previewcontrol._content.innerHTML="";
+					self.previewiframe=null;
+				}
+			}
+			if(sync&&self._rteinstance.IsTabView())
+			{
+				self.updatepreviewframe();
+			}
+			]]>
+		</method>
+		<method name="updatepreviewframe" arguments="doprint">
+			<![CDATA[
+			
+			var updated=false;
+					 
+			var config=self._rteinstance._config;
+			function doupdate()
+			{
+				if(updated)return;
+				updated=true;
+										 
+				self.previewiframe.onload=jsml.empty_function;
+
+				if(!self.previewiframe.inited)
+					self.previewiframe.inited=self._rteinstance.InitPreviewFrame(self.previewiframe);
+				
+				if(!doprint)
+					return;
+
+				var framewin=self.previewiframe.contentWindow;
+				var time=new Date().getTime();
+				framewin.document.execCommand("print",false,null);
+				if(framewin.print&&new Date().getTime()-time<222)framewin.print();
+				
+				if(jsml.chrome)
+				{
+					setTimeout(function()
+					{
+						if(new Date().getTime()-time>222)
+							return;
+						alert(self._rteinstance.GetLangText("printblocked"));
+					},100);
+					
+				}
+			}
+	
+			if(self.previewiframe)
+			{
+				doupdate();
+				self.adjustiframesize();
+			}
+			else
+			{
+				var iframe=document.createElement("iframe");
+				self.previewiframe=iframe;
+				iframe.onload=doupdate;
+				iframe.setAttribute("sendbox","sendbox");
+				iframe.setAttribute("src",self._rteinstance._config.blankfileurl);
+				iframe.setAttribute("frameborder","0");
+				self.previewcontrol._content.appendChild(iframe);
+				jsml.queue_resumehandler(function(){self.adjustiframesize()});
+			}
+			
+			function checkie678()
+			{
+				if(updated)return;
+				if(!self.previewiframe)return;
+				if(self.previewiframe.document.readyState=="complete"&&self.previewiframe.document.documentElement)
+					doupdate();
+				else
+					setTimeout(checkie678,100);
+			}
+			if(jsml.msie5678)setTimeout(checkie678,100);
+			]]>
+		</method>
+		<method name="adjustiframesize">
+			if(!self.previewiframe)return;
+			self.previewiframe.style.width=self.previewcontrol.get_client_width()+"px";
+			self.previewiframe.style.height=self.previewcontrol.get_client_height()+"px";
+			jsml.queue_resumehandler(function(){self.previewcontrol.invoke_notify_content()});
+		</method>
+		<attach name="resize">
+			jsml.queue_resumehandler(function(){self.adjustiframesize()});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,arg0">
+			<![CDATA[
+			self._rteinstance=arg0;
+			self.mode="edit";
+			self.updatepanels();
+			
+			self.codebox.codetabindent=arg0._config.codetabindent
+			
+			if(self._rteinstance._config.showrulers)
+			{
+				rulerpanel1.set_visible(true);
+				rulerpanel2.set_visible(true);
+			}
+			
+			self._rteinstanceeventid=self._rteinstance.AttachEvent(function(editor,e){
+				if(e.Name=="TabModeChanged")
+				{
+					self.updatepanels(true);
+					if(self._rteinstance.IsTabCode())
+						self.codebox.start_log();
+					else
+						self.codebox.stop_log();
+				}
+				if(e.Name=="FullPageChanged")
+				{
+					self.updatepreviewframe(false);
+				}
+				if(e.Name=="TextChanged")
+				{
+					if(self._rteinstance.IsTabCode())
+						self.synctext();
+				}
+				if(e.Name=="DoFocus")
+				{
+					if(self._rteinstance.IsTabCode())
+						self.codebox.focus();
+				}
+				if(e.Name=="TCCut"||e.Name=="TCCopy")
+				{
+					var html=self.codebox.get_range_text();
+					if(html)
+					{
+						e.ReturnValue=html;
+						if(e.Name=="TCCut")
+						{
+							self.codebox.set_range_text("");
+						}
+					}
+				}
+				if(e.Name=="TCPaste")
+				{
+					self.codebox.set_range_text(e.Arguments[0]);
+					self.codebox.collapse(false);
+				}
+				if(e.Name=="TCAppend")
+				{
+					self.codebox.select_all();
+					self.codebox.collapse(false);
+					self.codebox.set_range_text(e.Arguments[0]);
+					self.codebox.collapse(false);
+				}
+				if(e.Name=="ExecCommand")
+				{
+					switch(e.Arguments[0].toLowerCase())
+					{
+					case "print":
+						self.updatepreviewframe(true);
+						break;
+					case "tc_undo":
+						self.codebox.undo();
+						break;
+					case "tc_redo":
+						self.codebox.redo();
+						break;
+					case "tc_selectall":
+						self.codebox.select_all();
+						break;
+					case "tc_delete":
+						self.codebox.set_range_text("");
+						break;
+					}
+				}
+			});
+			]]>
+		</attach>
+
+	</jsml-def>
+
+</jsml>

LPWeb20/RichtextEditor/skins/_shared/_toolbartemplate.xml

@@ -0,0 +1,381 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_switchribbon" jsml-base="image_{skin}_{color}" command="SwitchRibbon" imagename="paragraph" tooltip="@SWITCHRIBBON" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_ribbonpaste" jsml-base="ribbonimage_{skin}_{color}" command="Paste" imagename="ribbonpaste" tooltip="@PASTE" vertical_align="middle" horizontal_align="center"/>
+	<image jsml-class="item_{toolbar}_{skin}_{color}_paste" jsml-base="image_{skin}_{color}" command="Paste" tooltip="@PASTE" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_pastetext" jsml-base="image_{skin}_{color}" command="PasteText" tooltip="@PASTETEXT" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_pasteword" jsml-base="image_{skin}_{color}" command="PasteWord" tooltip="@PASTEWORD" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_save" jsml-base="image_{skin}_{color}" command="Save" tooltip="@SAVE"/>
+	<image jsml-class="item_{toolbar}_{skin}_{color}_new" jsml-base="image_{skin}_{color}" command="New" tooltip="@NEW" imagename="newdoc" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_print" jsml-base="image_{skin}_{color}" command="Print" tooltip="@PRINT" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_spellcheck" jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="spellcheck" tooltip="@SPELLCHECK" imagename="spell" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_cut" jsml-base="image_{skin}_{color}" command="Cut" tooltip="@CUT">
+		<attach name="mousehover">
+			self._ResetFCButton();
+		</attach>
+	</image>
+	<image jsml-class="item_{toolbar}_{skin}_{color}_copy" jsml-base="image_{skin}_{color}" command="Copy" tooltip="@COPY">
+		<attach name="mousehover">
+			self._ResetFCButton();
+		</attach>
+	</image>
+	<image jsml-class="item_{toolbar}_{skin}_{color}_delete" jsml-base="image_{skin}_{color}" command="Delete" tooltip="@DELETE" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_find" jsml-base="image_{skin}_{color}" command="Find" tooltip="@FINDANDREPLACE" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_undo" jsml-base="image_{skin}_{color}" command="Undo" tooltip="@UNDO" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_redo" jsml-base="image_{skin}_{color}" command="Redo" tooltip="@REDO" />
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_formatpainter" jsml-base="splitbtn_{skin}_{color}" tooltip="@FORMATPAINTER" imagename="formatpainter">
+		<attach name="click" arguments="je,e">
+			<![CDATA[
+						if(e.ctrlKey||e.altKey)
+							return self._rteinstance.ExecCommand("formatpainterfetch")
+						if(self._rteinstance.CanExecCommand("formatpainterapply"))
+							self._rteinstance.ExecCommand("formatpainterapply")
+						else
+							self.invoke_event("splitclick");
+						]]>
+		</attach>
+		<attach name="splitclick">
+			formatpaintermenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			formatpaintermenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			formatpaintermenu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="formatpaintermenu" jsml-append="false">
+			<panel jsml-base="rtemenuitem" command="formatpainterfetch" imagename="copy" text="@FORMATPAINTERFETCH"  />
+			<panel jsml-base="rtemenuitem" command="formatpainterapply" imagename="formatpainter" text="@FORMATPAINTERAPPLY"  />
+			<panel jsml-base="rtemenuitem" command="formatpainterclear" imagename="newdoc" text="@FORMATPAINTERCLEAR"  />
+		</panel>
+	</panel>
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_fontname" jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontname.xml" width="88" text="@FontName" stylename="fontname" />
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_fontsize" jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontsize.xml" width="65" text="@FontSize" stylename="fontsize" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_bold" jsml-base="image_{skin}_{color}" command="Bold" tooltip="@BOLD" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_italic" jsml-base="image_{skin}_{color}"  command="Italic" tooltip="@ITALIC" />
+
+
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_underline" jsml-base="image_{skin}_{color}"  command="Underline" tooltip="@UNDERLINE" imagename="under" />
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_linethrough" jsml-base="image_{skin}_{color}"  command="Linethrough" tooltip="@LINETHROUGH" imagename="strike" />
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_overline" jsml-base="image_{skin}_{color}" command="Overline" tooltip="@OVERLINE" imagename="Overline" />
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_underlinemenu" jsml-base="splitbtn_{skin}_{color}" command="Underline" tooltip="@UNDERLINE" imagename="under" >
+		<attach name="splitclick">
+			decorationmenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			decorationmenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			decorationmenu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="decorationmenu" jsml-append="false">
+			<panel jsml-base="rtemenuitem"  command="Linethrough" text="@LINETHROUGH" imagename="strike" />
+			<panel jsml-base="rtemenuitem" command="Overline" text="@OVERLINE" imagename="Overline" />
+		</panel>
+	</panel>
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_forecolor" jsml-base="splitbtn_{skin}_{color}" command="ForeColor" tooltip="@TEXTCOLOR">
+		<jsml-ref name="rtecommandcolor"/>
+	</panel>
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_backcolor" jsml-base="splitbtn_{skin}_{color}" command="BackColor" tooltip="@BACKCOLOR">
+		<jsml-ref name="rtecommandcolor"/>
+	</panel>
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_superscript" jsml-base="image_{skin}_{color}" command="Superscript" tooltip="@SUPERSCRIPT" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_subscript" jsml-base="image_{skin}_{color}" command="Subscript" tooltip="@SUBSCRIPT" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_ucase" jsml-base="image_{skin}_{color}" command="Ucase" tooltip="@UPPERCASE" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_lcase" jsml-base="image_{skin}_{color}" command="Lcase" tooltip="@UPPERCASE" />
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_changecase" jsml-base="splitbtn_{skin}_{color}" imagename="Ucase" tooltip="@CHANGECASE" >
+		<attach name="click,splitclick">
+			textcasemenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			textcasemenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			textcasemenu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="textcasemenu" jsml-append="false">
+			<panel jsml-base="rtemenuitem"  command="Ucase" text="@UPPERCASE"  />
+			<panel jsml-base="rtemenuitem" command="Lcase" text="@LOWERCASE"  />
+		</panel>
+	</panel>
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_removeformat" jsml-base="image_{skin}_{color}" command="RemoveFormat" tooltip="@REMOVEFORMAT" imagename="unformat" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_cleancode" jsml-base="image_{skin}_{color}" command="CleanCode" tooltip="@CLEANCODE" imagename="cleanup" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_selectall" jsml-base="image_{skin}_{color}" command="SelectAll" tooltip="@SELECTALL" />
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_paragraphs" jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setparagraph.xml" width="82" text="@Paragraphs" stylename="paragraph" />
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_styles" jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setstyles.xml" width="62" text="@Styles" />
+
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_justifyleft" jsml-base="image_{skin}_{color}" command="JustifyLeft" tooltip="@JUSTIFYLEFT" imagename="left" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_justifycenter" jsml-base="image_{skin}_{color}" command="JustifyCenter" tooltip="@JUSTIFYCENTER" imagename="center" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_justifyright" jsml-base="image_{skin}_{color}" command="JustifyRight" tooltip="@JUSTIFYRIGHT" imagename="right" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_justifyfull" jsml-base="image_{skin}_{color}" command="JustifyFull" tooltip="@JUSTIFYFULL" imagename="justifyfull" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_justifynone" jsml-base="image_{skin}_{color}" command="JustifyNone" tooltip="@JUSTIFYNONE" imagename="justifynone" />
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_justifymenu" jsml-base="splitbtn_{skin}_{color}" tooltip="@JUSTIFY" imagename="left">
+		<attach name="click,splitclick">
+			justifymenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			justifymenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			justifymenu.dispose();
+		</attach>
+		<attach name="update_statusui">
+			<![CDATA[
+			var editor=self.find_editor();
+			var arr=justifymenu.get_children();
+			for(var i=arr.length-1;i>=0;i--)
+			{
+				var item=arr[i];
+				var cmd=item.get_command();
+				if(!editor.QueryCommand(cmd))
+					continue;
+				if(self._lastjustify==cmd)
+					return;
+				self._lastjustify=cmd;
+				self.set_imagename(item.get_imagename());
+				self.set_checked(cmd!="JustifyNone");
+				return;
+			}
+			]]>
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="justifymenu" jsml-append="false">
+			<panel jsml-base="rtemenuitem"  command="JustifyLeft" text="@JUSTIFYLEFT" imagename="left" />
+			<panel jsml-base="rtemenuitem" command="JustifyCenter" text="@JUSTIFYCENTER" imagename="center" />
+			<panel jsml-base="rtemenuitem" command="JustifyRight" text="@JUSTIFYRIGHT" imagename="right" />
+			<panel jsml-base="rtemenuitem"  command="JustifyFull" text="@JUSTIFYFULL" imagename="justifyfull" />
+			<panel jsml-base="rtemenuitem" command="JustifyNone" text="@JUSTIFYNONE" imagename="justifynone" />
+		</panel>
+	</panel>
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_lineheight" jsml-base="splitbtn_{skin}_{color}" command="LineHeight" imagename="lineheight" tooltip="@LINEHEIGHT">
+		<attach name="click,splitclick">
+			lineheightmenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			lineheightmenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			lineheightmenu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="lineheightmenu" jsml-append="false">
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="100%" text="100%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="110%" text="110%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="115%" text="115%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="120%" text="120%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="130%" text="130%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="140%" text="140%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="150%" text="150%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="160%" text="160%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="180%" text="180%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="200%" text="200%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="250%" text="250%"  />
+			<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="300%" text="300%"  />
+			<panel jsml-base="rtemenuspliter" />
+			<panel jsml-base="rtemenuitem"  text="@TEXT| |@STYLES">
+				<attach name="click">
+					var editor=self.find_editor();
+					var node=editor.EnsureParagraph();
+					if(node)editor.ShowPropertiesDialog(node,{styletab:"text"})
+				</attach>
+			</panel>
+		</panel>
+	</panel>
+
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_ltr" jsml-base="image_{skin}_{color}" command="LTR" tooltip="@DIRECTION_LTR" imagename="dir_ltr" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_rtl" jsml-base="image_{skin}_{color}" command="RTL"  tooltip="@DIRECTION_RTL" imagename="dir_rtl" />
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_insertlinemenu" jsml-base="splitbtn_{skin}_{color}" command="InsertBreak" tooltip="@INSERTBREAKRULE" imagename="break" >
+		<attach name="splitclick">
+			insertbrmenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			insertbrmenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			insertbrmenu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="insertbrmenu" jsml-append="false">
+			<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERTWBR" imagename="wbr" />
+			<panel jsml-base="rtemenuitem" command="InsertDiv" text="@INSERTDIV" imagename="div" />
+			<panel jsml-base="rtemenuitem" command="InsertParagraph" text="@INSERTPARAGRAPH" imagename="p" />
+			<panel jsml-base="rtemenuitem"  command="InsertHorizontalRule" text="@INSERTHORIZONTALRULE" imagename="rule" />
+			<panel jsml-base="rtemenuitem" command="InsertPageBreak" text="@INSERTPAGEPRINTBREAK" imagename="InsertPageBreak" />
+			<panel jsml-base="rtemenuitem" command="InsertTopLine" text="@INSERTTOPLINE" imagename="topline" />
+			<panel jsml-base="rtemenuitem" command="InsertBottomLine" text="@INSERTBOTTOMLINE" imagename="bottomline" />
+		</panel>
+	</panel>
+
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_insertorderedlist" jsml-base="splitbtn_{skin}_{color}" command="InsertOrderedList" tooltip="@ORDEREDLIST" imagename="numlist" >
+		<attach name="splitclick">
+			listolmenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			listolmenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			listolmenu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="listolmenu" jsml-append="false">
+			<panel jsml-base="rtemenuitem"  command="InsertOrderedList" arguments="decimal" noactive="1" text="1,2,3,4,5" imagename="blank20"  />
+			<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-latin" noactive="1" text="a,b,c,d,e" imagename="blank20"  />
+			<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-latin" noactive="1" text="A,B,C,D,E" imagename="blank20"  />
+			<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-roman" noactive="1" text="ⅰ,ⅱ,ⅲ,ⅳ,ⅴ" imagename="blank20">
+				<initialize>
+					self.label.set_margin([0,0,0,4])
+				</initialize>
+			</panel>
+			<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-roman" noactive="1" text="Ⅰ,Ⅱ,ⅢⅢ,Ⅳ,Ⅴ" imagename="blank20">
+				<initialize>
+					self.label.set_margin([0,0,0,4])
+				</initialize>
+			</panel>
+			<!--<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="cjk-ideographic" text="一,二,三,四,五" imagename="blank20"  />-->
+			<!-- NOTE:check the css list-style-type -->
+		</panel>
+	</panel>
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_insertunorderedlist" jsml-base="splitbtn_{skin}_{color}" command="InsertUnorderedList" tooltip="@UNORDEREDLIST" imagename="bullist">
+		<attach name="splitclick">
+			listulmenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			listulmenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			listulmenu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="listulmenu" jsml-append="false">
+			<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="disc" noactive="1" imagename="ul-disc" text="@UL_DISC"  />
+			<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="circle" noactive="1" imagename="ul-circle" text="@UL_CIRCLE"  />
+			<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="square" noactive="1" imagename="ul-square" text="@UL_SQUARE"  />
+		</panel>
+	</panel>
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_outdent" jsml-base="image_{skin}_{color}" command="Outdent" tooltip="@OUTDENT" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_indent" jsml-base="image_{skin}_{color}" command="Indent" tooltip="@INDENT" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertblockquote" jsml-base="image_{skin}_{color}" command="InsertBlockQuote" tooltip="@INSERTBLOCKQUOTE" imagename="blockquote" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_inserttable" jsml-base="image_{skin}_{color}" command="ShowXmlFloatbox" arguments="inserttable.xml" tooltip="@INSERTTABLE" imagename="inserttable" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_ribbontable" jsml-base="ribbonimage_{skin}_{color}" command="ShowXmlFloatbox" arguments="inserttable.xml" imagename="ribbontable" tooltip="@INSERTTABLE" vertical_align="middle" horizontal_align="center"/>
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_insertform" jsml-base="splitbtn_{skin}_{color}" tooltip="@INSERTFORM" imagename="InsertForm" >
+		<attach name="click,splitclick">
+			insertformmenu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			insertformmenu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			insertformmenu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="insertformmenu" jsml-append="false">
+
+			<panel jsml-base="rtemenuitem" command="InsertForm" text="@INSERTFORM" />
+			<panel jsml-base="rtemenuitem" command="InsertTextarea" text="@INSERTTEXTAREA" imagename="textarea" />
+			<panel jsml-base="rtemenuitem" command="InsertInpText" text="@INSERTINPTEXT" imagename="textbox" />
+			<panel jsml-base="rtemenuitem" command="InsertInpPassword" text="@INSERTINPPASSWORD" imagename="passwordfield" />
+			<panel jsml-base="rtemenuitem" command="InsertInpHidden" text="@INSERTINPHIDDEN" imagename="hiddenfield" />
+			<panel jsml-base="rtemenuitem" command="InsertInpFile" text="@INSERTINPFILE" imagename="document"/>
+			<panel jsml-base="rtemenuitem" command="InsertInpImage" text="@INSERTINPIMAGE" imagename="image" />
+			<panel jsml-base="rtemenuitem" command="InsertInpReset" text="@INSERTINPRESET" imagename="reset" />
+			<panel jsml-base="rtemenuitem" command="InsertInpSubmit" text="@INSERTINPSUBMIT" imagename="submit" />
+			<panel jsml-base="rtemenuitem" command="InsertRadioBox" text="@INSERTRADIOBOX" imagename="optionbutton" />
+			<panel jsml-base="rtemenuitem" command="InsertCheckbox" text="@INSERTCHECKBOX" imagename="checkbox" />
+			<panel jsml-base="rtemenuitem" command="InsertInpButton" text="@INSERTINPBUTTON" imagename="pushbutton" />
+			<panel jsml-base="rtemenuitem" command="InsertButton" text="@INSERTBUTTON" imagename="pushbutton" />
+			<panel jsml-base="rtemenuitem" command="InsertDropDown" text="@INSERTDROPDOWN" imagename="dropdownbox" />
+			<panel jsml-base="rtemenuitem" command="InsertListbox" text="@INSERTLISTBOX" imagename="listbox" />
+
+		</panel>
+	</panel>
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertbox" jsml-base="image_{skin}_{color}" command="InsertBox" tooltip="@INSERTBOX" imagename="box" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertlayer" jsml-base="image_{skin}_{color}" command="InsertLayer" tooltip="@INSERTLAYER" imagename="layer" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertfieldset" jsml-base="image_{skin}_{color}" command="InsertFieldSet" tooltip="@INSERTFIELDSET" imagename="groupbox" />
+
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_fullscreen" jsml-base="image_{skin}_{color}" command="FullScreen" tooltip="@FULLSCREEN" imagename="fit" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_toggleborder" jsml-base="image_{skin}_{color}" command="ToggleBorder" tooltip="@TOGGLEBORDER" imagename="borders" />
+	<!--<image jsml-base="image_{skin}_{color}" command="ToggleBorderReverse" imagename="borders2" />-->
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_pageproperties" jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="pageproperties" tooltip="@PAGEPROPERTIES" imagename="properties" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_help" jsml-base="image_{skin}_{color}" command="Help"  tooltip="@HELP" />
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_insertlink" jsml-base="splitbtn_{skin}_{color}" command="InsertLink" tooltip="@INSERTLINK" imagename="link" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_unlink" jsml-base="image_{skin}_{color}" command="UnLink" tooltip="@REMOVE| |@LINK" imagename="unlink" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertanchor" jsml-base="image_{skin}_{color}" command="InsertAnchor" tooltip="@INSERTANCHOR" imagename="anchor" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertimagemap" jsml-base="image_{skin}_{color}" command="InsertImageMap" tooltip="@INSERTIMAGEMAP" imagename="imagemap" />
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_insertdate" jsml-base="splitbtn_{skin}_{color}" command="InsertDate" tooltip="@INSERTDATE" imagename="insertdate" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertchars" jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertchars" tooltip="@INSERTCHARS" imagename="specialchar" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_virtualkeyboard" jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="virtualkeyboard" tooltip="@VIRTUALKEYBOARD" imagename="keyboard" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertgallery" jsml-base="image_{skin}_{color}" command="InsertGallery" tooltip="@INSERTGALLERY" imagename="gallery" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertimage" jsml-base="image_{skin}_{color}" command="InsertImage" tooltip="@INSERTIMAGE" imagename="image" />
+
+
+	<panel jsml-class="item_{toolbar}_{skin}_{color}_inserttemplate" jsml-base="splitbtn_{skin}_{color}" command="InsertTemplate" tooltip="@INSERTTEMPLATE" imagename="template" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertdocument" jsml-base="image_{skin}_{color}" command="InsertDocument" tooltip="@INSERTDOCUMENT" imagename="document" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertvideo" jsml-base="image_{skin}_{color}" command="InsertVideo" tooltip="@INSERTVIDEO" imagename="media" />
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_syntaxhighlighter" jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="syntaxhighlighter" tooltip="@SYNTAXHIGHLIGHTER" imagename="code" />
+	<image jsml-class="item_{toolbar}_{skin}_{color}_insertyoutube" jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertyoutube" tooltip="@INSERTYOUTUBE" imagename="youtube"/>
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_googlemap" jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="googlemap" tooltip="@GOOGLEMAP" imagename="map"/>
+
+	<image jsml-class="item_{toolbar}_{skin}_{color}_html5" jsml-base="image_{skin}_{color}" imagename="html5" tooltip="@INSERTHTML5">
+		<attach name="click">
+			inserthtml5menu.show({control:self,stopDispose:true});
+		</attach>
+		<attach name="editor_ready" arguments="jevent,editor">
+			inserthtml5menu.invoke_recursive("editor_ready",editor);
+		</attach>
+		<attach name="disposing">
+			inserthtml5menu.dispose();
+		</attach>
+		<panel jsml-base="floatmenu" jsml-local="inserthtml5menu" jsml-append="false">
+			<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERT| &lt;wbr&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="Mark" text="@INSERT| &lt;mark&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertDetails" text="@INSERT| &lt;details&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertSection" text="@INSERT| &lt;section&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertArticle" text="@INSERT| &lt;article&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertHeader" text="@INSERT| &lt;header&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertFooter" text="@INSERT| &lt;footer&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertHGroup" text="@INSERT| &lt;hgroup&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertAside" text="@INSERT| &lt;aside&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertAudio" text="@INSERT| &lt;audio&gt;" imagename="newtag" />
+			<panel jsml-base="rtemenuitem" command="InsertVideo" text="@INSERT| &lt;video&gt;" imagename="newtag" />
+		</panel>
+	</image>
+
+
+</jsml>

LPWeb20/RichtextEditor/skins/office2003/skin.css

@@ -0,0 +1,403 @@
+/*silver*/
+.rteskin_silver
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#d9d9d9;
+	background-color:#efefef;
+}
+.ribbon_silver
+{
+	background-image:url(../../styles/images/rbribbon_silver.png);
+	background-position:left bottom;
+	background-repeat:no-repeat;
+}
+.ribbon_silver:first-child
+{
+	background-image:none;
+}
+.tbgroup_silver
+{
+	border-left:1px solid #bbbbbb;
+}
+.dropdown_silver
+{
+	border:1px solid #d3d5dc;
+	background-color:white;
+}
+.dropdown_silver .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_silver .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_silver, .splitbtn_silver
+{
+    border:1px solid transparent;
+}
+.splitbtn_silver
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.rbimage_silver{
+	background-image:url(../../styles/images/tbribbon_silver2003.png);
+	background-repeat:repeat-x;
+}
+.dropdown_silver_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_silver_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_silver_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_silver_hovered,.splitbtn_silver_hovered
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_silver_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+.dropdown_silver_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_silver_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver_clicked,.splitbtn_silver_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_silver_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_silver .rtelayouttop
+{
+	border-bottom-color:#d9d9d9!important;
+}
+.rteskin_silver .rtelayoutbottom
+{
+	border-top-color:#d9d9d9!important;
+}
+/*blue*/
+.rteskin_blue
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#99a9bf;
+	background-color:#cad9ec;
+}
+.ribbon_blue
+{
+	background-image:url(../../styles/images/rbribbon_blue.png);
+	background-position:left center;
+	background-repeat:no-repeat;
+}
+.ribbon_blue:first-child
+{
+	background-image:none;
+}
+.tbgroup_blue
+{
+	border-left:1px solid #D6DAE3;
+}
+.dropdown_blue
+{
+	border:1px solid #d3d5dc;
+	background-color:white;
+}
+.dropdown_blue .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_blue .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_blue, .splitbtn_blue
+{
+    border:1px solid transparent;
+}
+.splitbtn_blue
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.rbimage_blue{}
+.dropdown_blue_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_blue_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#dee8f5;
+}
+.splitbtn_blue_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+
+.tbcontrol_blue_hovered,.splitbtn_blue_hovered
+{
+    border-color:#c8c8c8;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_blue_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+
+.dropdown_blue_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_blue_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_blue_clicked,.splitbtn_blue_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_blue_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_blue .rtelayouttop
+{
+	border-bottom-color:#99a9bf!important;
+}
+.rteskin_blue .rtelayoutbottom
+{
+	border-top-color:#99a9bf!important;
+}
+/*silver2*/
+.rteskin_silver2
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#838383;
+	background-color:#d8d7d7;
+}
+.tbtoolbar_silver2
+{
+    background-color:#b7b7b5;
+	background-image:url(../../styles/images/tbtoolbar_silver20032.png);
+	background-position:left bottom;
+	background-repeat:repeat-x;
+}
+.tbgroup_silver2
+{
+	border-left:1px solid #bbbbbb;
+	background-color:#c8c8c8;
+}
+.dropdown_silver2
+{
+	border:1px solid #f9f9f9;
+	background-color:white;	
+}
+.dropdown_silver2 .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+	background-image:url(../../styles/images/tbgroup_silver20032.png);
+	background-position:left center;
+	background-repeat:repeat-x;
+}
+.slitbtn_silver2 .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_silver2, .splitbtn_silver2
+{
+    border:0px solid transparent;
+    background-color:transparent;
+    top:0px!important;
+	height:24px!important;
+    border-left:1px solid #c8c8c8!important;
+}
+.tbcontrol_silver2:first-child,.splitbtn_silver2:first-child
+{
+    border-left-width:0px!important;
+}
+.tbcontrol_silver2 img
+{
+	margin-top:2px!important;
+}
+.splitbtn_silver2 img
+{
+	margin-top:2px!important;	
+}
+.splitbtn_silver2
+{
+    border:0px solid transparent;
+	background-color:transparent;
+}
+.ribbon_silver2:first-child
+{
+	background-image:none;
+}
+.rbimage_silver2
+{
+	background-image:url(../../styles/images/rbribbon_silver2003.png);
+	background-repeat:repeat-x;
+	width:52px!important;
+	border-width:0px!important;
+	left:0px!important;
+	top:2px!important;
+}
+.rbimage_silver2 img
+{
+	margin-left:2px;
+}
+.dropdown_silver2_hovered
+{
+	border-color:#dedede;
+	background-color:white;
+}
+.dropdown_silver2_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_silver2_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_silver2_hovered,.splitbtn_silver2_hovered
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_silver2_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_silver2_hovered
+{
+	background-image:url(../../styles/images/rbimage_silver2003_hovered.png);
+	background-repeat:repeat-x;
+}
+.dropdown_silver2_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_silver2_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver2_clicked,.splitbtn_silver2_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_silver2_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_silver2_clicked
+{
+	background-image:url(../../styles/images/rbimage_silver2003_clicked.png);
+}
+.rteskin_silver2 .rtelayouttop
+{
+	border-bottom-color:#838383!important;
+}
+.rteskin_silver2 .rtelayoutbottom
+{
+	border-top-color:#838383!important;
+}
+.rteskin_silver2 .rtelayoutbottom .tbgroup_silver2
+{
+	height:22px!important;
+}
+/*office2003*/
+
+.tbgroup_office2003_silver
+{
+    border: #d8d8d8 1px solid; 
+	background-image:url(../../styles/images/tbgroup_silver2007.png);
+	background-repeat:repeat-x;
+}
+.tbgroup_office2003_silver2
+{
+    border: #838383 1px solid; 
+    -webkit-border-radius: 2px;
+	-moz-border-radius: 2px;
+    border-radius:2px;
+	background-image:url(../../styles/images/tbgroup_silver20032.png);
+	background-position:left top;
+	background-repeat:repeat-x;
+}
+.tbgroup_office2003_blue
+{
+    border-right: #a9bfd3 1px solid; 
+    border-top: #f0f5fa 1px solid; 
+    border-left: #f0f5fa  1px solid; 
+    border-bottom: #a9bfd3 1px solid; 
+	background-image:url(../../styles/images/tbgroup_darkblue.png);
+	background-repeat:repeat-x;
+}
+.splitbtn_office2003_blue
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.splitbtn_office2003_blue_hovered
+{
+    border-color:#c8c8c8;
+}
+
+/*checked*/
+.tbcontrol_silver_checked,.splitbtn_silver_checked
+{
+    border-color:#808080;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_blue_checked,.splitbtn_blue_checked
+{
+    border-color:#808080;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_silver2_checked,.splitbtn_silver2_checked
+{
+    border-color:#808080;
+	background-image:url(../../styles/images/tbcontrol_silver2_checked.png);
+	background-repeat:repeat-x;
+}

LPWeb20/RichtextEditor/skins/office2003/skin.xml

@@ -0,0 +1,137 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+
+	<panel jsml-class="ribbon_{skin}_{color}" dock="left" overflow_x="visible" margin="1" padding="0,2,0,5"  height="90" width="32" >
+
+		<jsml-ref name="rteborderstyle"/>
+
+		<initialize>
+			self.toggle_css_class("ribbon_{skin}");
+			self.toggle_css_class("ribbon_{color}");
+			self.toggle_css_class("ribbon_{skin}_{color}");
+		</initialize>
+
+	</panel>
+
+	<image jsml-class="ribbonimage_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+		<initialize>
+			self.toggle_css_class("rbimage_{skin}");
+			self.toggle_css_class("rbimage_{color}");
+			self.toggle_css_class("rbimage_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("rbimage_{skin}_"+name,mode);
+			self.toggle_css_class("rbimage_{color}_"+name,mode);
+			self.toggle_css_class("rbimage_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+
+
+
+	<panel jsml-class="tbgroup_{skin}_{color}" dock="flow" overflow_x="visible" margin="2,0,2,2" height="26" width="20" >
+		<initialize>
+			self.toggle_css_class("tbgroup_{skin}");
+			self.toggle_css_class("tbgroup_{color}");
+			self.toggle_css_class("tbgroup_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbgroup_{skin}_"+name,mode);
+			self.toggle_css_class("tbgroup_{color}_"+name,mode);
+			self.toggle_css_class("tbgroup_{skin}_{color}_"+name,mode);
+		</attach>
+		<jsml-ref name="rteborderstyle"/>
+		<attach name="attach_dom">
+			<![CDATA[
+			if(self.get_border_width()[1])self.set_padding([2,2,2,2])
+			if(self.get_margin()[1] &&self.get_margin()[1]==2)
+			{
+				self.set_padding([0,2,0,2]);
+				self.set_border_width([0,0,0,0]);
+			}
+			var p=self.get_parent();
+			var cn=p._element.className;
+			if(!cn)return;
+			if(cn.indexOf("ribbon")!=-1)
+			   self.set_margin([2,0,2,2]);
+			else if(cn.indexOf("silver")!=-1)
+				self.set_margin([1,1,1,1]);
+			else if(cn.indexOf("blue")!=-1)
+				self.set_margin([0,0,0,0]);
+			]]>
+		</attach>
+	</panel>
+
+	<panel jsml-class="linebreak_{skin}_{color}" dock="flow" flow_clear="newline" width='0'></panel>
+
+	<image jsml-class="image_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+		<initialize>
+			self.toggle_css_class("tbcontrol_{skin}");
+			self.toggle_css_class("tbcontrol_{color}");
+			self.toggle_css_class("tbcontrol_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbcontrol_{skin}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{color}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{skin}_{color}_"+name,mode);
+		</attach>
+		<attach name="attach_dom">
+			<![CDATA[
+			var p=self.get_parent();
+			var cn=p._element.className;
+			if(!cn)return;
+			if(cn.indexOf("_silver2")!=-1)
+			{
+				self.set_width(24);
+				self.set_height(24);
+				self.set_horizontal_align("center");
+			}
+			]]>
+		</attach>
+		<initialize>
+			if("{color}"!="silver2")return;
+			self.attach_event("set_padding",function()
+			{
+			var p=this.get_padding();
+			self._img.style.clip="rect("+(-p[0]+1)+"px 20px "+(-p[0]+19)+"px 0px)";
+			});
+		</initialize>
+	</image>
+
+	<panel jsml-class="splitbtn_{skin}_{color}" jsml-base="splitbtn_skin_base" width="32" dock="left">
+		<initialize>
+			self.toggle_css_class("splitbtn_{skin}");
+			self.toggle_css_class("splitbtn_{color}");
+			self.toggle_css_class("splitbtn_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("splitbtn_{skin}_"+name,mode);
+			self.toggle_css_class("splitbtn_{color}_"+name,mode);
+			self.toggle_css_class("splitbtn_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<panel jsml-class="dropdown_{skin}_{color}" jsml-base="dropdown_skin_base" margin="0">
+		<initialize>
+			self.toggle_css_class("dropdown_{skin}");
+			self.toggle_css_class("dropdown_{color}");
+			self.toggle_css_class("dropdown_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("dropdown_{skin}_"+name,mode);
+			self.toggle_css_class("dropdown_{color}_"+name,mode);
+			self.toggle_css_class("dropdown_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<include src="{folder}skins/{skin}/toolbar_{toolbar}.xml?{timems}" />
+
+	<include src="{folder}skins/_shared/_layout.xml?{timems}" />
+
+	<panel jsml-class="rteskin_{skin}_{color}" width="200" height="200">
+		<jsml-ref name="rteborderstyle"/>
+		<jsml-ref name="_shared_layout_{skin}_{color}"/>
+	</panel>
+
+</jsml>

LPWeb20/RichtextEditor/skins/office2003/toolbar_custom.xml

@@ -0,0 +1,295 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="Save" tooltip="@SAVE"/>
+			<image jsml-base="image_{skin}_{color}" command="New" tooltip="@NEW" imagename="newdoc" />
+			<image jsml-base="image_{skin}_{color}" command="Print" tooltip="@PRINT" />
+			<image jsml-base="image_{skin}_{color}" command="Find" tooltip="@FINDANDREPLACE" />
+			<image jsml-base="image_{skin}_{color}" command="CleanCode" tooltip="@CLEANCODE" imagename="cleanup" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="spellcheck" tooltip="@SPELLCHECK" imagename="spell" />
+
+			<image jsml-base="image_{skin}_{color}" command="FullScreen" tooltip="@FULLSCREEN" imagename="fit" />
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="SelectAll" tooltip="@SELECTALL" />
+			<image jsml-base="image_{skin}_{color}" command="SelectNone" tooltip="@SELECTNONE" />
+			<image jsml-base="image_{skin}_{color}" command="Delete" tooltip="@DELETE" />
+
+			<image jsml-base="image_{skin}_{color}" command="Cut" tooltip="@CUT">
+				<attach name="mousehover">
+					self._ResetFCButton();
+				</attach>
+			</image>
+			<image jsml-base="image_{skin}_{color}" command="Copy" tooltip="@COPY">
+				<attach name="mousehover">
+					self._ResetFCButton();
+				</attach>
+			</image>
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="Paste" tooltip="@PASTE" />
+			<image jsml-base="image_{skin}_{color}" command="PasteText" tooltip="@PASTETEXT" />
+			<image jsml-base="image_{skin}_{color}" command="PasteWord" tooltip="@PASTEWORD" />
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="Undo" tooltip="@UNDO" />
+			<image jsml-base="image_{skin}_{color}" command="Redo" tooltip="@REDO" />
+
+		</panel>
+
+		<!--
+		<panel jsml-base="linebreak_{skin}" />
+		-->
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="InsertGallery" tooltip="@INSERTGALLERY" imagename="gallery" />
+			<image jsml-base="image_{skin}_{color}" command="InsertImage" tooltip="@INSERTIMAGE" imagename="image" />
+			<image jsml-base="image_{skin}_{color}" command="InsertVideo" tooltip="@INSERTVIDEO" imagename="media" />
+			<image jsml-base="image_{skin}_{color}" command="InsertDocument" tooltip="@INSERTDOCUMENT" imagename="document" />
+			<image jsml-base="image_{skin}_{color}" command="InsertTemplate" tooltip="@INSERTTEMPLATE" imagename="template" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="syntaxhighlighter" tooltip="@SYNTAXHIGHLIGHTER" imagename="code" />
+
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertyoutube" tooltip="@INSERTYOUTUBE" imagename="youtube"/>
+			<image jsml-base="image_{skin}_{color}" imagename="html5" tooltip="@INSERTHTML5">
+				<attach name="click">
+					inserthtml5menu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					inserthtml5menu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					inserthtml5menu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="inserthtml5menu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERT| &lt;wbr&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="Mark" text="@INSERT| &lt;mark&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertDetails" text="@INSERT| &lt;details&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertSection" text="@INSERT| &lt;section&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertArticle" text="@INSERT| &lt;article&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertHeader" text="@INSERT| &lt;header&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertFooter" text="@INSERT| &lt;footer&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertHGroup" text="@INSERT| &lt;hgroup&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertAside" text="@INSERT| &lt;aside&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertAudio" text="@INSERT| &lt;audio&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertVideo" text="@INSERT| &lt;video&gt;" imagename="newtag" />
+				</panel>
+			</image>
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="googlemap" tooltip="@GOOGLEMAP" imagename="map"/>
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="Bold" tooltip="@BOLD" />
+			<image jsml-base="image_{skin}_{color}" command="Italic" tooltip="@ITALIC" />
+			<image jsml-base="image_{skin}_{color}" command="Underline" tooltip="@UNDERLINE" imagename="under" />
+			<image jsml-base="image_{skin}_{color}" command="Linethrough" tooltip="@LINETHROUGH" imagename="strike" />
+			<image jsml-base="image_{skin}_{color}" command="Overline" tooltip="@OVERLINE" />
+
+			<image jsml-base="image_{skin}_{color}" command="Superscript" tooltip="@SUPERSCRIPT" />
+			<image jsml-base="image_{skin}_{color}" command="Subscript" tooltip="@SUBSCRIPT" />
+			<image jsml-base="image_{skin}_{color}" command="Ucase" tooltip="@UPPERCASE" />
+			<image jsml-base="image_{skin}_{color}" command="Lcase" tooltip="@LOWERCASE" />
+
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="ForeColor" tooltip="@TEXTCOLOR">
+				<jsml-ref name="rtecommandcolor"/>
+			</panel>
+			<panel jsml-base="splitbtn_{skin}_{color}" command="BackColor" tooltip="@BACKCOLOR">
+				<jsml-ref name="rtecommandcolor"/>
+			</panel>
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="RemoveFormat" tooltip="@REMOVEFORMAT" imagename="unformat" />
+			<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@FORMATPAINTER" imagename="formatpainter">
+				<attach name="click" arguments="je,e">
+					<![CDATA[
+						if(e.ctrlKey||e.altKey)
+							return self._rteinstance.ExecCommand("formatpainterfetch")
+						if(self._rteinstance.CanExecCommand("formatpainterapply"))
+							self._rteinstance.ExecCommand("formatpainterapply")
+						else
+							self.invoke_event("splitclick");
+						]]>
+				</attach>
+				<attach name="splitclick">
+					formatpaintermenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					formatpaintermenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					formatpaintermenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="formatpaintermenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="formatpainterfetch" imagename="copy" text="@FORMATPAINTERFETCH"  />
+					<panel jsml-base="rtemenuitem" command="formatpainterapply" imagename="formatpainter" text="@FORMATPAINTERAPPLY"  />
+					<panel jsml-base="rtemenuitem" command="formatpainterclear" imagename="newdoc" text="@FORMATPAINTERCLEAR"  />
+				</panel>
+			</panel>
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="JustifyLeft" tooltip="@JUSTIFYLEFT" imagename="left" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyCenter" tooltip="@JUSTIFYCENTER" imagename="center" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyRight" tooltip="@JUSTIFYRIGHT" imagename="right" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyFull" tooltip="@JUSTIFYFULL" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyNone" tooltip="@JUSTIFYNONE" noactive="true" />
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertOrderedList" tooltip="@ORDEREDLIST" imagename="numlist" >
+				<attach name="splitclick">
+					listolmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					listolmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					listolmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="listolmenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem"  command="InsertOrderedList" arguments="decimal" noactive="1" text="1,2,3,4,5"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-latin" noactive="1" text="a,b,c,d,e"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-roman" noactive="1" text="ⅰ,ⅱ,ⅲ,ⅳ,ⅴ"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-latin" noactive="1" text="A,B,C,D,E"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-roman" noactive="1" text="Ⅰ,Ⅱ,ⅢⅢ,Ⅳ,Ⅴ"  />
+					<!--<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="cjk-ideographic" text="一,二,三,四,五"  />-->
+					<!-- NOTE:check the css list-style-type -->
+				</panel>
+			</panel>
+
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertUnorderedList" tooltip="@UNORDEREDLIST" imagename="bullist">
+				<attach name="splitclick">
+					listulmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					listulmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					listulmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="listulmenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="disc" noactive="1" imagename="ul-disc" text="@UL_DISC"  />
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="circle" noactive="1" imagename="ul-circle" text="@UL_CIRCLE"  />
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="square" noactive="1" imagename="ul-square" text="@UL_SQUARE"  />
+				</panel>
+			</panel>
+
+			<image jsml-base="image_{skin}_{color}" command="Outdent" tooltip="@OUTDENT" />
+			<image jsml-base="image_{skin}_{color}" command="Indent" tooltip="@INDENT" />
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="InsertBlockQuote" tooltip="@INSERTBLOCKQUOTE" imagename="blockquote" />
+			<image jsml-base="image_{skin}_{color}" command="InsertBreak" tooltip="@INSERTBREAKRULE" imagename="break" />
+			<!--
+			<image jsml-base="image_{skin}_{color}" command="InsertWbr" tooltip="@INSERTWBR" imagename="wbr" />
+			-->
+			<image jsml-base="image_{skin}_{color}" command="InsertDiv" tooltip="@INSERTDIV" imagename="div" />
+			<image jsml-base="image_{skin}_{color}" command="InsertParagraph" tooltip="@INSERTPARAGRAPH" imagename="p" />
+			<image jsml-base="image_{skin}_{color}" command="InsertHorizontalRule" tooltip="@INSERTHORIZONTALRULE" imagename="rule" />
+			<image jsml-base="image_{skin}_{color}" command="InsertPageBreak" tooltip="@INSERTPAGEPRINTBREAK" imagename="InsertPageBreak" />
+			<image jsml-base="image_{skin}_{color}" command="InsertTopLine" tooltip="@INSERTTOPLINE" imagename="topline" />
+			<image jsml-base="image_{skin}_{color}" command="InsertBottomLine" tooltip="@INSERTBOTTOMLINE" imagename="bottomline" />
+
+		</panel>
+
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<initialize>
+				self._element.setAttribute("noradius","1");
+			</initialize>
+
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setparagraph.xml" width="90" text="@Paragraphs" stylename="paragraph" />
+
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setstyles.xml" width="90" text="@Styles" />
+			
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontname.xml" width="80" text="@FontName" stylename="fontname" />
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontsize.xml" width="70" text="@FontSize" stylename="fontsize" />
+
+		</panel>
+
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertLink" tooltip="@INSERTLINK" imagename="link" />
+			<image jsml-base="image_{skin}_{color}" command="UnLink" tooltip="@REMOVE| |@LINK" imagename="unlink" />
+			<image jsml-base="image_{skin}_{color}" command="InsertAnchor" tooltip="@INSERTANCHOR" imagename="anchor" />
+			<image jsml-base="image_{skin}_{color}" command="InsertImageMap" tooltip="@INSERTIMAGEMAP" imagename="imagemap" />
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertDate" tooltip="@INSERTDATE" imagename="insertdate" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertchars" tooltip="@INSERTCHARS" imagename="specialchar" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="virtualkeyboard" tooltip="@VIRTUALKEYBOARD" imagename="keyboard" />
+
+		</panel>
+
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="InsertBox" tooltip="@INSERTBOX" imagename="box" />
+			<image jsml-base="image_{skin}_{color}" command="InsertLayer" tooltip="@INSERTLAYER" imagename="layer" />
+			<image jsml-base="image_{skin}_{color}" command="InsertFieldSet" tooltip="@INSERTFIELDSET" imagename="groupbox" />
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertTable"  tooltip="@INSERTTABLE">
+				<attach name="splitclick">
+					var editor=self.find_editor();
+					editor.ShowXmlFloatBox(editor.BuildDialogUrl("inserttable.xml"),{control:self,stopDispose:true});
+					//alert(editor.ShowXmlFloatBox);
+					//editor.ShowXmlFloatbox("inserttable.xml",{control:self,stopDispose:true});
+				</attach>
+			</panel>
+
+			<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@INSERTFORM" imagename="InsertForm" >
+				<attach name="click,splitclick">
+					insertformmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					insertformmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					insertformmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="insertformmenu" jsml-append="false">
+
+					<panel jsml-base="rtemenuitem" command="InsertForm" text="@INSERTFORM" />
+					<panel jsml-base="rtemenuitem" command="InsertTextarea" text="@INSERTTEXTAREA" imagename="textarea" />
+					<panel jsml-base="rtemenuitem" command="InsertInpText" text="@INSERTINPTEXT" imagename="textbox" />
+					<panel jsml-base="rtemenuitem" command="InsertInpPassword" text="@INSERTINPPASSWORD" imagename="passwordfield" />
+					<panel jsml-base="rtemenuitem" command="InsertInpHidden" text="@INSERTINPHIDDEN" imagename="hiddenfield" />
+					<panel jsml-base="rtemenuitem" command="InsertInpFile" text="@INSERTINPFILE" imagename="document"/>
+					<panel jsml-base="rtemenuitem" command="InsertInpImage" text="@INSERTINPIMAGE" imagename="image" />
+					<panel jsml-base="rtemenuitem" command="InsertInpReset" text="@INSERTINPRESET" imagename="reset" />
+					<panel jsml-base="rtemenuitem" command="InsertInpSubmit" text="@INSERTINPSUBMIT" imagename="submit" />
+					<panel jsml-base="rtemenuitem" command="InsertRadioBox" text="@INSERTRADIOBOX" imagename="optionbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertCheckbox" text="@INSERTCHECKBOX" imagename="checkbox" />
+					<panel jsml-base="rtemenuitem" command="InsertInpButton" text="@INSERTINPBUTTON" imagename="pushbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertButton" text="@INSERTBUTTON" imagename="pushbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertDropDown" text="@INSERTDROPDOWN" imagename="dropdownbox" />
+					<panel jsml-base="rtemenuitem" command="InsertListbox" text="@INSERTLISTBOX" imagename="listbox" />
+
+				</panel>
+			</panel>
+			<image jsml-base="image_{skin}_{color}" command="ToggleBorder" imagename="borders" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="pageproperties" tooltip="@PAGEPROPERTIES" imagename="properties" />
+			<image jsml-base="image_{skin}_{color}" command="Help"  tooltip="@HELP" />
+		</panel>
+
+	</jsml-def>
+
+
+
+</jsml>
+

LPWeb20/RichtextEditor/skins/office2003/toolbar_template.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+
+	<include src="{folder}skins/_shared/_toolbartemplate.xml?{timems}" />
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<method name="find_config">
+			<![CDATA[
+			for(var ctrl=self;ctrl!=null;ctrl=ctrl.get_jsml_parent())
+				if(ctrl._rteconfig)return ctrl._rteconfig;
+			]]>
+		</method>
+		<attach name="editor_ready" arguments="je,editor">
+			editor.ParseItemList(self,editor._config.toolbaritems||editor._config.toolbars[editor._config.toolbar]||"");
+		</attach>
+	</jsml-def>
+
+</jsml>
+
+
+

LPWeb20/RichtextEditor/skins/office2007/skin.css

@@ -0,0 +1,523 @@
+
+
+.tbgroup_office2007
+{
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.tbgroup_office2007[noradius]
+{
+	-o-border-radius:0px;
+	-moz-border-radius:0px;
+	-webkit-border-radius:0px;
+}
+
+
+/* default blue */
+
+
+.rteskin_blue
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#7e9db9;
+	background-color:#ccdcee;
+}
+.tbtoolbar_blue
+{
+	background-color:#dfebf6;
+}
+.rteskin_blue .rtetoolbarwithribbon
+{
+	background-image:url(../../styles/images/tbtoolbar_blue.png);
+	background-repeat:repeat-x;
+	background-position:0 1px;
+}
+.ribbon_blue
+{
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-style:solid;
+	border-width:1px;
+	border-color:#bdd4f0;
+	border-top-color:#c5d2df;
+	border-left-color:#b7c8d7;
+	border-right-color:#b8c9d7;
+	border-bottom-color:#9ebfdb;
+	background-image:url(../../styles/images/tbribbon_blue.png);
+	background-repeat:repeat-x;
+}
+.ribbon_blue .ribbonlabel
+{
+	color:#3e6ac1;
+	background-color:#c1d9f1;
+	background-image:url(../../styles/images/rblabel_blue.png);
+	background-repeat:repeat-x;
+	font-family:tahoma!important;
+	font-size:11px!important;
+	border-left:solid 1px #d2eaf2;
+	border-bottom-left-radius:3px;
+	border-bottom-right-radius:3px;
+}
+
+.tbgroup_blue
+{
+	border-style:solid;
+	border-width:1px;
+	border-color:#9cb9dc;
+	background-image:url(../../styles/images/tbgroup_blue.png);
+	background-repeat:repeat-x;
+}
+
+.dropdown_blue
+{
+	border-color:#abc1de;
+	background-color:#eff5fc;
+}
+.dropdown_blue .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.splitbtn_blue
+{
+	background-color:transparent;
+}
+.slitbtn_blue .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_blue , .splitbtn_blue , .dropdown_blue
+{
+	border-left-style:solid;
+	border-right-style:solid;
+	border-left-width:1px;
+	border-right-width:1px;
+	border-left-color:#d8e6f7;
+	border-right-color:#abc1de;
+}
+.dropdown_blue
+{
+	border-left-width:0px;
+	border-right-color:#abc1de;
+}
+.rbimage_blue
+{
+	background-image:url(../../styles/images/tbribbon_blue.png);
+	-o-border-radius:5px;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+}
+.rteskin_blue .rtelayouttop
+{
+	border-bottom-color:#7e9db9!important;
+}
+.rteskin_blue .rtelayoutbottom
+{
+	border-top-color:#7e9db9!important;
+}
+
+
+/* silver */
+
+.rteskin_silver
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#bebfc1;
+	background-color:#e3e7ea;
+}
+.tbtoolbar_silver
+{
+	background-color:#e3e7ea;
+}
+.rteskin_silver .rtetoolbarwithribbon
+{
+	background-image:url(../../styles/images/tbtoolbar_silver.png);
+	background-repeat:repeat-x;
+	background-position:0 1px;
+}
+.ribbon_silver
+{
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-style:solid;
+	border-width:1px;
+	border-color:#bdd4f0;
+	border-top-color:#c5d2df;
+	border-left-color:#bebfc1;
+	border-right-color:#bebfc1;
+	border-bottom-color:#bebfc1;
+	background-image:url(../../styles/images/tbribbon_silver2007.png);
+	background-repeat:repeat-x;
+}
+.ribbon_silver .ribbonlabel
+{
+	color:#333333;
+	background-color:#d2d6e1;
+	font-family:tahoma!important;
+	font-size:11px!important;
+	border-left:solid 1px #e3e7f2;
+	border-bottom-left-radius:3px;
+	border-bottom-right-radius:3px;
+}
+
+.tbgroup_silver
+{
+	border-style:solid;
+	border-width:1px;
+	border-color:#a9b1b8;
+	background-image:url(../../styles/images/tbgroup_silver.png);
+	background-repeat:repeat-x;
+}
+
+.dropdown_silver
+{
+	border-color:#cccccc;
+	background-color:white;
+}
+.dropdown_silver .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.splitbtn_silver
+{
+	background-color:transparent;
+}
+.slitbtn_silver .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_silver , .splitbtn_silver , .dropdown_silver
+{
+	border-left-style:solid;
+	border-right-style:solid;
+	border-left-width:1px;
+	border-right-width:1px;
+	border-left-color:#eeeeee;
+	border-right-color:#cccccc;
+}
+.dropdown_silver
+{
+	border-left-width:0px;
+	border-right-color:#cccccc;
+}
+.rbimage_silver
+{
+	background-image:url(../../styles/images/tbribbon_silver2007.png);
+	-o-border-radius:5px;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+}
+
+/* silver2 */
+.rteskin_silver2
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#bebfc1;
+	background-color:#e3e7ea;
+}
+.tbtoolbar_silver2
+{
+	background-color:#e2e3e3;
+}
+.rteskin_silver2 .rtetoolbarwithribbon
+{
+	background-image:url(../../styles/images/tbtoolbar_silver2.png);
+	background-position:left bottom;
+	background-repeat:repeat-x;
+}
+.ribbon_silver2
+{ 
+	border:dotted 1px #cccccc;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.ribbon_silver2 .ribbonlabel
+{
+	color:#666d7c;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+
+.tbgroup_silver2
+{
+	border-style:solid;
+	border-width:1px;
+	border-color:#bdbdbd;
+	background-image:url(../../styles/images/tbgroup_silver2.png);
+	background-repeat:repeat-x;
+}
+
+.dropdown_silver2
+{
+	border-color:#bdbdbd;
+	background-color:white;
+}
+.dropdown_silver2 .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+	background-image:url(../../styles/images/tbgroup_silver2.png);
+	background-repeat:repeat-x;
+}
+.splitbtn_silver2
+{
+	background-color:transparent;
+}
+.slitbtn_silver2 .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_silver2 , .splitbtn_silver2 , .dropdown_silver2
+{
+	border-left-style:solid;
+	border-right-style:solid;
+	border-left-width:1px;
+	border-right-width:1px;
+	border-left-color:#eeeeee;
+	border-right-color:#cccccc;
+}
+.dropdown_silver2
+{
+	border-left-width:0px;
+	border-right-color:#cccccc;
+}
+.rbimage_silver2
+{
+	background-image:url(../../styles/images/tbribbon_silver2.png);
+	-o-border-radius:5px;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+}
+
+
+/* checked */
+
+.menuitem_checked .menuitemimage
+{
+	background-color:#eeddcc;
+}
+.imagebutton_checked , .panelbutton_checked
+{
+	border-color:#999999;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+}
+
+.tbcontrol_blue_checked,.splitbtn_blue_checked
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+	border-left-color:transparent;
+	border-right-color:#9db4d0;
+}
+
+.tbcontrol_silver_checked,.splitbtn_silver_checked,.tbcontrol_silver2_checked,.splitbtn_silver2_checked
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+	border-left-color:transparent;
+	border-right-color:#9db4d0;
+}
+
+
+/* hovered */
+
+.menuitem_hovered , .imagebutton_hovered , .panelbutton_hovered
+{
+	border-color:#ffbd69;
+	background-color:#ffe7a2;
+	/*background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;*/
+}
+
+/*
+.ribbon_blue_hovered .ribbonlabel
+{
+	rem-background: -webkit-gradient(linear, 0 0, 0 100%, from(#c1d9f1),color-stop(40%, #b9d1e9),color-stop(60%, #b9d1e9), to(#c1d9f1));
+}
+*/
+
+.dropdown_blue_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_blue_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_blue_hovered .splitbtnsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_blue_hovered,.splitbtn_blue_hovered
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+	border-left-color:transparent;
+	border-right-color:#9db4d0;
+}
+.rbimage_blue_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+.dropdown_silver_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_silver_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_silver_hovered .splitbtnsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver_hovered,.splitbtn_silver_hovered
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+	border-left-color:transparent;
+	border-right-color:#9db4d0;
+}
+.rbimage_silver_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+.rteskin_silver .rtelayouttop
+{
+	border-bottom-color:#bebfc1!important;
+}
+.rteskin_silver .rtelayoutbottom
+{
+	border-top-color:#bebfc1!important;
+}
+.dropdown_silver2_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_silver2_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_silver2_hovered .splitbtnsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver2_hovered,.splitbtn_silver2_hovered
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+	border-left-color:transparent;
+	border-right-color:#9db4d0;
+}
+.rbimage_silver2_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+.rteskin_silver2 .rtelayouttop
+{
+	border-bottom-color:#bebfc1!important;
+}
+.rteskin_silver2 .rtelayoutbottom
+{
+	border-top-color:#bebfc1!important;
+}
+
+/* clicked */
+.menuitem_clicked , .imagebutton_clicked , .panelbutton_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffc450;
+	/*background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;*/
+}
+
+
+.dropdown_blue_clicked
+{
+	border-color:#abc1de;
+	background-color:gold;
+}
+.dropdown_blue_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_blue_clicked,.splitbtn_blue_clicked
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+	border-right-color:#9db4d0;
+}
+.rbimage_blue_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+
+.dropdown_silver_clicked
+{
+	border-color:#abc1de;
+	background-color:gold;
+}
+.dropdown_silver_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver_clicked,.splitbtn_silver_clicked
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+	border-right-color:#9db4d0;
+}
+.rbimage_silver_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.dropdown_silver2_clicked
+{
+	border-color:#abc1de;
+	background-color:gold;
+}
+.dropdown_silver2_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver2_clicked,.splitbtn_silver2_clicked
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+	border-right-color:#9db4d0;
+}
+.rbimage_silver2_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+
+/* disabled */
+
+
+

LPWeb20/RichtextEditor/skins/office2007/skin.xml

@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<panel jsml-class="ribbon_{skin}_{color}" dock="left" overflow_x="visible" margin="2" padding="3,3,0,4"  height="104" width="32" >
+		<label dock="bottom" jsml-local="label" css_class="ribbonlabel" height="15" margin="0,-5,0,-4" text="ribbon" font_size="11px" width="20" vertical_align="bottom" horizontal_align="center">
+			<jsml-ref name="rteborderstyle"/>
+		</label>
+
+		<attach name="set_text">
+			label.set_text(self.get_text());
+		</attach>
+
+		<jsml-ref name="rteborderstyle"/>
+		
+		<initialize>
+			self.toggle_css_class("ribbon_{skin}");
+			self.toggle_css_class("ribbon_{color}");
+			self.toggle_css_class("ribbon_{skin}_{color}");
+		</initialize>
+	</panel>
+
+	<image jsml-class="ribbonimage_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+		<initialize>
+			self.toggle_css_class("rbimage_{skin}");
+			self.toggle_css_class("rbimage_{color}");
+			self.toggle_css_class("rbimage_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("rbimage_{skin}_"+name,mode);
+			self.toggle_css_class("rbimage_{color}_"+name,mode);
+			self.toggle_css_class("rbimage_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+
+	<panel jsml-class="tbgroup_{skin}_{color}" dock="flow" overflow_x="visible" margin="2,3,3,2" height="22" width="20" >
+		<initialize>
+			self.toggle_css_class("tbgroup_{skin}");
+			self.toggle_css_class("tbgroup_{color}");
+			self.toggle_css_class("tbgroup_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbgroup_{skin}_"+name,mode);
+			self.toggle_css_class("tbgroup_{color}_"+name,mode);
+			self.toggle_css_class("tbgroup_{skin}_{color}_"+name,mode);
+		</attach>
+		<jsml-ref name="rteborderstyle"/>
+    <attach name="attach_dom">
+      <![CDATA[
+			self.set_padding([0,-1,0,-1])
+			var p=self.get_parent();
+			var cn=p._element.className;
+			if(cn&&cn.indexOf("ribbon_")==-1)
+			   self.set_margin([1,2,1,2]);
+			]]>
+    </attach>
+	</panel>
+
+	<panel jsml-class="linebreak_{skin}_{color}" dock="flow" flow_clear="newline" width='0'></panel>
+	
+	<image jsml-class="image_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+		<initialize>
+			self.toggle_css_class("tbcontrol_{skin}");
+			self.toggle_css_class("tbcontrol_{color}");
+			self.toggle_css_class("tbcontrol_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbcontrol_{skin}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{color}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+
+	<panel jsml-class="splitbtn_{skin}_{color}" jsml-base="splitbtn_skin_base" width="32" dock="left">
+		<initialize>
+			self.toggle_css_class("splitbtn_{skin}");
+			self.toggle_css_class("splitbtn_{color}");
+			self.toggle_css_class("splitbtn_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("splitbtn_{skin}_"+name,mode);
+			self.toggle_css_class("splitbtn_{color}_"+name,mode);
+			self.toggle_css_class("splitbtn_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<panel jsml-class="dropdown_{skin}_{color}" jsml-base="dropdown_skin_base" margin="0">
+		<initialize>
+			self.toggle_css_class("dropdown_{skin}");
+			self.toggle_css_class("dropdown_{color}");
+			self.toggle_css_class("dropdown_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("dropdown_{skin}_"+name,mode);
+			self.toggle_css_class("dropdown_{color}_"+name,mode);
+			self.toggle_css_class("dropdown_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<include src="{folder}skins/{skin}/toolbar_{toolbar}.xml?{timems}" />
+
+	<include src="{folder}skins/_shared/_layout.xml?{timems}" />
+
+	<panel jsml-class="rteskin_{skin}_{color}" width="200" height="200">
+		<jsml-ref name="rteborderstyle"/>
+		<jsml-ref name="_shared_layout_{skin}_{color}"/>
+	</panel>
+
+</jsml>

LPWeb20/RichtextEditor/skins/office2007/toolbar_custom.xml

@@ -0,0 +1,470 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+
+		<initialize>
+			self.toggle_css_class("rtetoolbarwithribbon",true);
+		</initialize>
+
+		<panel jsml-base="ribbon_{skin}_{color}" text="@COMMON">
+
+			<panel jsml-base="tbgroup_{skin}_{color}" dock="none" overflow_y="visible">
+				<image jsml-base="ribbonimage_{skin}_{color}" command="Paste" imagename="ribbonpaste" tooltip="@PASTE" width="44" height="47" vertical_align="middle" horizontal_align="center"/>
+			</panel>
+			<panel left="49" overflow="visible">
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+					<image jsml-base="image_{skin}_{color}" command="Save" tooltip="@SAVE"/>
+					<image jsml-base="image_{skin}_{color}" command="New" tooltip="@NEW" imagename="newdoc" />
+					<image jsml-base="image_{skin}_{color}" command="Print" tooltip="@PRINT" />
+
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="spellcheck" tooltip="@SPELLCHECK" imagename="spell" />
+
+				</panel>
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<image jsml-base="image_{skin}_{color}" command="Cut" tooltip="@CUT">
+						<attach name="mousehover">
+							self._ResetFCButton();
+						</attach>
+					</image>
+					<image jsml-base="image_{skin}_{color}" command="Copy" tooltip="@COPY">
+						<attach name="mousehover">
+							self._ResetFCButton();
+						</attach>
+					</image>
+
+					<image jsml-base="image_{skin}_{color}" command="Delete" tooltip="@DELETE" />
+
+					<image jsml-base="image_{skin}_{color}" command="Find" tooltip="@FINDANDREPLACE" />
+
+				</panel>
+
+			</panel>
+
+			<panel top="54" overflow="visible">
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<image jsml-base="image_{skin}_{color}" command="PasteText" tooltip="@PASTETEXT" />
+					<image jsml-base="image_{skin}_{color}" command="PasteWord" tooltip="@PASTEWORD" />
+
+				</panel>
+				<panel jsml-base="tbgroup_{skin}_{color}" flow_clear="follow">
+
+					<image jsml-base="image_{skin}_{color}" command="Undo" tooltip="@UNDO" />
+					<image jsml-base="image_{skin}_{color}" command="Redo" tooltip="@REDO" />
+				</panel>
+				<panel jsml-base="tbgroup_{skin}_{color}" flow_clear="follow">
+
+
+					<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@FORMATPAINTER" imagename="formatpainter">
+						<attach name="click" arguments="je,e">
+							<![CDATA[
+						if(e.ctrlKey||e.altKey)
+							return self._rteinstance.ExecCommand("formatpainterfetch")
+						if(self._rteinstance.CanExecCommand("formatpainterapply"))
+							self._rteinstance.ExecCommand("formatpainterapply")
+						else
+							self.invoke_event("splitclick");
+						]]>
+						</attach>
+						<attach name="splitclick">
+							formatpaintermenu.show({control:self,stopDispose:true});
+						</attach>
+						<attach name="editor_ready" arguments="jevent,editor">
+							formatpaintermenu.invoke_recursive("editor_ready",editor);
+						</attach>
+						<attach name="disposing">
+							formatpaintermenu.dispose();
+						</attach>
+						<panel jsml-base="floatmenu" jsml-local="formatpaintermenu" jsml-append="false">
+							<panel jsml-base="rtemenuitem" command="formatpainterfetch" imagename="copy" text="@FORMATPAINTERFETCH"  />
+							<panel jsml-base="rtemenuitem" command="formatpainterapply" imagename="formatpainter" text="@FORMATPAINTERAPPLY"  />
+							<panel jsml-base="rtemenuitem" command="formatpainterclear" imagename="newdoc" text="@FORMATPAINTERCLEAR"  />
+						</panel>
+					</panel>
+
+				</panel>
+
+			</panel>
+
+		</panel>
+
+		
+		<panel jsml-base="ribbon_{skin}_{color}" text="@FORMAT">
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<initialize>
+					self._element.setAttribute("noradius","1");
+				</initialize>
+				<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontname.xml" width="88" text="@FontName" stylename="fontname" />
+				<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontsize.xml" width="65" text="@FontSize" stylename="fontsize" />
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<image jsml-base="image_{skin}_{color}" command="Bold" tooltip="@BOLD" />
+				<image jsml-base="image_{skin}_{color}" command="Italic" tooltip="@ITALIC" />
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="Underline" tooltip="@UNDERLINE" imagename="under" >
+					<attach name="splitclick">
+						decorationmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						decorationmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						decorationmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="decorationmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="Linethrough" text="@LINETHROUGH" imagename="strike" />
+						<panel jsml-base="rtemenuitem" command="Overline" text="@OVERLINE" imagename="Overline" />
+					</panel>
+				</panel>
+
+			</panel>
+			<panel jsml-base="tbgroup_{skin}_{color}">
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="ForeColor" tooltip="@TEXTCOLOR">
+					<jsml-ref name="rtecommandcolor"/>
+				</panel>
+				<panel jsml-base="splitbtn_{skin}_{color}" command="BackColor" tooltip="@BACKCOLOR">
+					<jsml-ref name="rtecommandcolor"/>
+				</panel>
+
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<image jsml-base="image_{skin}_{color}" command="Superscript" tooltip="@SUPERSCRIPT" />
+				<image jsml-base="image_{skin}_{color}" command="Subscript" tooltip="@SUBSCRIPT" />
+
+				<panel jsml-base="splitbtn_{skin}_{color}" imagename="Ucase" tooltip="@CHANGECASE" >
+					<attach name="click,splitclick">
+						textcasemenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						textcasemenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						textcasemenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="textcasemenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="Ucase" text="@UPPERCASE"  />
+						<panel jsml-base="rtemenuitem" command="Lcase" text="@LOWERCASE"  />
+					</panel>
+				</panel>
+
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}" flow_clear="follow">
+
+				<image jsml-base="image_{skin}_{color}" command="RemoveFormat" tooltip="@REMOVEFORMAT" imagename="unformat" />
+
+				<image jsml-base="image_{skin}_{color}" command="CleanCode" tooltip="@CLEANCODE" imagename="cleanup" />
+
+				<image jsml-base="image_{skin}_{color}" command="SelectAll" tooltip="@SELECTALL" />
+
+			</panel>
+
+		</panel>
+
+
+		<panel jsml-base="ribbon_{skin}_{color}" text="@PARAGRAPHS">
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<initialize>
+					self._element.setAttribute("noradius","1");
+				</initialize>
+				<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setparagraph.xml" width="82" text="@Paragraphs" stylename="paragraph" />
+				<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setstyles.xml" width="62" text="@Styles" />
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@JUSTIFY" imagename="left">
+					<attach name="click,splitclick">
+						justifymenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						justifymenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						justifymenu.dispose();
+					</attach>
+					<attach name="update_statusui">
+						<![CDATA[
+						var editor=self.find_editor();
+						var arr=justifymenu.get_children();
+						for(var i=arr.length-1;i>=0;i--)
+						{
+							var item=arr[i];
+							var cmd=item.get_command();
+							if(!editor.QueryCommand(cmd))
+								continue;
+							if(self._lastjustify==cmd)
+								return;
+							self._lastjustify=cmd;
+							self.set_imagename(item.get_imagename());
+							self.set_checked(cmd!="JustifyNone");
+							return;
+						}
+						]]>
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="justifymenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="JustifyLeft" text="@JUSTIFYLEFT" imagename="left" />
+						<panel jsml-base="rtemenuitem" command="JustifyCenter" text="@JUSTIFYCENTER" imagename="center" />
+						<panel jsml-base="rtemenuitem" command="JustifyRight" text="@JUSTIFYRIGHT" imagename="right" />
+						<panel jsml-base="rtemenuitem"  command="JustifyFull" text="@JUSTIFYFULL" imagename="justifyfull" />
+						<panel jsml-base="rtemenuitem" command="JustifyNone" text="@JUSTIFYNONE" imagename="justifynone" />
+					</panel>
+				</panel>
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="LineHeight" imagename="lineheight" tooltip="@LINEHEIGHT">
+					<attach name="click,splitclick">
+						lineheightmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						lineheightmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						lineheightmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="lineheightmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="100%" text="100%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="110%" text="110%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="115%" text="115%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="120%" text="120%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="130%" text="130%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="140%" text="140%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="150%" text="150%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="160%" text="160%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="180%" text="180%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="200%" text="200%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="250%" text="250%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="300%" text="300%"  />
+						<panel jsml-base="rtemenuspliter" />
+						<panel jsml-base="rtemenuitem"  text="@TEXT| |@STYLES">
+							<attach name="click">
+								var editor=self.find_editor();
+								var node=editor.EnsureParagraph();
+								if(node)editor.ShowPropertiesDialog(node,{styletab:"text"})
+							</attach>
+						</panel>
+					</panel>
+				</panel>
+
+
+				<image jsml-base="image_{skin}_{color}" command="LTR" tooltip="@DIRECTION_LTR" imagename="dir_ltr" />
+				<image jsml-base="image_{skin}_{color}" command="RTL"  tooltip="@DIRECTION_RTL" imagename="dir_rtl" />
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="InsertBreak" tooltip="@INSERTBREAKRULE" imagename="break" >
+					<attach name="splitclick">
+						insertbrmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						insertbrmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						insertbrmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="insertbrmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERTWBR" imagename="wbr" />
+						<panel jsml-base="rtemenuitem" command="InsertDiv" text="@INSERTDIV" imagename="div" />
+						<panel jsml-base="rtemenuitem" command="InsertParagraph" text="@INSERTPARAGRAPH" imagename="p" />
+						<panel jsml-base="rtemenuitem"  command="InsertHorizontalRule" text="@INSERTHORIZONTALRULE" imagename="rule" />
+						<panel jsml-base="rtemenuitem" command="InsertPageBreak" text="@INSERTPAGEPRINTBREAK" imagename="InsertPageBreak" />
+						<panel jsml-base="rtemenuitem" command="InsertTopLine" text="@INSERTTOPLINE" imagename="topline" />
+						<panel jsml-base="rtemenuitem" command="InsertBottomLine" text="@INSERTBOTTOMLINE" imagename="bottomline" />
+					</panel>
+				</panel>
+
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<panel jsml-base="splitbtn_{skin}_{color}" command="InsertOrderedList" tooltip="@ORDEREDLIST" imagename="numlist" >
+					<attach name="splitclick">
+						listolmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						listolmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						listolmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="listolmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="InsertOrderedList" arguments="decimal" noactive="1" text="1,2,3,4,5"  />
+						<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-latin" noactive="1" text="a,b,c,d,e"  />
+						<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-roman" noactive="1" text="ⅰ,ⅱ,ⅲ,ⅳ,ⅴ"  />
+						<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-latin" noactive="1" text="A,B,C,D,E"  />
+						<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-roman" noactive="1" text="Ⅰ,Ⅱ,ⅢⅢ,Ⅳ,Ⅴ"  />
+						<!--<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="cjk-ideographic" text="一,二,三,四,五"  />-->
+						<!-- NOTE:check the css list-style-type -->
+					</panel>
+				</panel>
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="InsertUnorderedList" tooltip="@UNORDEREDLIST" imagename="bullist">
+					<attach name="splitclick">
+						listulmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						listulmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						listulmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="listulmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="disc" noactive="1" imagename="ul-disc" text="@UL_DISC"  />
+						<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="circle" noactive="1" imagename="ul-circle" text="@UL_CIRCLE"  />
+						<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="square" noactive="1" imagename="ul-square" text="@UL_SQUARE"  />
+					</panel>
+				</panel>
+
+				<image jsml-base="image_{skin}_{color}" command="Outdent" tooltip="@OUTDENT" />
+				<image jsml-base="image_{skin}_{color}" command="Indent" tooltip="@INDENT" />
+				<image jsml-base="image_{skin}_{color}" command="InsertBlockQuote" tooltip="@INSERTBLOCKQUOTE" imagename="blockquote" />
+
+			</panel>
+
+
+		</panel>
+
+
+		<panel jsml-base="ribbon_{skin}_{color}" text="@INSERT">
+
+			<panel jsml-base="tbgroup_{skin}_{color}" dock="none" overflow_y="visible">
+				<image jsml-base="ribbonimage_{skin}_{color}" command="ShowXmlFloatbox" arguments="inserttable.xml" imagename="ribbontable" tooltip="@INSERTTABLE" width="44" height="47" vertical_align="middle" horizontal_align="center"/>
+			</panel>
+			
+			<panel left="49" overflow="visible">
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@INSERTFORM" imagename="InsertForm" >
+						<attach name="click,splitclick">
+							insertformmenu.show({control:self,stopDispose:true});
+						</attach>
+						<attach name="editor_ready" arguments="jevent,editor">
+							insertformmenu.invoke_recursive("editor_ready",editor);
+						</attach>
+						<attach name="disposing">
+							insertformmenu.dispose();
+						</attach>
+						<panel jsml-base="floatmenu" jsml-local="insertformmenu" jsml-append="false">
+
+							<panel jsml-base="rtemenuitem" command="InsertForm" text="@INSERTFORM" />
+							<panel jsml-base="rtemenuitem" command="InsertTextarea" text="@INSERTTEXTAREA" imagename="textarea" />
+							<panel jsml-base="rtemenuitem" command="InsertInpText" text="@INSERTINPTEXT" imagename="textbox" />
+							<panel jsml-base="rtemenuitem" command="InsertInpPassword" text="@INSERTINPPASSWORD" imagename="passwordfield" />
+							<panel jsml-base="rtemenuitem" command="InsertInpHidden" text="@INSERTINPHIDDEN" imagename="hiddenfield" />
+							<panel jsml-base="rtemenuitem" command="InsertInpFile" text="@INSERTINPFILE" imagename="document"/>
+							<panel jsml-base="rtemenuitem" command="InsertInpImage" text="@INSERTINPIMAGE" imagename="image" />
+							<panel jsml-base="rtemenuitem" command="InsertInpReset" text="@INSERTINPRESET" imagename="reset" />
+							<panel jsml-base="rtemenuitem" command="InsertInpSubmit" text="@INSERTINPSUBMIT" imagename="submit" />
+							<panel jsml-base="rtemenuitem" command="InsertRadioBox" text="@INSERTRADIOBOX" imagename="optionbutton" />
+							<panel jsml-base="rtemenuitem" command="InsertCheckbox" text="@INSERTCHECKBOX" imagename="checkbox" />
+							<panel jsml-base="rtemenuitem" command="InsertInpButton" text="@INSERTINPBUTTON" imagename="pushbutton" />
+							<panel jsml-base="rtemenuitem" command="InsertButton" text="@INSERTBUTTON" imagename="pushbutton" />
+							<panel jsml-base="rtemenuitem" command="InsertDropDown" text="@INSERTDROPDOWN" imagename="dropdownbox" />
+							<panel jsml-base="rtemenuitem" command="InsertListbox" text="@INSERTLISTBOX" imagename="listbox" />
+
+						</panel>
+					</panel>
+
+					<image jsml-base="image_{skin}_{color}" command="InsertBox" tooltip="@INSERTBOX" imagename="box" />
+					<image jsml-base="image_{skin}_{color}" command="InsertLayer" tooltip="@INSERTLAYER" imagename="layer" />
+					<image jsml-base="image_{skin}_{color}" command="InsertFieldSet" tooltip="@INSERTFIELDSET" imagename="groupbox" />
+
+
+					<image jsml-base="image_{skin}_{color}" command="FullScreen" tooltip="@FULLSCREEN" imagename="fit" />
+
+					<image jsml-base="image_{skin}_{color}" command="ToggleBorder" tooltip="@TOGGLEBORDER" imagename="borders" />
+					<!--<image jsml-base="image_{skin}_{color}" command="ToggleBorderReverse" imagename="borders2" />-->
+
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="pageproperties" tooltip="@PAGEPROPERTIES" imagename="properties" />
+
+					<image jsml-base="image_{skin}_{color}" command="Help"  tooltip="@HELP" />
+
+				</panel>
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<panel jsml-base="splitbtn_{skin}_{color}" command="InsertLink" tooltip="@INSERTLINK" imagename="link" />
+
+					<image jsml-base="image_{skin}_{color}" command="UnLink" tooltip="@REMOVE| |@LINK" imagename="unlink" />
+
+					<image jsml-base="image_{skin}_{color}" command="InsertAnchor" tooltip="@INSERTANCHOR" imagename="anchor" />
+					<image jsml-base="image_{skin}_{color}" command="InsertImageMap" tooltip="@INSERTIMAGEMAP" imagename="imagemap" />
+
+					<panel jsml-base="splitbtn_{skin}_{color}" command="InsertDate" tooltip="@INSERTDATE" imagename="insertdate" />
+
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertchars" tooltip="@INSERTCHARS" imagename="specialchar" />
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="virtualkeyboard" tooltip="@VIRTUALKEYBOARD" imagename="keyboard" />
+
+
+				</panel>
+
+			</panel>
+
+			<panel top="54" overflow="visible">
+
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<image jsml-base="image_{skin}_{color}" command="InsertGallery" tooltip="@INSERTGALLERY" imagename="gallery" />
+					<image jsml-base="image_{skin}_{color}" command="InsertImage" tooltip="@INSERTIMAGE" imagename="image" />
+
+				</panel>
+
+				<panel jsml-base="tbgroup_{skin}_{color}" flow_clear="follow">
+
+					<panel jsml-base="splitbtn_{skin}_{color}" command="InsertTemplate" tooltip="@INSERTTEMPLATE" imagename="template" />
+					<image jsml-base="image_{skin}_{color}" command="InsertDocument" tooltip="@INSERTDOCUMENT" imagename="document" />
+					<image jsml-base="image_{skin}_{color}" command="InsertVideo" tooltip="@INSERTVIDEO" imagename="media" />
+
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="syntaxhighlighter" tooltip="@SYNTAXHIGHLIGHTER" imagename="code" />
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertyoutube" tooltip="@INSERTYOUTUBE" imagename="youtube"/>
+
+					<image jsml-base="image_{skin}_{color}" imagename="html5" tooltip="@INSERTHTML5">
+						<attach name="click">
+							inserthtml5menu.show({control:self,stopDispose:true});
+						</attach>
+						<attach name="editor_ready" arguments="jevent,editor">
+							inserthtml5menu.invoke_recursive("editor_ready",editor);
+						</attach>
+						<attach name="disposing">
+							inserthtml5menu.dispose();
+						</attach>
+						<panel jsml-base="floatmenu" jsml-local="inserthtml5menu" jsml-append="false">
+							<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERT| &lt;wbr&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="Mark" text="@INSERT| &lt;mark&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertDetails" text="@INSERT| &lt;details&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertSection" text="@INSERT| &lt;section&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertArticle" text="@INSERT| &lt;article&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertHeader" text="@INSERT| &lt;header&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertFooter" text="@INSERT| &lt;footer&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertHGroup" text="@INSERT| &lt;hgroup&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertAside" text="@INSERT| &lt;aside&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertAudio" text="@INSERT| &lt;audio&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertVideo" text="@INSERT| &lt;video&gt;" imagename="newtag" />
+						</panel>
+					</image>
+
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="googlemap" tooltip="@GOOGLEMAP" imagename="map"/>
+
+				</panel>
+
+
+			</panel>
+
+		</panel>
+
+
+	</jsml-def>
+
+
+</jsml>
+
+
+

LPWeb20/RichtextEditor/skins/office2007/toolbar_template.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+
+	<include src="{folder}skins/_shared/_toolbartemplate.xml?{timems}" />
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<method name="find_config">
+			<![CDATA[
+			for(var ctrl=self;ctrl!=null;ctrl=ctrl.get_jsml_parent())
+				if(ctrl._rteconfig)return ctrl._rteconfig;
+			]]>
+		</method>
+		<attach name="editor_ready" arguments="je,editor">
+			editor.ParseItemList(self,editor._config.toolbaritems||editor._config.toolbars[editor._config.toolbar]||"");
+		</attach>
+	</jsml-def>
+
+</jsml>
+
+
+

LPWeb20/RichtextEditor/skins/office2010/skin.css

@@ -0,0 +1,758 @@
+
+/* default blue */
+.rteskin_blue
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#9abcd5;
+	background-color:#dbe5ef;
+}
+.tbtoolbar_office2010_blue
+{
+    background-color:#f0f7fe;
+	background-image:url(../../styles/images/tbribbon_lightblue.png);
+	background-position:left bottom;
+	background-repeat:repeat-x;
+}
+.ribbon_blue
+{
+	background-image:url(../../styles/images/rbribbon_blue.png);
+	background-position:right bottom;
+	background-repeat:no-repeat;
+	padding-right:3px;
+}
+.ribbon_blue:last-child
+{
+	background-image:none;
+}
+.ribbon_blue .ribbonlabel
+{
+	color:#1e395b;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+.tbgroup_blue
+{
+	border-left:1px solid #d6dae3;
+}
+.tbgroup_office2010_blue
+{
+	border-left-width:0px;
+}
+.dropdown_blue
+{
+	border:1px solid #afbed1;
+	background-color:#f3f7fc;
+}
+.dropdown_blue .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_blue .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_blue, .splitbtn_blue
+{
+    border:1px solid transparent;
+}
+.splitbtn_blue
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.tbcontrol_office2010_blue,.splitbtn_office2010_blue
+{
+	border:1px solid transparent;
+}
+.rbimage_blue
+{
+	border:1px solid transparent;
+}
+.dropdown_blue_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_blue_hovered .dropdownsplit
+{
+	border-color:#afbed1;
+	background-color:#fdd017;
+}
+.splitbtn_blue_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_blue_hovered,.splitbtn_blue_hovered
+{
+    border-color:#c2762b;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_blue_hovered,.splitbtn_office2010_blue_hovered
+{
+    border-color:#abbad0;
+}
+.rbimage_blue_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+    border-color:#abbad0;
+}
+.dropdown_blue_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_blue_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_blue_clicked,.splitbtn_blue_clicked
+{
+    border-color:#c2762b;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_blue_clicked,.splitbtn_office2010_blue_clicked
+{
+    border-color:#abbad0;
+}
+.rbimage_blue_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_blue .rtelayouttop
+{
+	border-bottom-color:#9abcd5!important;
+}
+.rteskin_blue .rtelayoutbottom
+{
+	border-top-color:#9abcd5!important;
+}
+
+
+/*blue2*/
+.tbgroup_blue2
+{
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.tbgroup_blue2[noradius]
+{
+	-o-border-radius:0px;
+	-moz-border-radius:0px;
+	-webkit-border-radius:0px;
+}
+.rteskin_blue2
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#9abcd5;
+	background-color:#dbe5ef;
+}
+.tbtoolbar_office2010_blue2
+{
+    background-color:#f0f7fe;
+	background-image:url(../../styles/images/tbribbon_lightblue.png);
+	background-position:left bottom;
+	background-repeat:repeat-x;
+}
+.ribbon_blue2
+{
+	background-image:url(../../styles/images/rbribbon_blue.png);
+	background-position:right bottom;
+	background-repeat:no-repeat;
+	padding-right:2px;
+}
+.ribbon_blue2:last-child
+{
+	background-image:none;
+}
+.ribbon_blue2 .ribbonlabel
+{
+	color:#1e395b;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+
+.tbgroup_blue2
+{
+	border-style:solid;
+	border-width:1px;
+	border-color:#b5bdc8;
+	background-image:url(../../styles/images/tbgroup_blue2010.png);
+	background-repeat:repeat-x;
+}
+
+.dropdown_blue2
+{
+	background-color:#f3f7fc;
+}
+.dropdown_blue2 .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.splitbtn_blue2
+{
+	background-color:transparent;
+}
+.slitbtn_blue2 .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_blue2 , .splitbtn_blue2 , .dropdown_blue2
+{
+	border-left-style:solid;
+	border-right-style:solid;
+	border-left-width:1px;
+	border-right-width:1px;
+	border-left-color:#d8e6f7;
+	border-right-color:#abc1de;
+}
+.dropdown_blue2
+{
+	border-left-width:0px;
+	border-right-color:#abc1de;
+}
+.tbgroup_blue2 .rbimage_blue2
+{
+	background-image:url(../../styles/images/tbribbon_lightblue.png);
+	background-position:left top;
+	-o-border-radius:5px;
+	-moz-border-radius:5px;
+	-webkit-border-radius:5px;
+}
+.dropdown_blue2_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_blue2_hovered .dropdownsplit
+{
+	border-color:#afbed1;
+	background-color:#fdd017;
+}
+.splitbtn_blue2_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+
+.tbcontrol_blue2_hovered,.splitbtn_blue2_hovered
+{
+    /*border-color:#808080;*/
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_blue2_hovered,.splitbtn_office2010_blue2_hovered
+{
+    /*border-color:#abbad0;*/
+}
+.rbimage_blue2_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+    border-color:#abbad0;
+}
+
+.dropdown_blue2_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_blue2_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_blue2_clicked,.splitbtn_blue2_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_blue2_clicked,.splitbtn_office2010_blue2_clicked
+{
+    border-color:#abbad0;
+}
+.rbimage_blue2_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_blue2 .rtelayouttop
+{
+	border-bottom-color:#9abcd5!important;
+}
+.rteskin_blue2 .rtelayoutbottom
+{
+	border-top-color:#9abcd5!important;
+}
+
+/*silver*/
+.rteskin_silver
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#d9d9d9;
+	background-color:#efefef;
+}
+.tbtoolbar_silver{}
+.tbtoolbar_office2010_silver
+{
+	background-image:url(../../styles/images/tbribbon_lightsilver.png);
+	background-position:left bottom;
+	background-repeat:repeat-x;
+    background-color:#ffffff;
+}
+.ribbon_silver
+{
+	background-image:url(../../styles/images/rbribbon_silver2010.png);
+	background-position:right bottom;
+	background-repeat:no-repeat;
+	padding-right:3px;
+}
+.ribbon_silver:last-child
+{
+	background-image:none;
+}
+.ribbon_silver .ribbonlabel
+{
+	color:#666d7c;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+.tbgroup_silver
+{
+	border-left:1px solid #bbbbbb;
+	background-repeat:repeat-x;
+}
+.tbgroup_office2010_silver
+{
+	border-left-width:0px;
+}
+.dropdown_silver
+{
+	border:1px solid #d3d5dc;
+	background-color:white;
+}
+.dropdown_silver .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_silver .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_silver, .splitbtn_silver
+{
+    border:1px solid transparent;
+}
+.splitbtn_silver
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.tbcontrol_office2010_silver,.splitbtn_office2010_silver
+{
+	border:1px solid transparent;
+}
+.rbimage_silver
+{
+	border:1px solid transparent;
+}
+.dropdown_silver_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_silver_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_silver_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_silver_hovered,.splitbtn_silver_hovered
+{
+    border-color:#c2762b;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_silver_hovered,.splitbtn_office2010_silver_hovered
+{
+    border-color:#c28f36;
+}
+.rbimage_silver_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+    border-color:#c28f36;
+}
+.dropdown_silver_clicked
+{
+	border-color:#abc1de;
+	background-color:gold;
+}
+.dropdown_silver_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver_clicked,.splitbtn_silver_clicked
+{
+    border-color:#c2762b;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_silver_clicked,.splitbtn_office2010_silver_clicked
+{
+    border-color:#abbad0;
+}
+.rbimage_silver_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_silver .rtelayouttop
+{
+	border-bottom-color:#d9d9d9!important;
+}
+.rteskin_silver .rtelayoutbottom
+{
+	border-top-color:#d9d9d9!important;
+}
+/*silver2*/
+
+.rteskin_silver2
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#d9d9d9;
+	background-color:#efefef;
+}
+.tbtoolbar_office2010_silver2
+{
+	background-image:url(../../styles/images/tbribbon_silver2010.png);
+	background-position:left bottom;
+	background-repeat:repeat-x;
+    background-color:#ffffff;
+}
+.ribbon_silver2
+{
+	background-image:url(../../styles/images/rbribbon_silver2010.png);
+	background-position:right bottom;
+	background-repeat:no-repeat;
+	padding-right:3px;
+}
+.ribbon_silver2:last-child
+{
+	background-image:none;
+}
+.ribbon_silver2 .ribbonlabel
+{
+	color:#666d7c;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+
+.tbgroup_silver2
+{
+	border-left:1px solid #bbbbbb;
+}
+.tbgroup_office2010_silver2
+{
+	border-left-width:0px;
+	border:1px solid #dfdfdf;
+}
+
+.dropdown_silver2
+{
+	border-color:#d3d6d8;
+	background-color:#fefefe;
+}
+.dropdown_silver2 .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.splitbtn_silver2
+{
+	background-color:transparent;
+}
+.slitbtn_silver2 .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_silver2 , .splitbtn_silver2 , .dropdown_silver2
+{
+	border-left-style:solid;
+	border-right-style:solid;
+	border-left-width:1px;
+	border-right-width:1px;
+	border-left-color:#d8e6f7;
+	border-right-color:#d3d6d8;
+}
+.dropdown_silver2
+{
+	border-left-width:0px;
+	border-right-color:#d3d6d8;
+}
+.rbimage_silver2
+{
+	border:1px solid transparent;
+}
+.tbcontrol_silver2, .splitbtn_silver2
+{
+    border:1px solid transparent;
+}
+.splitbtn_silver2
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.dropdown_silver2_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_silver2_hovered .dropdownsplit
+{
+	border-color:#abc1de;
+	background-color:#fdd017;
+}
+.splitbtn_silver2_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_silver2_hovered,.splitbtn_silver2_hovered
+{
+    border-color:#c2762b;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_silver2_hovered,.splitbtn_office2010_silver2_hovered
+{
+    border-color:#c2762b;
+}
+.slitbtn_silver2 .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_office2010_silver2,.splitbtn_office2010_silver2
+{
+	border:1px solid transparent;
+}
+.rbimage_silver2_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+    border-color:#abbad0;
+}
+.dropdown_silver2_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_silver2_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver2_clicked,.splitbtn_silver2_clicked
+{
+    border-color:#c2762b;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_silver2_clicked,.splitbtn_office2010_silver2_clicked
+{
+    border-color:#abbad0;
+}
+.rbimage_silver2_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_silver2 .rtelayouttop
+{
+	border-bottom-color:#d9d9d9!important;
+}
+.rteskin_silver2 .rtelayoutbottom
+{
+	border-top-color:#d9d9d9!important;
+}
+/*black*/
+.rteskin_black
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#5f5f5f;
+	background-color:#c7c7c7;
+}
+.tbtoolbar_black{}
+.tbtoolbar_office2010_black
+{
+    background-color:#cacaca;
+	background-image:url(../../styles/images/tbribbon_black.png);
+	background-position:left bottom;
+	background-repeat:repeat-x;
+}
+.ribbon_black
+{
+	background-image:url(../../styles/images/rbribbon_black.png);
+	background-position:left bottom;
+	background-repeat:no-repeat;
+}
+.ribbon_black:first-child
+{
+	background-image:none;
+}
+.ribbon_black .ribbonlabel
+{
+	color:black;
+	background-color:transparent;
+	font-family:tahoma!important;
+	font-size:11px!important;
+}
+.tbgroup_black
+{
+	border-right:1px solid #d6dae3;
+	background-repeat:repeat-x;
+}
+.tbgroup_office2010_black
+{
+	border-right-width:0px;
+}
+.dropdown_black
+{
+	border:1px solid #919191;
+	background-color:#c9c9c9;
+}
+.dropdown_black .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_black .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_black, .splitbtn_black
+{
+    border:1px solid transparent;
+}
+.splitbtn_black
+{
+    border:1px solid #d3d5dc;
+	background-color:transparent;
+}
+.tbcontrol_office2010_black,.splitbtn_office2010_black
+{
+	border:1px solid transparent;
+}
+.rbimage_black
+{
+	border:1px solid transparent;
+}
+.dropdown_black_hovered
+{
+	border-color:#919191;
+	background-color:#eeeeee;
+}
+.dropdown_black_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_black_hovered .splitbtnsplit
+{
+	border-color:#d6d9e2;
+}
+.tbcontrol_black_hovered,.splitbtn_black_hovered
+{
+    border-color:#c28f36;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_black_hovered,.splitbtn_office2010_black_hovered
+{
+    border-color:#c28f36;
+}
+.rbimage_black_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+    border-color:#c28f36;
+}
+.dropdown_black_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_black_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_black_clicked,.splitbtn_black_clicked
+{
+    border-color:#c2762b;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_office2010_black_clicked,.splitbtn_office2010_black_clicked
+{
+    border-color:#abbad0;
+}
+.rbimage_black_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+teskin_black .rtelayouttop
+{
+	border-bottom-color:#5f5f5f!important;
+}
+.rteskin_black .rtelayoutbottom
+{
+	border-top-color:#5f5f5f!important;
+}
+
+/*checked*/
+.tbcontrol_silver_checked,.splitbtn_silver_checked,.tbcontrol_blue_checked,.splitbtn_blue_checked,
+.tbcontrol_black_checked,.splitbtn_black_checked
+{
+    border-color:#c2762b;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_blue2_checked,.splitbtn_blue2_checked
+{
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_silver2_checked,.splitbtn_silver2_checked
+{
+    border-color:#c2762b;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+}

LPWeb20/RichtextEditor/skins/office2010/skin.xml

@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<panel jsml-class="ribbon_{skin}_{color}" dock="left" overflow_x="visible" margin="2" padding="2,2,0,2"  height="104" width="32" >
+		<label dock="bottom" jsml-local="label" css_class="ribbonlabel" height="15" margin="0,-5,0,-4" text="ribbon" font_size="11px" width="20" vertical_align="bottom" horizontal_align="center">
+			<jsml-ref name="rteborderstyle"/>
+		</label>
+
+		<attach name="set_text">
+			label.set_text(self.get_text());
+		</attach>
+
+		<jsml-ref name="rteborderstyle"/>
+
+		<initialize>
+			self.toggle_css_class("ribbon_{skin}");
+			self.toggle_css_class("ribbon_{color}");
+			self.toggle_css_class("ribbon_{skin}_{color}");
+		</initialize>
+
+	</panel>
+
+	<image jsml-class="ribbonimage_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+		<initialize>
+			self.toggle_css_class("rbimage_{skin}");
+			self.toggle_css_class("rbimage_{color}");
+			self.toggle_css_class("rbimage_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("rbimage_{skin}_"+name,mode);
+			self.toggle_css_class("rbimage_{color}_"+name,mode);
+			self.toggle_css_class("rbimage_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+
+	<panel jsml-class="tbgroup_{skin}_{color}" dock="flow" overflow_x="visible" margin="2,3,3,2" height="22" width="20" >
+		<initialize>
+			self.toggle_css_class("tbgroup_{skin}");
+			self.toggle_css_class("tbgroup_{color}");
+			self.toggle_css_class("tbgroup_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbgroup_{skin}_"+name,mode);
+			self.toggle_css_class("tbgroup_{color}_"+name,mode);
+			self.toggle_css_class("tbgroup_{skin}_{color}_"+name,mode);
+		</attach>
+		<jsml-ref name="rteborderstyle"/>
+		<method name="append_child" arguments="ctrl" overrideas="tbgroup_append_child">
+			<![CDATA[
+			self.tbgroup_append_child(ctrl);
+			if("{color}"!="silver2")return;
+			var cn=ctrl._element.className;
+			if(cn&&cn.indexOf("dropdown")!=-1)
+			{
+				self.set_padding([0,-1,0,0])
+				self.paddingisset=true;
+			}
+			else if(self.paddingisset)
+			{
+				self.set_padding([0,0,0,0])
+				self.paddingisset=false;
+			}
+		  ]]>
+		</method>
+		<initialize>
+			if("{color}"=="blue2")self.set_padding([0,-1,0,-1])
+		</initialize>
+	</panel>
+
+	<panel jsml-class="linebreak_{skin}_{color}" dock="flow" flow_clear="newline" width='0'></panel>
+
+	<image jsml-class="image_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+		<initialize>
+			self.toggle_css_class("tbcontrol_{skin}");
+			self.toggle_css_class("tbcontrol_{color}");
+			self.toggle_css_class("tbcontrol_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbcontrol_{skin}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{color}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+
+	<panel jsml-class="splitbtn_{skin}_{color}" jsml-base="splitbtn_skin_base" width="32" dock="left">
+		<initialize>
+			self.toggle_css_class("splitbtn_{skin}");
+			self.toggle_css_class("splitbtn_{color}");
+			self.toggle_css_class("splitbtn_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("splitbtn_{skin}_"+name,mode);
+			self.toggle_css_class("splitbtn_{color}_"+name,mode);
+			self.toggle_css_class("splitbtn_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<panel jsml-class="dropdown_{skin}_{color}" jsml-base="dropdown_skin_base" margin="0">
+		<initialize>
+			self.toggle_css_class("dropdown_{skin}");
+			self.toggle_css_class("dropdown_{color}");
+			self.toggle_css_class("dropdown_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("dropdown_{skin}_"+name,mode);
+			self.toggle_css_class("dropdown_{color}_"+name,mode);
+			self.toggle_css_class("dropdown_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<include src="{folder}skins/{skin}/toolbar_{toolbar}.xml?{timems}" />
+
+	<include src="{folder}skins/_shared/_layout.xml?{timems}" />
+
+	<panel jsml-class="rteskin_{skin}_{color}" width="200" height="200">
+		<jsml-ref name="rteborderstyle"/>
+		<jsml-ref name="_shared_layout_{skin}_{color}"/>
+	</panel>
+
+</jsml>

LPWeb20/RichtextEditor/skins/office2010/toolbar_custom.xml

@@ -0,0 +1,459 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<initialize>
+			self.toggle_css_class("rtetoolbarwithribbon",true);
+		</initialize>
+
+		<panel jsml-base="ribbon_{skin}_{color}" text="@COMMON">
+
+			<panel jsml-base="tbgroup_{skin}_{color}" dock="none" overflow_y="visible">
+				<image jsml-base="ribbonimage_{skin}_{color}" command="Paste" imagename="ribbonpaste" tooltip="@PASTE" width="44" height="47" vertical_align="middle" horizontal_align="center"/>
+			</panel>
+			<panel left="49" overflow="visible">
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+					<image jsml-base="image_{skin}_{color}" command="Save" tooltip="@SAVE"/>
+					<image jsml-base="image_{skin}_{color}" command="New" tooltip="@NEW" imagename="newdoc" />
+					<image jsml-base="image_{skin}_{color}" command="Print" tooltip="@PRINT" />
+
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="spellcheck" tooltip="@SPELLCHECK" imagename="spell" />
+
+				</panel>
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<image jsml-base="image_{skin}_{color}" command="Cut" tooltip="@CUT">
+						<attach name="mousehover">
+							self._ResetFCButton();
+						</attach>
+					</image>
+					<image jsml-base="image_{skin}_{color}" command="Copy" tooltip="@COPY">
+						<attach name="mousehover">
+							self._ResetFCButton();
+						</attach>
+					</image>
+
+					<image jsml-base="image_{skin}_{color}" command="Delete" tooltip="@DELETE" />
+					
+					<image jsml-base="image_{skin}_{color}" command="Find" tooltip="@FINDANDREPLACE" />
+
+				</panel>
+
+			</panel>
+
+			<panel top="55" overflow="visible">
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<image jsml-base="image_{skin}_{color}" command="PasteText" tooltip="@PASTETEXT" />
+					<image jsml-base="image_{skin}_{color}" command="PasteWord" tooltip="@PASTEWORD" />
+
+				</panel>
+				
+				<panel jsml-base="tbgroup_{skin}_{color}" flow_clear="follow" margin="0,0,0,3">
+					<image jsml-base="image_{skin}_{color}" command="Undo" tooltip="@UNDO" />
+					<image jsml-base="image_{skin}_{color}" command="Redo" tooltip="@REDO" />
+				</panel>
+				
+				<panel jsml-base="tbgroup_{skin}_{color}" flow_clear="follow">
+
+
+					<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@FORMATPAINTER" imagename="formatpainter">
+						<attach name="click" arguments="je,e">
+							<![CDATA[
+						if(e.ctrlKey||e.altKey)
+							return self._rteinstance.ExecCommand("formatpainterfetch")
+						if(self._rteinstance.CanExecCommand("formatpainterapply"))
+							self._rteinstance.ExecCommand("formatpainterapply")
+						else
+							self.invoke_event("splitclick");
+						]]>
+						</attach>
+						<attach name="splitclick">
+							formatpaintermenu.show({control:self,stopDispose:true});
+						</attach>
+						<attach name="editor_ready" arguments="jevent,editor">
+							formatpaintermenu.invoke_recursive("editor_ready",editor);
+						</attach>
+						<attach name="disposing">
+							formatpaintermenu.dispose();
+						</attach>
+						<panel jsml-base="floatmenu" jsml-local="formatpaintermenu" jsml-append="false">
+							<panel jsml-base="rtemenuitem" command="formatpainterfetch" imagename="copy" text="@FORMATPAINTERFETCH"  />
+							<panel jsml-base="rtemenuitem" command="formatpainterapply" imagename="formatpainter" text="@FORMATPAINTERAPPLY"  />
+							<panel jsml-base="rtemenuitem" command="formatpainterclear" imagename="newdoc" text="@FORMATPAINTERCLEAR"  />
+						</panel>
+					</panel>
+
+				</panel>
+
+			</panel>
+
+		</panel>
+		<panel jsml-base="ribbon_{skin}_{color}" text="@FORMAT">
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<initialize>
+					self._element.setAttribute("noradius","1");
+				</initialize>
+				<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontname.xml" width="88" text="@FontName" stylename="fontname" />
+				<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontsize.xml" width="65" text="@FontSize" stylename="fontsize" />
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<image jsml-base="image_{skin}_{color}" command="Bold" tooltip="@BOLD" />
+				<image jsml-base="image_{skin}_{color}" command="Italic" tooltip="@ITALIC" />
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="Underline" tooltip="@UNDERLINE" imagename="under" >
+					<attach name="splitclick">
+						decorationmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						decorationmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						decorationmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="decorationmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="Linethrough" text="@LINETHROUGH" imagename="strike" />
+						<panel jsml-base="rtemenuitem" command="Overline" text="@OVERLINE" imagename="Overline" />
+					</panel>
+				</panel>
+
+			</panel>
+			<panel jsml-base="tbgroup_{skin}_{color}">
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="ForeColor" tooltip="@TEXTCOLOR">
+					<jsml-ref name="rtecommandcolor"/>
+				</panel>
+				<panel jsml-base="splitbtn_{skin}_{color}" command="BackColor" tooltip="@BACKCOLOR">
+					<jsml-ref name="rtecommandcolor"/>
+				</panel>
+
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<image jsml-base="image_{skin}_{color}" command="Superscript" tooltip="@SUPERSCRIPT" />
+				<image jsml-base="image_{skin}_{color}" command="Subscript" tooltip="@SUBSCRIPT" />
+
+				<panel jsml-base="splitbtn_{skin}_{color}" imagename="Ucase" tooltip="@CHANGECASE" >
+					<attach name="click,splitclick">
+						textcasemenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						textcasemenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						textcasemenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="textcasemenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="Ucase" text="@UPPERCASE"  />
+						<panel jsml-base="rtemenuitem" command="Lcase" text="@LOWERCASE"  />
+					</panel>
+				</panel>
+
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}" flow_clear="follow">
+
+				<image jsml-base="image_{skin}_{color}" command="RemoveFormat" tooltip="@REMOVEFORMAT" imagename="unformat" />
+
+				<image jsml-base="image_{skin}_{color}" command="CleanCode" tooltip="@CLEANCODE" imagename="cleanup" />
+
+				<image jsml-base="image_{skin}_{color}" command="SelectAll" tooltip="@SELECTALL" />
+
+			</panel>
+
+		</panel>
+
+		<panel jsml-base="ribbon_{skin}_{color}" text="@PARAGRAPHS">
+
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<initialize>
+					self._element.setAttribute("noradius","1");
+				</initialize>
+				<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setparagraph.xml" width="82" text="@Paragraphs" stylename="paragraph" />
+				<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setstyles.xml" width="62" text="@Styles" />
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@JUSTIFY" imagename="left">
+					<attach name="click,splitclick">
+						justifymenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						justifymenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						justifymenu.dispose();
+					</attach>
+					<attach name="update_statusui">
+						<![CDATA[
+						var editor=self.find_editor();
+						var arr=justifymenu.get_children();
+						for(var i=arr.length-1;i>=0;i--)
+						{
+							var item=arr[i];
+							var cmd=item.get_command();
+							if(!editor.QueryCommand(cmd))
+								continue;
+							if(self._lastjustify==cmd)
+								return;
+							self._lastjustify=cmd;
+							self.set_imagename(item.get_imagename());
+							self.set_checked(cmd!="JustifyNone");
+							return;
+						}
+						]]>
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="justifymenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="JustifyLeft" text="@JUSTIFYLEFT" imagename="left" />
+						<panel jsml-base="rtemenuitem" command="JustifyCenter" text="@JUSTIFYCENTER" imagename="center" />
+						<panel jsml-base="rtemenuitem" command="JustifyRight" text="@JUSTIFYRIGHT" imagename="right" />
+						<panel jsml-base="rtemenuitem"  command="JustifyFull" text="@JUSTIFYFULL" imagename="justifyfull" />
+						<panel jsml-base="rtemenuitem" command="JustifyNone" text="@JUSTIFYNONE" imagename="justifynone" />
+					</panel>
+				</panel>
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="LineHeight" imagename="lineheight">
+					<attach name="click,splitclick">
+						lineheightmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						lineheightmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						lineheightmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="lineheightmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="100%" text="100%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="110%" text="110%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="115%" text="115%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="120%" text="120%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="130%" text="130%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="140%" text="140%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="150%" text="150%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="160%" text="160%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="180%" text="180%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="200%" text="200%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="250%" text="250%"  />
+						<panel jsml-base="rtemenuitem"  command="lineheight" imagename="blank20" arguments="300%" text="300%"  />
+						<panel jsml-base="rtemenuspliter" />
+						<panel jsml-base="rtemenuitem"  text="@TEXT| |@STYLES">
+							<attach name="click">
+								var editor=self.find_editor();
+								var node=editor.EnsureParagraph();
+								if(node)editor.ShowPropertiesDialog(node,{styletab:"text"})
+							</attach>
+						</panel>
+					</panel>
+				</panel>
+				
+				
+				<image jsml-base="image_{skin}_{color}" command="LTR" tooltip="@DIRECTION_LTR" imagename="dir_ltr" />
+				<image jsml-base="image_{skin}_{color}" command="RTL"  tooltip="@DIRECTION_RTL" imagename="dir_rtl" />
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="InsertBreak" tooltip="@INSERTBREAKRULE" imagename="break" >
+					<attach name="splitclick">
+						insertbrmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						insertbrmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						insertbrmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="insertbrmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERTWBR" imagename="wbr" />
+						<panel jsml-base="rtemenuitem" command="InsertDiv" text="@INSERTDIV" imagename="div" />
+						<panel jsml-base="rtemenuitem" command="InsertParagraph" text="@INSERTPARAGRAPH" imagename="p" />
+						<panel jsml-base="rtemenuitem"  command="InsertHorizontalRule" text="@INSERTHORIZONTALRULE" imagename="rule" />
+						<panel jsml-base="rtemenuitem" command="InsertPageBreak" text="@INSERTPAGEPRINTBREAK" imagename="InsertPageBreak" />
+						<panel jsml-base="rtemenuitem" command="InsertTopLine" text="@INSERTTOPLINE" imagename="topline" />
+						<panel jsml-base="rtemenuitem" command="InsertBottomLine" text="@INSERTBOTTOMLINE" imagename="bottomline" />
+					</panel>
+				</panel>
+
+			</panel>
+
+			<panel jsml-base="tbgroup_{skin}_{color}">
+				<panel jsml-base="splitbtn_{skin}_{color}" command="InsertOrderedList" tooltip="@ORDEREDLIST" imagename="numlist" >
+					<attach name="splitclick">
+						listolmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						listolmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						listolmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="listolmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem"  command="InsertOrderedList" arguments="decimal" noactive="1" text="1,2,3,4,5"  />
+						<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-latin" noactive="1" text="a,b,c,d,e"  />
+						<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-roman" noactive="1" text="ⅰ,ⅱ,ⅲ,ⅳ,ⅴ"  />
+						<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-latin" noactive="1" text="A,B,C,D,E"  />
+						<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-roman" noactive="1" text="Ⅰ,Ⅱ,ⅢⅢ,Ⅳ,Ⅴ"  />
+						<!--<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="cjk-ideographic" text="一,二,三,四,五"  />-->
+						<!-- NOTE:check the css list-style-type -->
+					</panel>
+				</panel>
+
+
+				<panel jsml-base="splitbtn_{skin}_{color}" command="InsertUnorderedList" tooltip="@UNORDEREDLIST" imagename="bullist">
+					<attach name="splitclick">
+						listulmenu.show({control:self,stopDispose:true});
+					</attach>
+					<attach name="editor_ready" arguments="jevent,editor">
+						listulmenu.invoke_recursive("editor_ready",editor);
+					</attach>
+					<attach name="disposing">
+						listulmenu.dispose();
+					</attach>
+					<panel jsml-base="floatmenu" jsml-local="listulmenu" jsml-append="false">
+						<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="disc" noactive="1" imagename="ul-disc" text="@UL_DISC"  />
+						<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="circle" noactive="1" imagename="ul-circle" text="@UL_CIRCLE"  />
+						<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="square" noactive="1" imagename="ul-square" text="@UL_SQUARE"  />
+					</panel>
+				</panel>
+				
+				<image jsml-base="image_{skin}_{color}" command="Outdent" tooltip="@OUTDENT" />
+				<image jsml-base="image_{skin}_{color}" command="Indent" tooltip="@INDENT" />
+				<image jsml-base="image_{skin}_{color}" command="InsertBlockQuote" tooltip="@INSERTBLOCKQUOTE" imagename="blockquote" />
+
+			</panel>
+
+
+		</panel>
+
+
+		<panel jsml-base="ribbon_{skin}_{color}" text="@INSERT">
+
+			<panel jsml-base="tbgroup_{skin}_{color}" dock="none" overflow_y="visible">
+				<image jsml-base="ribbonimage_{skin}_{color}" command="ShowXmlFloatbox" arguments="inserttable.xml" imagename="ribbontable" tooltip="@INSERTTABLE" width="44" height="47" vertical_align="middle" horizontal_align="center"/>
+			</panel>
+			<panel left="49" overflow="visible">
+
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@INSERTFORM" imagename="InsertForm" >
+						<attach name="click,splitclick">
+							insertformmenu.show({control:self,stopDispose:true});
+						</attach>
+						<attach name="editor_ready" arguments="jevent,editor">
+							insertformmenu.invoke_recursive("editor_ready",editor);
+						</attach>
+						<attach name="disposing">
+							insertformmenu.dispose();
+						</attach>
+						<panel jsml-base="floatmenu" jsml-local="insertformmenu" jsml-append="false">
+
+							<panel jsml-base="rtemenuitem" command="InsertForm" text="@INSERTFORM" />
+							<panel jsml-base="rtemenuitem" command="InsertTextarea" text="@INSERTTEXTAREA" imagename="textarea" />
+							<panel jsml-base="rtemenuitem" command="InsertInpText" text="@INSERTINPTEXT" imagename="textbox" />
+							<panel jsml-base="rtemenuitem" command="InsertInpPassword" text="@INSERTINPPASSWORD" imagename="passwordfield" />
+							<panel jsml-base="rtemenuitem" command="InsertInpHidden" text="@INSERTINPHIDDEN" imagename="hiddenfield" />
+							<panel jsml-base="rtemenuitem" command="InsertInpFile" text="@INSERTINPFILE" imagename="document"/>
+							<panel jsml-base="rtemenuitem" command="InsertInpImage" text="@INSERTINPIMAGE" imagename="image" />
+							<panel jsml-base="rtemenuitem" command="InsertInpReset" text="@INSERTINPRESET" imagename="reset" />
+							<panel jsml-base="rtemenuitem" command="InsertInpSubmit" text="@INSERTINPSUBMIT" imagename="submit" />
+							<panel jsml-base="rtemenuitem" command="InsertRadioBox" text="@INSERTRADIOBOX" imagename="optionbutton" />
+							<panel jsml-base="rtemenuitem" command="InsertCheckbox" text="@INSERTCHECKBOX" imagename="checkbox" />
+							<panel jsml-base="rtemenuitem" command="InsertInpButton" text="@INSERTINPBUTTON" imagename="pushbutton" />
+							<panel jsml-base="rtemenuitem" command="InsertButton" text="@INSERTBUTTON" imagename="pushbutton" />
+							<panel jsml-base="rtemenuitem" command="InsertDropDown" text="@INSERTDROPDOWN" imagename="dropdownbox" />
+							<panel jsml-base="rtemenuitem" command="InsertListbox" text="@INSERTLISTBOX" imagename="listbox" />
+
+						</panel>
+					</panel>
+
+					<image jsml-base="image_{skin}_{color}" command="InsertBox" tooltip="@INSERTBOX" imagename="box" />
+					<image jsml-base="image_{skin}_{color}" command="InsertLayer" tooltip="@INSERTLAYER" imagename="layer" />
+					<image jsml-base="image_{skin}_{color}" command="InsertFieldSet" tooltip="@INSERTFIELDSET" imagename="groupbox" />
+
+					<image jsml-base="image_{skin}_{color}" command="FullScreen" tooltip="@FULLSCREEN" imagename="fit" />
+
+					<image jsml-base="image_{skin}_{color}" command="ToggleBorder" imagename="borders" />
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="pageproperties" tooltip="@PAGEPROPERTIES" imagename="properties" />
+					<image jsml-base="image_{skin}_{color}" command="Help"  tooltip="@HELP" />
+
+				</panel>
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+					<panel jsml-base="splitbtn_{skin}_{color}" command="InsertLink" tooltip="@INSERTLINK" imagename="link" />
+					<image jsml-base="image_{skin}_{color}" command="UnLink" tooltip="@REMOVE| |@LINK" imagename="unlink" />
+					<image jsml-base="image_{skin}_{color}" command="InsertAnchor" tooltip="@INSERTANCHOR" imagename="anchor" />
+					<image jsml-base="image_{skin}_{color}" command="InsertImageMap" tooltip="@INSERTIMAGEMAP" imagename="imagemap" />
+					<panel jsml-base="splitbtn_{skin}_{color}" command="InsertDate" tooltip="@INSERTDATE" imagename="insertdate" />
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertchars" tooltip="@INSERTCHARS" imagename="specialchar" />
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="virtualkeyboard" tooltip="@VIRTUALKEYBOARD" imagename="keyboard" />
+				</panel>
+
+			</panel>
+
+			<panel top="55" overflow="visible">
+
+
+				<panel jsml-base="tbgroup_{skin}_{color}">
+
+					<image jsml-base="image_{skin}_{color}" command="InsertGallery" tooltip="@INSERTGALLERY" imagename="gallery" />
+					<image jsml-base="image_{skin}_{color}" command="InsertImage" tooltip="@INSERTIMAGE" imagename="image" />
+
+				</panel>
+
+				<panel jsml-base="tbgroup_{skin}_{color}" flow_clear="follow">
+					<panel jsml-base="splitbtn_{skin}_{color}" command="InsertTemplate" tooltip="@INSERTTEMPLATE" imagename="template" />
+					<image jsml-base="image_{skin}_{color}" command="InsertDocument" tooltip="@INSERTDOCUMENT" imagename="document" />
+					<image jsml-base="image_{skin}_{color}" command="InsertVideo" tooltip="@INSERTVIDEO" imagename="media" />
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="syntaxhighlighter" tooltip="@SYNTAXHIGHLIGHTER" imagename="code" />
+
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertyoutube" tooltip="@INSERTYOUTUBE" imagename="youtube"/>
+					<image jsml-base="image_{skin}_{color}" imagename="html5" tooltip="@INSERTHTML5">
+						<attach name="click">
+							inserthtml5menu.show({control:self,stopDispose:true});
+						</attach>
+						<attach name="editor_ready" arguments="jevent,editor">
+							inserthtml5menu.invoke_recursive("editor_ready",editor);
+						</attach>
+						<attach name="disposing">
+							inserthtml5menu.dispose();
+						</attach>
+						<panel jsml-base="floatmenu" jsml-local="inserthtml5menu" jsml-append="false">
+							<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERT| &lt;wbr&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="Mark" text="@INSERT| &lt;mark&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertDetails" text="@INSERT| &lt;details&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertSection" text="@INSERT| &lt;section&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertArticle" text="@INSERT| &lt;article&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertHeader" text="@INSERT| &lt;header&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertFooter" text="@INSERT| &lt;footer&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertHGroup" text="@INSERT| &lt;hgroup&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertAside" text="@INSERT| &lt;aside&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertAudio" text="@INSERT| &lt;audio&gt;" imagename="newtag" />
+							<panel jsml-base="rtemenuitem" command="InsertVideo" text="@INSERT| &lt;video&gt;" imagename="newtag" />
+						</panel>
+					</image>
+					<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="googlemap" tooltip="@GOOGLEMAP" imagename="map"/>
+
+
+				</panel>
+
+
+			</panel>
+
+		</panel>
+
+
+
+	</jsml-def>
+
+
+
+
+</jsml>
+
+
+

LPWeb20/RichtextEditor/skins/office2010/toolbar_template.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+
+	<include src="{folder}skins/_shared/_toolbartemplate.xml?{timems}" />
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<method name="find_config">
+			<![CDATA[
+			for(var ctrl=self;ctrl!=null;ctrl=ctrl.get_jsml_parent())
+				if(ctrl._rteconfig)return ctrl._rteconfig;
+			]]>
+		</method>
+		<attach name="editor_ready" arguments="je,editor">
+			editor.ParseItemList(self,editor._config.toolbaritems||editor._config.toolbars[editor._config.toolbar]||"");
+		</attach>
+	</jsml-def>
+
+</jsml>
+
+
+

LPWeb20/RichtextEditor/skins/officexp/skin.css

@@ -0,0 +1,244 @@
+/*silver*/
+.rteskin_silver
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#d9d9d9;
+	background-color:#efefef;
+}
+.ribbon_silver
+{
+	background-image:url(../../styles/images/rbribbon_silver.png);
+	background-position:left bottom;
+	background-repeat:no-repeat;
+}
+.ribbon_silver:first-child
+{
+	background-image:none;
+}
+.tbgroup_silver
+{
+	border-left:1px solid #bbbbbb;
+}
+.dropdown_silver
+{
+	border:1px solid #d3d5dc;
+	background-color:white;
+}
+.dropdown_silver .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_silver .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_silver, .splitbtn_silver
+{
+    border:1px solid transparent;
+}
+.splitbtn_silver
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.rbimage_silver{}
+.dropdown_silver_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_silver_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_silver_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_silver_hovered,.splitbtn_silver_hovered
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_silver_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+.dropdown_silver_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_silver_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver_clicked,.splitbtn_silver_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_silver_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_silver .rtelayouttop
+{
+	border-bottom-color:#d9d9d9!important;
+}
+.rteskin_silver .rtelayoutbottom
+{
+	border-top-color:#d9d9d9!important;
+}
+/*blue*/
+.rteskin_blue
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#9abcd5;
+	background-color:#dbe5ef;
+}
+.ribbon_blue
+{
+	background-image:url(../../styles/images/rbribbon_blue.png);
+	background-position:left center;
+	background-repeat:no-repeat;
+}
+.ribbon_blue:first-child
+{
+	background-image:none;
+}
+
+.tbgroup_blue
+{
+	border-left:1px solid #D6DAE3;
+}
+.dropdown_blue
+{
+	border:1px solid #d3d5dc;
+	background-color:#ffffff;
+}
+.dropdown_blue .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_blue .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_blue, .splitbtn_blue
+{
+    border:1px solid transparent;
+}
+.splitbtn_blue
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.rbimage_blue{}
+.dropdown_blue_hovered
+{
+	border-color:#abc1de;
+	background-color:#eff5fc;
+}
+.dropdown_blue_hovered .dropdownsplit
+{
+	border-color:#abc1de;
+	background-color:#eff5fc;
+}
+.splitbtn_blue_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+
+.tbcontrol_blue_hovered,.splitbtn_blue_hovered
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_blue_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+
+.dropdown_blue_clicked
+{
+	border-color:#abc1de;
+	background-color:#ffd700;
+}
+.dropdown_blue_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_blue_clicked,.splitbtn_blue_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_blue_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_blue .rtelayouttop
+{
+	border-bottom-color:#9abcd5!important;
+}
+.rteskin_blue .rtelayoutbottom
+{
+	border-top-color:#9abcd5!important;
+}
+/*officexp*/
+.tbgroup_officexp_blue
+{
+    border-right: #a6b6c5 1px solid; 
+    border-top: #f0f5fa 1px solid; 
+    border-left: #f0f5fa  1px solid; 
+    border-bottom: #a6b6c5 1px solid; 
+	background-image:url(../../styles/images/tbgroup_blue2010.png);
+	background-repeat:repeat-x;
+}
+.splitbtn_officexp_blue
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.splitbtn_officexp_blue_hovered
+{
+    border-color:#808080;
+}
+.tbgroup_officexp_silver
+{
+    border:1px solid transparent;
+}
+
+/*checked*/
+.tbcontrol_silver_checked,.splitbtn_silver_checked
+{
+    border-color:#808080;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_blue_checked,.splitbtn_blue_checked
+{
+    border-color:#808080;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_checked.png);
+	background-repeat:repeat-x;
+}

LPWeb20/RichtextEditor/skins/officexp/skin.xml

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+
+  <panel jsml-class="ribbon_{skin}_{color}" dock="left" overflow_x="visible" margin="1" padding="0,2,0,3"  height="86" width="32" >
+
+
+	  <jsml-ref name="rteborderstyle"/>
+
+	  <initialize>
+      self.toggle_css_class("ribbon_{skin}");
+      self.toggle_css_class("ribbon_{color}");
+      self.toggle_css_class("ribbon_{skin}_{color}");
+    </initialize>
+
+  </panel>
+
+  <image jsml-class="ribbonimage_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+    <initialize>
+      self.toggle_css_class("rbimage_{skin}");
+      self.toggle_css_class("rbimage_{color}");
+      self.toggle_css_class("rbimage_{skin}_{color}");
+    </initialize>
+    <attach name="tooglecssclass" arguments="jevent,name,mode">
+      self.toggle_css_class("rbimage_{skin}_"+name,mode);
+      self.toggle_css_class("rbimage_{color}_"+name,mode);
+      self.toggle_css_class("rbimage_{skin}_{color}_"+name,mode);
+    </attach>
+  </image>
+
+
+
+  <panel jsml-class="tbgroup_{skin}_{color}" dock="flow" overflow_x="visible" margin="2,0,2,2" height="25" width="20" >
+    <initialize>
+      self.toggle_css_class("tbgroup_{skin}");
+      self.toggle_css_class("tbgroup_{color}");
+      self.toggle_css_class("tbgroup_{skin}_{color}");
+    </initialize>
+    <attach name="tooglecssclass" arguments="jevent,name,mode">
+      self.toggle_css_class("tbgroup_{skin}_"+name,mode);
+      self.toggle_css_class("tbgroup_{color}_"+name,mode);
+      self.toggle_css_class("tbgroup_{skin}_{color}_"+name,mode);
+    </attach>
+    <jsml-ref name="rteborderstyle"/>
+    <attach name="attach_dom">
+      <![CDATA[
+			if(self.get_border_width()[1])self.set_padding([1,2,1,2])
+			if(self.get_margin()[1] &&self.get_margin()[1]==2)
+			{
+				self.set_padding([0,2,0,2]);
+				self.set_border_width([0,0,0,0]);
+			}
+			var p=self.get_parent();
+			var cn=p._element.className;
+			if(cn&&cn.indexOf("ribbon_")==-1)
+			   self.set_margin([0,0,0,0]);
+			]]>
+    </attach>
+  </panel>
+
+  <panel jsml-class="linebreak_{skin}_{color}" dock="flow" flow_clear="newline" width='0'></panel>
+
+  <image jsml-class="image_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+    <initialize>
+      self.toggle_css_class("tbcontrol_{skin}");
+      self.toggle_css_class("tbcontrol_{color}");
+      self.toggle_css_class("tbcontrol_{skin}_{color}");
+    </initialize>
+    <attach name="tooglecssclass" arguments="jevent,name,mode">
+      self.toggle_css_class("tbcontrol_{skin}_"+name,mode);
+      self.toggle_css_class("tbcontrol_{color}_"+name,mode);
+      self.toggle_css_class("tbcontrol_{skin}_{color}_"+name,mode);
+    </attach>
+  </image>
+
+  <panel jsml-class="splitbtn_{skin}_{color}" jsml-base="splitbtn_skin_base" width="32" dock="left">
+    <initialize>
+      self.toggle_css_class("splitbtn_{skin}");
+      self.toggle_css_class("splitbtn_{color}");
+      self.toggle_css_class("splitbtn_{skin}_{color}");
+    </initialize>
+    <attach name="tooglecssclass" arguments="jevent,name,mode">
+      self.toggle_css_class("splitbtn_{skin}_"+name,mode);
+      self.toggle_css_class("splitbtn_{color}_"+name,mode);
+      self.toggle_css_class("splitbtn_{skin}_{color}_"+name,mode);
+    </attach>
+  </panel>
+
+  <panel jsml-class="dropdown_{skin}_{color}" jsml-base="dropdown_skin_base" margin="0">
+    <initialize>
+      self.toggle_css_class("dropdown_{skin}");
+      self.toggle_css_class("dropdown_{color}");
+      self.toggle_css_class("dropdown_{skin}_{color}");
+    </initialize>
+    <attach name="tooglecssclass" arguments="jevent,name,mode">
+      self.toggle_css_class("dropdown_{skin}_"+name,mode);
+      self.toggle_css_class("dropdown_{color}_"+name,mode);
+      self.toggle_css_class("dropdown_{skin}_{color}_"+name,mode);
+    </attach>
+  </panel>
+
+  <include src="{folder}skins/{skin}/toolbar_{toolbar}.xml?{timems}" />
+
+  <include src="{folder}skins/_shared/_layout.xml?{timems}" />
+
+  <panel jsml-class="rteskin_{skin}_{color}" width="200" height="200">
+    <jsml-ref name="rteborderstyle"/>
+    <jsml-ref name="_shared_layout_{skin}_{color}"/>
+  </panel>
+
+</jsml>

LPWeb20/RichtextEditor/skins/officexp/toolbar_custom.xml

@@ -0,0 +1,295 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="Save" tooltip="@SAVE"/>
+			<image jsml-base="image_{skin}_{color}" command="New" tooltip="@NEW" imagename="newdoc" />
+			<image jsml-base="image_{skin}_{color}" command="Print" tooltip="@PRINT" />
+			<image jsml-base="image_{skin}_{color}" command="Find" tooltip="@FINDANDREPLACE" />
+			<image jsml-base="image_{skin}_{color}" command="CleanCode" tooltip="@CLEANCODE" imagename="cleanup" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="spellcheck" tooltip="@SPELLCHECK" imagename="spell" />
+
+			<image jsml-base="image_{skin}_{color}" command="FullScreen" tooltip="@FULLSCREEN" imagename="fit" />
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="SelectAll" tooltip="@SELECTALL" />
+			<image jsml-base="image_{skin}_{color}" command="SelectNone" tooltip="@SELECTNONE" />
+			<image jsml-base="image_{skin}_{color}" command="Delete" tooltip="@DELETE" />
+
+			<image jsml-base="image_{skin}_{color}" command="Cut" tooltip="@CUT">
+				<attach name="mousehover">
+					self._ResetFCButton();
+				</attach>
+			</image>
+			<image jsml-base="image_{skin}_{color}" command="Copy" tooltip="@COPY">
+				<attach name="mousehover">
+					self._ResetFCButton();
+				</attach>
+			</image>
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="Paste" tooltip="@PASTE" />
+			<image jsml-base="image_{skin}_{color}" command="PasteText" tooltip="@PASTETEXT" />
+			<image jsml-base="image_{skin}_{color}" command="PasteWord" tooltip="@PASTEWORD" />
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="Undo" tooltip="@UNDO" />
+			<image jsml-base="image_{skin}_{color}" command="Redo" tooltip="@REDO" />
+
+		</panel>
+
+		<!--
+		<panel jsml-base="linebreak_{skin}" />
+		-->
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="InsertGallery" tooltip="@INSERTGALLERY" imagename="gallery" />
+			<image jsml-base="image_{skin}_{color}" command="InsertImage" tooltip="@INSERTIMAGE" imagename="image" />
+			<image jsml-base="image_{skin}_{color}" command="InsertVideo" tooltip="@INSERTVIDEO" imagename="media" />
+			<image jsml-base="image_{skin}_{color}" command="InsertDocument" tooltip="@INSERTDOCUMENT" imagename="document" />
+			<image jsml-base="image_{skin}_{color}" command="InsertTemplate" tooltip="@INSERTTEMPLATE" imagename="template" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="syntaxhighlighter" tooltip="@SYNTAXHIGHLIGHTER" imagename="code" />
+
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertyoutube" tooltip="@INSERTYOUTUBE" imagename="youtube"/>
+			<image jsml-base="image_{skin}_{color}" imagename="html5" tooltip="@INSERTHTML5">
+				<attach name="click">
+					inserthtml5menu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					inserthtml5menu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					inserthtml5menu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="inserthtml5menu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERT| &lt;wbr&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="Mark" text="@INSERT| &lt;mark&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertDetails" text="@INSERT| &lt;details&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertSection" text="@INSERT| &lt;section&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertArticle" text="@INSERT| &lt;article&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertHeader" text="@INSERT| &lt;header&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertFooter" text="@INSERT| &lt;footer&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertHGroup" text="@INSERT| &lt;hgroup&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertAside" text="@INSERT| &lt;aside&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertAudio" text="@INSERT| &lt;audio&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertVideo" text="@INSERT| &lt;video&gt;" imagename="newtag" />
+				</panel>
+			</image>
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="googlemap" tooltip="@GOOGLEMAP" imagename="map"/>
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="Bold" tooltip="@BOLD" />
+			<image jsml-base="image_{skin}_{color}" command="Italic" tooltip="@ITALIC" />
+			<image jsml-base="image_{skin}_{color}" command="Underline" tooltip="@UNDERLINE" imagename="under" />
+			<image jsml-base="image_{skin}_{color}" command="Linethrough" tooltip="@LINETHROUGH" imagename="strike" />
+			<image jsml-base="image_{skin}_{color}" command="Overline" tooltip="@OVERLINE" />
+
+			<image jsml-base="image_{skin}_{color}" command="Superscript" tooltip="@SUPERSCRIPT" />
+			<image jsml-base="image_{skin}_{color}" command="Subscript" tooltip="@SUBSCRIPT" />
+			<image jsml-base="image_{skin}_{color}" command="Ucase" tooltip="@UPPERCASE" />
+			<image jsml-base="image_{skin}_{color}" command="Lcase" tooltip="@LOWERCASE" />
+
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="ForeColor" tooltip="@TEXTCOLOR">
+				<jsml-ref name="rtecommandcolor"/>
+			</panel>
+			<panel jsml-base="splitbtn_{skin}_{color}" command="BackColor" tooltip="@BACKCOLOR">
+				<jsml-ref name="rtecommandcolor"/>
+			</panel>
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="RemoveFormat" tooltip="@REMOVEFORMAT" imagename="unformat" />
+			<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@FORMATPAINTER" imagename="formatpainter">
+				<attach name="click" arguments="je,e">
+					<![CDATA[
+						if(e.ctrlKey||e.altKey)
+							return self._rteinstance.ExecCommand("formatpainterfetch")
+						if(self._rteinstance.CanExecCommand("formatpainterapply"))
+							self._rteinstance.ExecCommand("formatpainterapply")
+						else
+							self.invoke_event("splitclick");
+						]]>
+				</attach>
+				<attach name="splitclick">
+					formatpaintermenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					formatpaintermenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					formatpaintermenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="formatpaintermenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="formatpainterfetch" imagename="copy" text="@FORMATPAINTERFETCH"  />
+					<panel jsml-base="rtemenuitem" command="formatpainterapply" imagename="formatpainter" text="@FORMATPAINTERAPPLY"  />
+					<panel jsml-base="rtemenuitem" command="formatpainterclear" imagename="newdoc" text="@FORMATPAINTERCLEAR"  />
+				</panel>
+			</panel>
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="JustifyLeft" tooltip="@JUSTIFYLEFT" imagename="left" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyCenter" tooltip="@JUSTIFYCENTER" imagename="center" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyRight" tooltip="@JUSTIFYRIGHT" imagename="right" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyFull" tooltip="@JUSTIFYFULL" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyNone" tooltip="@JUSTIFYNONE" noactive="true" />
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertOrderedList" tooltip="@ORDEREDLIST" imagename="numlist" >
+				<attach name="splitclick">
+					listolmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					listolmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					listolmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="listolmenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem"  command="InsertOrderedList" arguments="decimal" noactive="1" text="1,2,3,4,5"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-latin" noactive="1" text="a,b,c,d,e"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-roman" noactive="1" text="ⅰ,ⅱ,ⅲ,ⅳ,ⅴ"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-latin" noactive="1" text="A,B,C,D,E"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-roman" noactive="1" text="Ⅰ,Ⅱ,ⅢⅢ,Ⅳ,Ⅴ"  />
+					<!--<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="cjk-ideographic" text="一,二,三,四,五"  />-->
+					<!-- NOTE:check the css list-style-type -->
+				</panel>
+			</panel>
+
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertUnorderedList" tooltip="@UNORDEREDLIST" imagename="bullist">
+				<attach name="splitclick">
+					listulmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					listulmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					listulmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="listulmenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="disc" noactive="1" imagename="ul-disc" text="@UL_DISC"  />
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="circle" noactive="1" imagename="ul-circle" text="@UL_CIRCLE"  />
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="square" noactive="1" imagename="ul-square" text="@UL_SQUARE"  />
+				</panel>
+			</panel>
+
+			<image jsml-base="image_{skin}_{color}" command="Outdent" tooltip="@OUTDENT" />
+			<image jsml-base="image_{skin}_{color}" command="Indent" tooltip="@INDENT" />
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="InsertBlockQuote" tooltip="@INSERTBLOCKQUOTE" imagename="blockquote" />
+			<image jsml-base="image_{skin}_{color}" command="InsertBreak" tooltip="@INSERTBREAKRULE" imagename="break" />
+			<!--
+			<image jsml-base="image_{skin}_{color}" command="InsertWbr" tooltip="@INSERTWBR" imagename="wbr" />
+			-->
+			<image jsml-base="image_{skin}_{color}" command="InsertDiv" tooltip="@INSERTDIV" imagename="div" />
+			<image jsml-base="image_{skin}_{color}" command="InsertParagraph" tooltip="@INSERTPARAGRAPH" imagename="p" />
+			<image jsml-base="image_{skin}_{color}" command="InsertHorizontalRule" tooltip="@INSERTHORIZONTALRULE" imagename="rule" />
+			<image jsml-base="image_{skin}_{color}" command="InsertPageBreak" tooltip="@INSERTPAGEPRINTBREAK" imagename="InsertPageBreak" />
+			<image jsml-base="image_{skin}_{color}" command="InsertTopLine" tooltip="@INSERTTOPLINE" imagename="topline" />
+			<image jsml-base="image_{skin}_{color}" command="InsertBottomLine" tooltip="@INSERTBOTTOMLINE" imagename="bottomline" />
+
+		</panel>
+
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<initialize>
+				self._element.setAttribute("noradius","1");
+			</initialize>
+
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setparagraph.xml" width="90" text="@Paragraphs" stylename="paragraph" />
+
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setstyles.xml" width="90" text="@Styles" />
+			
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontname.xml" width="80" text="@FontName" stylename="fontname" />
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontsize.xml" width="70" text="@FontSize" stylename="fontsize" />
+
+		</panel>
+
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertLink" tooltip="@INSERTLINK" imagename="link" />
+			<image jsml-base="image_{skin}_{color}" command="UnLink" tooltip="@REMOVE| |@LINK" imagename="unlink" />
+			<image jsml-base="image_{skin}_{color}" command="InsertAnchor" tooltip="@INSERTANCHOR" imagename="anchor" />
+			<image jsml-base="image_{skin}_{color}" command="InsertImageMap" tooltip="@INSERTIMAGEMAP" imagename="imagemap" />
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertDate" tooltip="@INSERTDATE" imagename="insertdate" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertchars" tooltip="@INSERTCHARS" imagename="specialchar" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="virtualkeyboard" tooltip="@VIRTUALKEYBOARD" imagename="keyboard" />
+
+		</panel>
+
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="InsertBox" tooltip="@INSERTBOX" imagename="box" />
+			<image jsml-base="image_{skin}_{color}" command="InsertLayer" tooltip="@INSERTLAYER" imagename="layer" />
+			<image jsml-base="image_{skin}_{color}" command="InsertFieldSet" tooltip="@INSERTFIELDSET" imagename="groupbox" />
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertTable"  tooltip="@INSERTTABLE">
+				<attach name="splitclick">
+					var editor=self.find_editor();
+					editor.ShowXmlFloatBox(editor.BuildDialogUrl("inserttable.xml"),{control:self,stopDispose:true});
+					//alert(editor.ShowXmlFloatBox);
+					//editor.ShowXmlFloatbox("inserttable.xml",{control:self,stopDispose:true});
+				</attach>
+			</panel>
+
+			<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@INSERTFORM" imagename="InsertForm" >
+				<attach name="click,splitclick">
+					insertformmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					insertformmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					insertformmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="insertformmenu" jsml-append="false">
+
+					<panel jsml-base="rtemenuitem" command="InsertForm" text="@INSERTFORM" />
+					<panel jsml-base="rtemenuitem" command="InsertTextarea" text="@INSERTTEXTAREA" imagename="textarea" />
+					<panel jsml-base="rtemenuitem" command="InsertInpText" text="@INSERTINPTEXT" imagename="textbox" />
+					<panel jsml-base="rtemenuitem" command="InsertInpPassword" text="@INSERTINPPASSWORD" imagename="passwordfield" />
+					<panel jsml-base="rtemenuitem" command="InsertInpHidden" text="@INSERTINPHIDDEN" imagename="hiddenfield" />
+					<panel jsml-base="rtemenuitem" command="InsertInpFile" text="@INSERTINPFILE" imagename="document"/>
+					<panel jsml-base="rtemenuitem" command="InsertInpImage" text="@INSERTINPIMAGE" imagename="image" />
+					<panel jsml-base="rtemenuitem" command="InsertInpReset" text="@INSERTINPRESET" imagename="reset" />
+					<panel jsml-base="rtemenuitem" command="InsertInpSubmit" text="@INSERTINPSUBMIT" imagename="submit" />
+					<panel jsml-base="rtemenuitem" command="InsertRadioBox" text="@INSERTRADIOBOX" imagename="optionbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertCheckbox" text="@INSERTCHECKBOX" imagename="checkbox" />
+					<panel jsml-base="rtemenuitem" command="InsertInpButton" text="@INSERTINPBUTTON" imagename="pushbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertButton" text="@INSERTBUTTON" imagename="pushbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertDropDown" text="@INSERTDROPDOWN" imagename="dropdownbox" />
+					<panel jsml-base="rtemenuitem" command="InsertListbox" text="@INSERTLISTBOX" imagename="listbox" />
+
+				</panel>
+			</panel>
+			<image jsml-base="image_{skin}_{color}" command="ToggleBorder" imagename="borders" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="pageproperties" tooltip="@PAGEPROPERTIES" imagename="properties" />
+			<image jsml-base="image_{skin}_{color}" command="Help"  tooltip="@HELP" />
+		</panel>
+
+	</jsml-def>
+
+
+
+</jsml>
+

LPWeb20/RichtextEditor/skins/officexp/toolbar_template.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+
+	<include src="{folder}skins/_shared/_toolbartemplate.xml?{timems}" />
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<method name="find_config">
+			<![CDATA[
+			for(var ctrl=self;ctrl!=null;ctrl=ctrl.get_jsml_parent())
+				if(ctrl._rteconfig)return ctrl._rteconfig;
+			]]>
+		</method>
+		<attach name="editor_ready" arguments="je,editor">
+			editor.ParseItemList(self,editor._config.toolbaritems||editor._config.toolbars[editor._config.toolbar]||"");
+		</attach>
+	</jsml-def>
+
+</jsml>
+
+
+

LPWeb20/RichtextEditor/skins/phone/_layout.xml

@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<panel jsml-class="_phone_layout_{skin}_{color}_toolbar" dock="fill" overflow="visible" jsml-append="false">
+
+		<jsml-ref name="rteborderstyle"/>
+
+		<initialize>
+			self.toggle_css_class("tbtoolbar_{skin}");
+			self.toggle_css_class("tbtoolbar_{color}");
+			self.toggle_css_class("tbtoolbar_{skin}_{color}");
+		</initialize>
+
+		<jsml-ref name="toolbar_{toolbar}_{skin}_{color}"/>
+
+	</panel>
+
+	<jsml-def name="_phone_layout_{skin}_{color}">
+
+		<initialize>
+			self.toggle_css_class("rteskin_{skin}");
+			self.toggle_css_class("rteskin_{color}");
+			self.toggle_css_class("rteskin_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("rteskin_{skin}_"+name,mode);
+			self.toggle_css_class("rteskin_{color}_"+name,mode);
+			self.toggle_css_class("rteskin_{skin}_{color}_"+name,mode);
+		</attach>
+
+		<panel dock="top"  overflow_y="visible" padding="1" border_width="0">
+			<attach name="editor_ready" arguments="je,editor">
+				<![CDATA[
+				editor.AttachEvent("FullScreenChanged",function()
+				{
+					if(self.toolbarloaded)return;
+					self.toolbarloaded=true;
+					var ctrl=jsml.class_create_instance("_phone_layout_{skin}_{color}_toolbar");
+					self.append_child(ctrl);
+					ctrl.invoke_recursive("editor_ready",editor);
+				});
+				]]>
+			</attach>
+		</panel>
+
+		<panel jsml-local="editpanel" dock="fill" border_width="1,0,0,0" border_color="#7E9DB9" back_color="white">
+
+			<!--max_width="640"-->
+			<htmlcontrol jsml-member="editor_frame_container" dock="fill" margin="6,0,0,0" back_color="white" >
+
+			</htmlcontrol>
+
+			<panel jsml-local="mobile_touch_panel" dock="fill"  margin="6,0,0,0">
+
+			</panel>
+
+			<attach name="editor_ready" arguments="je,editor">
+				<![CDATA[
+				editor.LoadPlugin("mobilesidebar",function(plugin)
+				{
+					if(!plugin||!plugin.LoadUI)return;
+					plugin.LoadUI(self,mobile_touch_panel);
+				});
+				]]>
+			</attach>
+			
+		</panel>
+
+
+		<panel dock="over" visible="false">
+			<panel dock="over"  back_color="black" opacity="11"></panel>
+      <panel dock="fill" vertical_align="middle" horizontal_align="center">
+        <panel overflow="visible" height="40" jsml-base="panelbutton" horizontal_align="center" vertical_align="middle" border_color="#CDCDCD" back_color="#f7f7f7" padding="4,10,4,10" >
+          <image dock="right" jsml-base="image_{skin}_{color}" imagename="m_arrow_right-up" back_color="#f7f7f7" border_width="0" background="none" />
+          <label dock="left" vertical_align="middle" margin="0,5,0,5" text="Click Here to Edit" font_size="24px"></label>
+        </panel>
+      </panel>
+			<attach name="editor_ready" arguments="je,editor">
+				<![CDATA[
+				self._editor=editor;
+				editor.AttachEvent("FullScreenChanged",function()
+				{
+					var hide = !editor.IsCommandActive("FullScreen");
+					if(hide)editor.ExecCommand("SelectNone");
+					self.set_visible(hide);
+				});
+				self.set_visible(!editor.IsCommandActive("FullScreen"));
+				editor.Focus = function(){};
+				]]>
+			</attach>
+			<attach name="click">
+				if(!self._editor)return;
+				self._editor.ExecUICommand(null,"FullScreen");
+				if(self.touchinited)return;
+				self.touchinited=true;
+				self._editor.FireEvent("TouchInit",[mobile_touch_panel._element]);
+			</attach>
+
+		</panel>
+
+	</jsml-def>
+
+</jsml>

LPWeb20/RichtextEditor/skins/phone/skin.css

@@ -0,0 +1,180 @@
+.menuitem_checked
+{
+	background-color:#eeddcc;
+}
+
+
+
+
+
+
+
+
+
+/*phone*/
+.tbgroup_phone
+{
+    border-width:0px;
+    background:transparent;
+}
+.dropdown_phone_lightsilver,.tbcontrol_phone_lightsilver,.splitbtn_phone_lightsilver
+{
+   /*
+	border:1px solid #bbbbbb;
+	background-color:white;
+	background-image:url(../../styles/images/tbgroup_silver2007.png);
+	background-repeat:repeat-x;
+	border-radius:3px;
+	*/
+}
+.splittxt_phone_lightsilver
+{
+    border:1px solid #bbbbbb;
+	background-color:white;
+    border-radius:3px;
+}
+.splittxt_phone_lightsilver .splitbtnimage
+{
+    border-right:1px solid #bbbbbb;
+	background-image:url(../../styles/images/tbgroup_silver2007.png);
+	background-repeat:repeat-x;
+}
+.dropdown_phone_hovered
+{
+    background:White;
+}
+.tbcontrol_phone_hovered,.splitbtn_phone_hovered
+{
+}
+.tbcontrol_phone_clicked,.splitbtn_phone_clicked
+{
+}
+
+/*light silver*/
+.rteskin_lightsilver
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#d9d9d9;
+	background-color:#efefef;
+}
+.tbtoolbar_lightsilver{}
+.ribbon_lightsilver
+{
+	background-image:url(../../styles/images/rbribbon_lightsilver.png);
+	background-position:left bottom;
+	background-repeat:no-repeat;
+}
+.ribbon_lightsilver:first-child
+{
+	background-image:none;
+}
+.ribbon_lightsilver .ribbonlabel
+{
+	color:#666d7c;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+.tbgroup_lightsilverxx
+{
+	border-left:1px solid #bbbbbb;
+	background-repeat:repeat-x;
+}
+.dropdown_lightsilver
+{
+	border:1px solid #d3d5dc;
+	background-color:white;
+}
+.dropdown_lightsilver .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_lightsilver .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_lightsilver, .splitbtn_lightsilver
+{
+    border:1px solid transparent;
+}
+.splitbtn_lightsilver
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.rbimage_lightsilver{}
+.dropdown_lightsilver_hovered
+{
+	border-color:#ABC1DE;
+	background-color:white;
+}
+.dropdown_lightsilver_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_lightsilver_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_lightsilver_hovered,.splitbtn_lightsilver_hovered
+{
+    border-color:Gray;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_lightsilver_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+.dropdown_lightsilver_clicked
+{
+	border-color:#ABC1DE;
+	background-color:gold;
+}
+.dropdown_lightsilver_clicked .dropdownsplit
+{
+	border-color:#ABC1DE;
+}
+.tbcontrol_lightsilver_clicked,.splitbtn_lightsilver_clicked
+{
+    border-color:Gray;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_lightsilver_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+
+/*checked*/
+.tbcontrol_lightsilver_checked,.splitbtn_lightsilver_checked
+{
+    border-color:Gray;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_lightblue_checked,.splitbtn_lightblue_checked
+{
+    border-color:Gray;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+
+.tbcontrol_phone_lightsilver_checked,.splitbtn_phone_lightsilver_checked
+{
+	background:gold;
+}
+.splittxt_phone_lightsilver_checked .splitbtnimage
+{
+	background:gold;
+}

LPWeb20/RichtextEditor/skins/phone/skin.xml

@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<panel jsml-class="ribbon_{skin}_{color}" dock="left" overflow_x="visible" margin="2" padding="3,3,0,4"  height="104" width="32" >
+		<label dock="bottom" jsml-local="label" css_class="ribbonlabel" height="15" margin="0,-5,0,-4" text="ribbon" font_size="11px" width="20" vertical_align="bottom" horizontal_align="center">
+			<jsml-ref name="rteborderstyle"/>
+		</label>
+
+		<attach name="set_text">
+			label.set_text(self.get_text());
+		</attach>
+
+		<jsml-ref name="rteborderstyle"/>
+
+		<initialize>
+			self.toggle_css_class("ribbon_{skin}");
+			self.toggle_css_class("ribbon_{color}");
+			self.toggle_css_class("ribbon_{skin}_{color}");
+		</initialize>
+
+	</panel>
+
+	<image jsml-class="ribbonimage_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+		<initialize>
+			self.toggle_css_class("rbimage_{skin}");
+			self.toggle_css_class("rbimage_{color}");
+			self.toggle_css_class("rbimage_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("rbimage_{skin}_"+name,mode);
+			self.toggle_css_class("rbimage_{color}_"+name,mode);
+			self.toggle_css_class("rbimage_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+
+
+	<panel jsml-class="tbgroup_{skin}_{color}" dock="flow" overflow_x="visible" margin="2,3,2,2" height="32" width="20" >
+		<initialize>
+			self.toggle_css_class("tbgroup_{skin}");
+			self.toggle_css_class("tbgroup_{color}");
+			self.toggle_css_class("tbgroup_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbgroup_{skin}_"+name,mode);
+			self.toggle_css_class("tbgroup_{color}_"+name,mode);
+			self.toggle_css_class("tbgroup_{skin}_{color}_"+name,mode);
+		</attach>
+		<jsml-ref name="rteborderstyle"/>
+		<attach name="attach_dom">
+			if(self.get_border_width()[1])self.set_padding([0,0,0,0])
+		</attach>
+	</panel>
+
+	<panel jsml-class="linebreak_{skin}_{color}" dock="flow" flow_clear="newline" width='0'></panel>
+
+	<image jsml-class="image_{skin}_{color}" jsml-base="image_skin_base" margin="0,2,0,0" width="32" height="32" padding="1" dock="left">
+		<initialize>
+			self.toggle_css_class("tbcontrol_{skin}");
+			self.toggle_css_class("tbcontrol_{color}");
+			self.toggle_css_class("tbcontrol_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbcontrol_{skin}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{color}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+	
+	<panel jsml-class="splitbtn_{skin}_{color}" jsml-base="splitbtn_skin_base" margin="0,2,0,0" width="32" dock="left">
+		<initialize>
+			self.toggle_css_class("splitbtn_{skin}");
+			self.toggle_css_class("splitbtn_{color}");
+			self.toggle_css_class("splitbtn_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("splitbtn_{skin}_"+name,mode);
+			self.toggle_css_class("splitbtn_{color}_"+name,mode);
+			self.toggle_css_class("splitbtn_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<panel jsml-class="dropdown_{skin}_{color}" jsml-base="dropdown_skin_base" margin="0,2,0,0">
+		<initialize>
+			self.toggle_css_class("dropdown_{skin}");
+			self.toggle_css_class("dropdown_{color}");
+			self.toggle_css_class("dropdown_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("dropdown_{skin}_"+name,mode);
+			self.toggle_css_class("dropdown_{color}_"+name,mode);
+			self.toggle_css_class("dropdown_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+	
+	<panel jsml-class="phone_{skin}_{color}" dock="top" cursor="pointer" width="130" height="32" margin="5,0,5,0" overflow="visible">
+		<image jsml-member="image" css_class="splitbtnimage" dock="left" width="32" overflow="none"/>
+		<label jsml-local="label" dock="fill" vertical_align="middle" horizontal_align="center" cursor="pointer" overflow="visible" font_size="18px" padding="0,3,0,3"></label>
+
+		<jsml-ref name="rtebuttoncontrol" />
+		<jsml-ref name="rtetoolbarcontrol"/>
+
+		<initialize>
+			self.toggle_css_class("splittxt_{skin}");
+			self.toggle_css_class("splittxt_{color}");
+			self.toggle_css_class("splittxt_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("splittxt_{skin}_"+name,mode);
+			self.toggle_css_class("splittxt_{color}_"+name,mode);
+			self.toggle_css_class("splittxt_{skin}_{color}_"+name,mode);
+		</attach>
+		<attach name="set_text">
+			label.set_text(self.get_text());
+		</attach>
+	</panel>
+
+	<include src="{folder}skins/{skin}/toolbar_phone.xml?{timems}" />
+
+	<jsml-def name="layout_toolbar_{skin}_{color}">
+		<jsml-ref name="toolbar_{toolbar}_{skin}_{color}"/>
+	</jsml-def>
+	
+	<include src="{folder}skins/{skin}/_layout.xml?{timems}" />
+
+
+	<panel jsml-class="rteskin_{skin}_{color}" width="200" height="200">
+
+		<jsml-ref name="rteborderstyle"/>
+		
+		<jsml-ref name="_phone_layout_{skin}_{color}"/>
+		
+	</panel>
+
+</jsml>

LPWeb20/RichtextEditor/skins/phone/toolbar_phone.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<attach name="editor_ready" arguments="je,editor">
+				<![CDATA[
+				self._editor=editor;
+				editor.AttachEvent("FullScreenChanged",function()
+				{
+					self.set_visible(editor.IsCommandActive("FullScreen"));
+				});
+				]]>
+			</attach>
+			<panel width="56" dock="left" cursor="pointer" padding="0" margin="0,5,0,5">
+				<image jsml-local="backbutton" jsml-base="image_{skin}_{color}" background="url()" border_width="0" width="56" height="32" padding="0" margin="0" dock="left" tooltip="@Back" imagename="m_back" />
+				<label dock="over" text_align="right" cursor="pointer" vertical_align="middle" padding="0,4,0,0" text="Back" font_size="13px" css_text="font-weight:bold;color:#666666" />
+				<attach name="click">
+					backbutton.find_editor().ExecUICommand(null,"FullScreen");
+				</attach>
+			</panel>
+
+			<!--
+			  <image jsml-base="image_{skin}_{color}" imagename="m_back" zoom="both">
+				<attach name="click">
+				  self.find_editor().ExecUICommand(null,"FullScreen");
+				</attach>
+			  </image>
+			  -->
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="spellcheck" imagename="m_spell" zoom="both" />
+			<image jsml-base="image_{skin}_{color}" command="Find" imagename="m_find" zoom="both" />
+			<image jsml-base="image_{skin}_{color}" command="New" imagename="m_new"  zoom="both" />
+			<image jsml-base="image_{skin}_{color}" command="Undo" imagename="m_undo"/>
+			<image jsml-base="image_{skin}_{color}" command="Redo" imagename="m_redo"/>
+			<image jsml-base="image_{skin}_{color}" command="InvokeEvent" arguments="UICommand,UploadImage" imagename="m_upload" zoom="both" />
+		</panel>
+
+	</jsml-def>
+
+
+</jsml>
+

LPWeb20/RichtextEditor/skins/smart/skin.css

@@ -0,0 +1,451 @@
+
+
+/* blue*/
+.rteskin_blue
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#9abcd5;
+	background-color:#dbe5ef;
+}
+.tbtoolbar_blue{}
+.ribbon_blue
+{
+	background-image:url(../../styles/images/rbribbon_blue.png);
+	background-position:left center;
+	background-repeat:no-repeat;
+}
+.ribbon_blue:first-child
+{
+	background-image:none;
+}
+.ribbon_blue .ribbonlabel
+{
+	color:#1e395b;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+
+.tbgroup_blue
+{
+	border-left:1px solid #D6DAE3;
+	background-repeat:repeat-x;
+}
+.dropdown_blue
+{
+	border:1px solid #d3d5dc;
+	background-color:#EFF5FC;
+}
+.dropdown_blue .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_blue .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_blue, .splitbtn_blue
+{
+    border:1px solid transparent;
+}
+.splitbtn_blue
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.rbimage_blue{}
+.dropdown_blue_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_blue_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_blue_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+
+.tbcontrol_blue_hovered,.splitbtn_blue_hovered
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_blue_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+
+.dropdown_blue_clicked
+{
+	border-color:#abc1de;
+	background-color:gold;
+}
+.dropdown_blue_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_blue_clicked,.splitbtn_blue_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_blue_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_blue .rtelayouttop
+{
+	border-bottom-color:#9ABCD5!important;
+}
+.rteskin_blue .rtelayoutbottom
+{
+	border-top-color:#9ABCD5!important;
+}
+
+
+/*silver*/
+.rteskin_silver
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#d9d9d9;
+	background-color:#efefef;
+}
+.tbtoolbar_silver{}
+.ribbon_silver
+{
+	background-image:url(../../styles/images/rbribbon_silver.png);
+	background-position:left bottom;
+	background-repeat:no-repeat;
+}
+.ribbon_silver:first-child
+{
+	background-image:none;
+}
+.ribbon_silver .ribbonlabel
+{
+	color:#666d7c;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+.tbgroup_silver
+{
+	border-left:1px solid #bbbbbb;
+	background-repeat:repeat-x;
+}
+.dropdown_silver
+{
+	border:1px solid #d3d5dc;
+	background-color:white;
+}
+.dropdown_silver .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_silver .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_silver, .splitbtn_silver
+{
+    border:1px solid transparent;
+}
+.splitbtn_silver
+{
+    border:1px solid transparent;
+	background-color:transparent;
+}
+.rbimage_silver{}
+.dropdown_silver_hovered
+{
+	border-color:#abc1de;
+	background-color:white;
+}
+.dropdown_silver_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_silver_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_silver_hovered,.splitbtn_silver_hovered
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_silver_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+.dropdown_silver_clicked
+{
+	border-color:#abc1de;
+	background-color:gold;
+}
+.dropdown_silver_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_silver_clicked,.splitbtn_silver_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_silver_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_silver .rtelayouttop
+{
+	border-bottom-color:#d9d9d9!important;
+}
+.rteskin_silver .rtelayoutbottom
+{
+	border-top-color:#d9d9d9!important;
+}
+
+/*gray*/
+.rteskin_gray
+{
+	border-width:1px;
+	border-style:solid;
+	border-color:#cccccc;
+	background-color:#e3e3e3;
+}
+.tbtoolbar_gray{}
+.ribbon_gray
+{
+	background-image:url(../../styles/images/rbribbon_silver.png);
+	background-position:left bottom;
+	background-repeat:no-repeat;
+}
+.ribbon_gray:first-child
+{
+	background-image:none;
+}
+.ribbon_gray .ribbonlabel
+{
+	color:black;
+	background-color:transparent;
+	font-family:Tahoma!important;
+	font-size:11px!important;
+}
+.tbgroup_gray
+{
+	border-right:1px solid #cccccc;
+	background-repeat:repeat-x;
+}
+.dropdown_gray
+{
+	border:1px solid #cccccc;
+	background-color:#e3e3e3;
+}
+.dropdown_gray .dropdownsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.slitbtn_gray .splitbtnsplit
+{
+	border-left-style:solid;
+	border-left-width:1px;
+}
+.tbcontrol_gray, .splitbtn_gray
+{
+    border:1px solid transparent;
+}
+.splitbtn_gray
+{
+    border:1px solid #cccccc;
+	background-color:transparent;
+}
+.rbimage_gray{}
+.dropdown_gray_hovered
+{
+	border-color:#cccccc;
+	background-color:#e3e3e3;
+}
+.dropdown_gray_hovered .dropdownsplit
+{
+	border-color:#cccccc;
+	background-color:#eeeeee;
+}
+.splitbtn_gray_hovered .splitbtnsplit
+{
+	border-color:#D6D9E2;
+}
+.tbcontrol_gray_hovered,.splitbtn_gray_hovered
+{
+    border-color:#c28f36;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+	background-repeat:repeat-x;
+}
+.rbimage_gray_hovered
+{
+	background-image:url(../../styles/images/rbimage_hovered.png);
+}
+.dropdown_gray_clicked
+{
+	border-color:#abc1de;
+	background-color:gold;
+}
+.dropdown_gray_clicked .dropdownsplit
+{
+	border-color:#abc1de;
+}
+.tbcontrol_gray_clicked,.splitbtn_gray_clicked
+{
+    border-color:#808080;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.rbimage_gray_clicked
+{
+	background-image:url(../../styles/images/rbimage_clicked.png);
+}
+.rteskin_gray .rtelayouttop
+{
+	border-bottom-color:#cccccc!important;
+}
+.rteskin_gray .rtelayoutbottom
+{
+	border-top-color:#cccccc!important;
+}
+
+/*smart*/
+.tbgroup_smart
+{
+    border-width:0px
+}
+.dropdown_smart_silver,.tbcontrol_smart_silver,.splitbtn_smart_silver
+{
+    border:1px solid #bbbbbb;
+	background-color:white;
+	background-image:url(../../styles/images/tbgroup_silver2007.png);
+	background-repeat:repeat-x;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.dropdown_smart_blue,.tbcontrol_smart_blue,.splitbtn_smart_blue
+{
+    border:1px solid #A6B6C5;
+	background-color:white;
+	background-image:url(../../styles/images/tbgroup_blue2010.png);
+	background-repeat:repeat-x;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.dropdown_smart_silver,.tbcontrol_smart_silver,.splitbtn_smart_silver
+{
+    border:1px solid #bbbbbb;
+	background-color:white;
+	background-image:url(../../styles/images/tbgroup_silver2007.png);
+	background-repeat:repeat-x;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.rbimage_smart_silver
+{
+    border:1px solid #bbbbbb;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.dropdown_smart_blue,.tbcontrol_smart_blue,.splitbtn_smart_blue
+{
+    border:1px solid #A6B6C5;
+	background-color:white;
+	background-image:url(../../styles/images/tbgroup_blue2010.png);
+	background-repeat:repeat-x;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.rbimage_smart_blue
+{
+    border:1px solid #A6B6C5;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.dropdown_smart_gray,.tbcontrol_smart_gray,.splitbtn_smart_gray
+{
+    border:1px solid #cccccc;
+	background-color:#e3e3e3;
+	background-image:url(../../styles/images/tbgroup_silver2007.png);
+	background-repeat:repeat-x;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.rbimage_smart_gray
+{
+    border:1px solid #cccccc;
+	-o-border-radius:3px;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+.dropdown_smart_hovered
+{
+    background:White;
+}
+.tbcontrol_smart_hovered,.splitbtn_smart_hovered
+{
+	background-image:url(../../styles/images/tbcontrol_hovered.png);
+}
+.tbcontrol_smart_clicked,.splitbtn_smart_clicked
+{
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+}
+
+/*checked*/
+.tbcontrol_silver_checked,.splitbtn_silver_checked
+{
+    border-color:#808080;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_blue_checked,.splitbtn_blue_checked
+{
+    border-color:#808080;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+.tbcontrol_gray_checked,.splitbtn_gray_checked
+{
+    border-color:#808080;
+    border-width:1px;
+	background-color:transparent;
+	background-image:url(../../styles/images/tbcontrol_clicked.png);
+	background-repeat:repeat-x;
+}
+

LPWeb20/RichtextEditor/skins/smart/skin.xml

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<panel jsml-class="ribbon_{skin}_{color}" dock="left" overflow_x="visible" margin="0" padding="2,-3,0,3"  height="96" width="32" >
+		<label dock="bottom" jsml-local="label" css_class="ribbonlabel" height="15" margin="0,-5,0,-4" text="ribbon" font_size="11px" width="20" vertical_align="bottom" horizontal_align="center">
+			<jsml-ref name="rteborderstyle"/>
+		</label>
+
+		<attach name="set_text">
+			label.set_text(self.get_text());
+		</attach>
+
+		<jsml-ref name="rteborderstyle"/>
+
+		<initialize>
+			self.toggle_css_class("ribbon_{skin}");
+			self.toggle_css_class("ribbon_{color}");
+			self.toggle_css_class("ribbon_{skin}_{color}");
+		</initialize>
+
+	</panel>
+
+	<image jsml-class="ribbonimage_{skin}_{color}" jsml-base="image_skin_base" dock="left">
+		<initialize>
+			self.toggle_css_class("rbimage_{skin}");
+			self.toggle_css_class("rbimage_{color}");
+			self.toggle_css_class("rbimage_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("rbimage_{skin}_"+name,mode);
+			self.toggle_css_class("rbimage_{color}_"+name,mode);
+			self.toggle_css_class("rbimage_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+
+
+	<panel jsml-class="tbgroup_{skin}_{color}" dock="flow" overflow_x="visible" margin="2,3,2,2" height="22" width="20" >
+		<initialize>
+			self.toggle_css_class("tbgroup_{skin}");
+			self.toggle_css_class("tbgroup_{color}");
+			self.toggle_css_class("tbgroup_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbgroup_{skin}_"+name,mode);
+			self.toggle_css_class("tbgroup_{color}_"+name,mode);
+			self.toggle_css_class("tbgroup_{skin}_{color}_"+name,mode);
+		</attach>
+		<jsml-ref name="rteborderstyle"/>
+		<attach name="attach_dom">
+			if(self.get_border_width()[1])self.set_padding([0,0,0,0])
+		</attach>
+	</panel>
+
+	<panel jsml-class="linebreak_{skin}_{color}" dock="flow" flow_clear="newline" width='0'></panel>
+
+	<image jsml-class="image_{skin}_{color}" jsml-base="image_skin_base" margin="0,2,0,0" width="24" padding="0,1,0,1" dock="left">
+		<initialize>
+			self.toggle_css_class("tbcontrol_{skin}");
+			self.toggle_css_class("tbcontrol_{color}");
+			self.toggle_css_class("tbcontrol_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("tbcontrol_{skin}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{color}_"+name,mode);
+			self.toggle_css_class("tbcontrol_{skin}_{color}_"+name,mode);
+		</attach>
+	</image>
+
+	<panel jsml-class="splitbtn_{skin}_{color}" jsml-base="splitbtn_skin_base" margin="0,2,0,0" width="32" dock="left">
+		<initialize>
+			self.toggle_css_class("splitbtn_{skin}");
+			self.toggle_css_class("splitbtn_{color}");
+			self.toggle_css_class("splitbtn_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("splitbtn_{skin}_"+name,mode);
+			self.toggle_css_class("splitbtn_{color}_"+name,mode);
+			self.toggle_css_class("splitbtn_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<panel jsml-class="dropdown_{skin}_{color}" jsml-base="dropdown_skin_base" margin="0,2,0,0">
+		<initialize>
+			self.toggle_css_class("dropdown_{skin}");
+			self.toggle_css_class("dropdown_{color}");
+			self.toggle_css_class("dropdown_{skin}_{color}");
+		</initialize>
+		<attach name="tooglecssclass" arguments="jevent,name,mode">
+			self.toggle_css_class("dropdown_{skin}_"+name,mode);
+			self.toggle_css_class("dropdown_{color}_"+name,mode);
+			self.toggle_css_class("dropdown_{skin}_{color}_"+name,mode);
+		</attach>
+	</panel>
+
+	<include src="{folder}skins/{skin}/toolbar_{toolbar}.xml?{timems}" />
+
+	<include src="{folder}skins/_shared/_layout.xml?{timems}" />
+
+	<panel jsml-class="rteskin_{skin}_{color}" width="200" height="200">
+		<jsml-ref name="rteborderstyle"/>
+		<jsml-ref name="_shared_layout_{skin}_{color}"/>
+	</panel>
+
+</jsml>

LPWeb20/RichtextEditor/skins/smart/toolbar_custom.xml

@@ -0,0 +1,274 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="Save" tooltip="@SAVE"/>
+			<image jsml-base="image_{skin}_{color}" command="New" tooltip="@NEW" imagename="newdoc" />
+			<image jsml-base="image_{skin}_{color}" command="Print" tooltip="@PRINT" />
+			<image jsml-base="image_{skin}_{color}" command="Find" tooltip="@FINDANDREPLACE" />
+			<image jsml-base="image_{skin}_{color}" command="CleanCode" tooltip="@CLEANCODE" imagename="cleanup" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="spellcheck" tooltip="@SPELLCHECK" imagename="spell" />
+
+			<image jsml-base="image_{skin}_{color}" command="FullScreen" tooltip="@FULLSCREEN" imagename="fit" />
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="SelectAll" tooltip="@SELECTALL" />
+			<image jsml-base="image_{skin}_{color}" command="SelectNone" tooltip="@SELECTNONE" />
+			<image jsml-base="image_{skin}_{color}" command="Delete" tooltip="@DELETE" />
+
+			<image jsml-base="image_{skin}_{color}" command="Cut" tooltip="@CUT">
+				<attach name="mousehover">
+					self._ResetFCButton();
+				</attach>
+			</image>
+			<image jsml-base="image_{skin}_{color}" command="Copy" tooltip="@COPY">
+				<attach name="mousehover">
+					self._ResetFCButton();
+				</attach>
+			</image>
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="Paste" tooltip="@PASTE" />
+			<image jsml-base="image_{skin}_{color}" command="PasteText" tooltip="@PASTETEXT" />
+			<image jsml-base="image_{skin}_{color}" command="PasteWord" tooltip="@PASTEWORD" />
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="Undo" tooltip="@UNDO" />
+			<image jsml-base="image_{skin}_{color}" command="Redo" tooltip="@REDO" />
+
+		</panel>
+
+		<!--
+		<panel jsml-base="linebreak_{skin}" />
+		-->
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="InsertGallery" tooltip="@INSERTGALLERY" imagename="gallery" />
+			<image jsml-base="image_{skin}_{color}" command="InsertImage" tooltip="@INSERTIMAGE" imagename="image" />
+			<image jsml-base="image_{skin}_{color}" command="InsertVideo" tooltip="@INSERTVIDEO" imagename="media" />
+			<image jsml-base="image_{skin}_{color}" command="InsertDocument" tooltip="@INSERTDOCUMENT" imagename="document" />
+			<image jsml-base="image_{skin}_{color}" command="InsertTemplate" tooltip="@INSERTTEMPLATE" imagename="template" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="syntaxhighlighter" tooltip="@SYNTAXHIGHLIGHTER" imagename="code" />
+
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertyoutube" tooltip="@INSERTYOUTUBE" imagename="youtube"/>
+			<image jsml-base="image_{skin}_{color}" imagename="html5" tooltip="@INSERTHTML5">
+				<attach name="click">
+					inserthtml5menu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					inserthtml5menu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					inserthtml5menu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="inserthtml5menu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="InsertWbr" text="@INSERT| &lt;wbr&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="Mark" text="@INSERT| &lt;mark&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertDetails" text="@INSERT| &lt;details&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertSection" text="@INSERT| &lt;section&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertArticle" text="@INSERT| &lt;article&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertHeader" text="@INSERT| &lt;header&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertFooter" text="@INSERT| &lt;footer&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertHGroup" text="@INSERT| &lt;hgroup&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertAside" text="@INSERT| &lt;aside&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertAudio" text="@INSERT| &lt;audio&gt;" imagename="newtag" />
+					<panel jsml-base="rtemenuitem" command="InsertVideo" text="@INSERT| &lt;video&gt;" imagename="newtag" />
+				</panel>
+			</image>
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="googlemap" tooltip="@GOOGLEMAP" imagename="map"/>
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontname.xml" width="80" text="@FontName" stylename="fontname" />
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setfontsize.xml" width="70" text="@FontSize" stylename="fontsize" />
+
+			<image jsml-base="image_{skin}_{color}" command="Bold" tooltip="@BOLD" />
+			<image jsml-base="image_{skin}_{color}" command="Italic" tooltip="@ITALIC" />
+			<image jsml-base="image_{skin}_{color}" command="Underline" tooltip="@UNDERLINE" imagename="under" />
+			<image jsml-base="image_{skin}_{color}" command="Linethrough" tooltip="@LINETHROUGH" imagename="strike" />
+			<image jsml-base="image_{skin}_{color}" command="Overline" tooltip="@OVERLINE" />
+
+			<image jsml-base="image_{skin}_{color}" command="Superscript" tooltip="@SUPERSCRIPT" />
+			<image jsml-base="image_{skin}_{color}" command="Subscript" tooltip="@SUBSCRIPT" />
+			<image jsml-base="image_{skin}_{color}" command="Ucase" tooltip="@UPPERCASE" />
+			<image jsml-base="image_{skin}_{color}" command="Lcase" tooltip="@LOWERCASE" />
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="ForeColor" tooltip="@TEXTCOLOR">
+				<jsml-ref name="rtecommandcolor"/>
+			</panel>
+			<panel jsml-base="splitbtn_{skin}_{color}" command="BackColor" tooltip="@BACKCOLOR">
+				<jsml-ref name="rtecommandcolor"/>
+			</panel>
+
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<image jsml-base="image_{skin}_{color}" command="RemoveFormat" tooltip="@REMOVEFORMAT" imagename="unformat" />
+			<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@FORMATPAINTER" imagename="formatpainter">
+				<attach name="click" arguments="je,e">
+					<![CDATA[
+						if(e.ctrlKey||e.altKey)
+							return self._rteinstance.ExecCommand("formatpainterfetch")
+						if(self._rteinstance.CanExecCommand("formatpainterapply"))
+							self._rteinstance.ExecCommand("formatpainterapply")
+						else
+							self.invoke_event("splitclick");
+						]]>
+				</attach>
+				<attach name="splitclick">
+					formatpaintermenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					formatpaintermenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					formatpaintermenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="formatpaintermenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="formatpainterfetch" imagename="copy" text="@FORMATPAINTERFETCH"  />
+					<panel jsml-base="rtemenuitem" command="formatpainterapply" imagename="formatpainter" text="@FORMATPAINTERAPPLY"  />
+					<panel jsml-base="rtemenuitem" command="formatpainterclear" imagename="newdoc" text="@FORMATPAINTERCLEAR"  />
+				</panel>
+			</panel>
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setparagraph.xml" width="90" text="@Paragraphs" stylename="paragraph" />
+			<panel jsml-base="dropdown_{skin}_{color}" command="ShowXmlFloatbox" arguments="setstyles.xml" width="90" text="@Styles" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyLeft" tooltip="@JUSTIFYLEFT" imagename="left" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyCenter" tooltip="@JUSTIFYCENTER" imagename="center" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyRight" tooltip="@JUSTIFYRIGHT" imagename="right" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyFull" tooltip="@JUSTIFYFULL" />
+			<image jsml-base="image_{skin}_{color}" command="JustifyNone" tooltip="@JUSTIFYNONE" noactive="true" />
+
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertOrderedList" tooltip="@ORDEREDLIST" imagename="numlist" >
+				<attach name="splitclick">
+					listolmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					listolmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					listolmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="listolmenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem"  command="InsertOrderedList" arguments="decimal" noactive="1" text="1,2,3,4,5"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-latin" noactive="1" text="a,b,c,d,e"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="lower-roman" noactive="1" text="ⅰ,ⅱ,ⅲ,ⅳ,ⅴ"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-latin" noactive="1" text="A,B,C,D,E"  />
+					<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="upper-roman" noactive="1" text="Ⅰ,Ⅱ,ⅢⅢ,Ⅳ,Ⅴ"  />
+					<!--<panel jsml-base="rtemenuitem" command="InsertOrderedList" arguments="cjk-ideographic" text="一,二,三,四,五"  />-->
+					<!-- NOTE:check the css list-style-type -->
+				</panel>
+			</panel>
+
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertUnorderedList" tooltip="@UNORDEREDLIST" imagename="bullist">
+				<attach name="splitclick">
+					listulmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					listulmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					listulmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="listulmenu" jsml-append="false">
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="disc" noactive="1" imagename="ul-disc" text="@UL_DISC"  />
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="circle" noactive="1" imagename="ul-circle" text="@UL_CIRCLE"  />
+					<panel jsml-base="rtemenuitem" command="InsertUnorderedList" arguments="square" noactive="1" imagename="ul-square" text="@UL_SQUARE"  />
+				</panel>
+			</panel>
+
+			<image jsml-base="image_{skin}_{color}" command="Outdent" tooltip="@OUTDENT" />
+			<image jsml-base="image_{skin}_{color}" command="Indent" tooltip="@INDENT" />
+		</panel>
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="InsertBlockQuote" tooltip="@INSERTBLOCKQUOTE" imagename="blockquote" />
+			<image jsml-base="image_{skin}_{color}" command="InsertBreak" tooltip="@INSERTBREAKRULE" imagename="break" />
+			<image jsml-base="image_{skin}_{color}" command="InsertWbr" tooltip="@INSERTWBR" imagename="wbr" />
+			<image jsml-base="image_{skin}_{color}" command="InsertDiv" tooltip="@INSERTDIV" imagename="div" />
+			<image jsml-base="image_{skin}_{color}" command="InsertParagraph" tooltip="@INSERTPARAGRAPH" imagename="p" />
+			<image jsml-base="image_{skin}_{color}" command="InsertHorizontalRule" tooltip="@INSERTHORIZONTALRULE" imagename="rule" />
+			<image jsml-base="image_{skin}_{color}" command="InsertPageBreak" tooltip="@INSERTPAGEPRINTBREAK" imagename="InsertPageBreak" />
+			<image jsml-base="image_{skin}_{color}" command="InsertTopLine" tooltip="@INSERTTOPLINE" imagename="topline" />
+			<image jsml-base="image_{skin}_{color}" command="InsertBottomLine" tooltip="@INSERTBOTTOMLINE" imagename="bottomline" />
+
+		</panel>
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertLink" tooltip="@INSERTLINK" imagename="link" />
+			<image jsml-base="image_{skin}_{color}" command="UnLink" tooltip="@REMOVE| |@LINK" imagename="unlink" />
+			<image jsml-base="image_{skin}_{color}" command="InsertAnchor" tooltip="@INSERTANCHOR" imagename="anchor" />
+			<image jsml-base="image_{skin}_{color}" command="InsertImageMap" tooltip="@INSERTIMAGEMAP" imagename="imagemap" />
+
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertDate" tooltip="@INSERTDATE" imagename="insertdate" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="insertchars" tooltip="@INSERTCHARS" imagename="specialchar" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="virtualkeyboard" tooltip="@VIRTUALKEYBOARD" imagename="keyboard" />
+
+		</panel>
+
+
+		<panel jsml-base="tbgroup_{skin}_{color}">
+
+			<image jsml-base="image_{skin}_{color}" command="InsertBox" tooltip="@INSERTBOX" imagename="box" />
+			<image jsml-base="image_{skin}_{color}" command="InsertLayer" tooltip="@INSERTLAYER" imagename="layer" />
+			<image jsml-base="image_{skin}_{color}" command="InsertFieldSet" tooltip="@INSERTFIELDSET" imagename="groupbox" />
+			<panel jsml-base="splitbtn_{skin}_{color}" command="InsertTable"  tooltip="@INSERTTABLE">
+				<attach name="splitclick">
+					var editor=self.find_editor();
+					editor.ShowXmlFloatBox(editor.BuildDialogUrl("inserttable.xml"),{control:self,stopDispose:true});
+					//alert(editor.ShowXmlFloatBox);
+					//editor.ShowXmlFloatbox("inserttable.xml",{control:self,stopDispose:true});
+				</attach>
+			</panel>
+
+			<panel jsml-base="splitbtn_{skin}_{color}" tooltip="@INSERTFORM" imagename="InsertForm" >
+				<attach name="click,splitclick">
+					insertformmenu.show({control:self,stopDispose:true});
+				</attach>
+				<attach name="editor_ready" arguments="jevent,editor">
+					insertformmenu.invoke_recursive("editor_ready",editor);
+				</attach>
+				<attach name="disposing">
+					insertformmenu.dispose();
+				</attach>
+				<panel jsml-base="floatmenu" jsml-local="insertformmenu" jsml-append="false">
+
+					<panel jsml-base="rtemenuitem" command="InsertForm" text="@INSERTFORM" />
+					<panel jsml-base="rtemenuitem" command="InsertTextarea" text="@INSERTTEXTAREA" imagename="textarea" />
+					<panel jsml-base="rtemenuitem" command="InsertInpText" text="@INSERTINPTEXT" imagename="textbox" />
+					<panel jsml-base="rtemenuitem" command="InsertInpPassword" text="@INSERTINPPASSWORD" imagename="passwordfield" />
+					<panel jsml-base="rtemenuitem" command="InsertInpHidden" text="@INSERTINPHIDDEN" imagename="hiddenfield" />
+					<panel jsml-base="rtemenuitem" command="InsertInpFile" text="@INSERTINPFILE" imagename="document"/>
+					<panel jsml-base="rtemenuitem" command="InsertInpImage" text="@INSERTINPIMAGE" imagename="image" />
+					<panel jsml-base="rtemenuitem" command="InsertInpReset" text="@INSERTINPRESET" imagename="reset" />
+					<panel jsml-base="rtemenuitem" command="InsertInpSubmit" text="@INSERTINPSUBMIT" imagename="submit" />
+					<panel jsml-base="rtemenuitem" command="InsertRadioBox" text="@INSERTRADIOBOX" imagename="optionbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertCheckbox" text="@INSERTCHECKBOX" imagename="checkbox" />
+					<panel jsml-base="rtemenuitem" command="InsertInpButton" text="@INSERTINPBUTTON" imagename="pushbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertButton" text="@INSERTBUTTON" imagename="pushbutton" />
+					<panel jsml-base="rtemenuitem" command="InsertDropDown" text="@INSERTDROPDOWN" imagename="dropdownbox" />
+					<panel jsml-base="rtemenuitem" command="InsertListbox" text="@INSERTLISTBOX" imagename="listbox" />
+
+				</panel>
+			</panel>
+			<image jsml-base="image_{skin}_{color}" command="ToggleBorder" imagename="borders" />
+			<image jsml-base="image_{skin}_{color}" command="ExecPlugin" arguments="pageproperties" tooltip="@PAGEPROPERTIES" imagename="properties" />
+			<image jsml-base="image_{skin}_{color}" command="Help"  tooltip="@HELP" />
+		</panel>
+	</jsml-def>
+
+
+
+</jsml>
+

LPWeb20/RichtextEditor/skins/smart/toolbar_template.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<jsml xmlns="http://cutesoft.net/jsml"
+xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../core/jsml.xsd">
+
+
+	<include src="{folder}skins/_shared/_toolbartemplate.xml?{timems}" />
+
+	<jsml-def name="toolbar_{toolbar}_{skin}_{color}">
+		<method name="find_config">
+			<![CDATA[
+			for(var ctrl=self;ctrl!=null;ctrl=ctrl.get_jsml_parent())
+				if(ctrl._rteconfig)return ctrl._rteconfig;
+			]]>
+		</method>
+		<attach name="editor_ready" arguments="je,editor">
+			editor.ParseItemList(self,editor._config.toolbaritems||editor._config.toolbars[editor._config.toolbar]||"");
+		</attach>
+	</jsml-def>
+
+</jsml>
+
+
+