rte.lzx

<canvas width="100%" height="500">
  <include href="extensions/rte.lzx"/>
  
  <!-- Displays the rte editor in a window -->
  <class name="rte_editor" extends="window" resizable="true" closeable="true">
    <simplelayout/>
    <event name="ontext"/>
    <attribute name="text" type="html"/>
    <rte name="myrte" width="${classroot.content.width-this.x}" height="${classroot.content.height-this.y-5}">
      <handler name="oneditorready">
        this.setText(parent.text);
      </handler>
      <handler name="ontext" args="txt">
        // Keep the text up to date
        parent.setAttribute('text', txt);
      </handler>
    </rte>
    
    <handler name="ontext" args="txt">
      //Debug.write("ontext:", txt);
    </handler>
    
    <method name="close" args="...ignore"> 
      myrte.destroy(); 
      super.close(); 
    </method> 
    
    <!--Dragging the window captures the mouse-->
    <dragstate name="drg"/>
    <handler name="onmousedown">
      this.myrte.bringToFront();
      this.drg.apply();
    </handler>
    <handler name="onmouseup">
      this.drg.remove();
    </handler>
    
  </class>
  
  <!-- A <text> element that brings creates a rte_editor when clicked -->
  <class name="texteditor" extends="text">
    <attribute name="editor" value="null"/>
    
    <method name="retrieveText" args="text">
      this.setAttribute('text', text);
    </method>
    
    <handler name="onclick">
      this.editor = new lz.rte_editor (canvas,{title:'editor', width:600, height:500, resizable:true, closeable:true, text: this.text});        
      this.textdel = new LzDelegate (this, 'retrieveText');
      this.textdel.register(this.editor, 'ontext');
    </handler>
  </class>
  
  
  <simplelayout axis="y" spacing="10"/>
  
  <texteditor>When you click on this text, you can edit it.</texteditor>
  <texteditor>This is another text object you can edit.</texteditor>
  
  <rte width="620" height="420">
    This is an <b>inline</b> rte editor with custom buttons.
    <method name="rte_clear" args="ignore">
      this.setAttribute ('text', '');
    </method>
    <method name="rte_bold" args="ignore">  
    this.setAttribute ('text', this.text = '<b>' + this.text + '</b>');
    
    </method>
    <handler name="oneditorready">
      this.addButton ({value:'Clear'}, new LzDelegate(this, 'rte_clear'));
      this.addButton ({value:'All Bold'}, new LzDelegate(this, 'rte_bold'));
      
      
      // Set the color
      this.setStyle ('rte_buttons', 'backgroundColor', '#f0f0f0');
    </handler>
  </rte>
  
  <!--
    <rte width="600" height="400" scrollbars="false" toolbar_order='bold,italic,underline'>Simple Editor</rte>
  -->
  
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
  * Copyright 2010 Laszlo Systems, Inc.  All Rights Reserved.                   *
  * Use is subject to license terms.                                            *
  * X_LZ_COPYRIGHT_END ****************************************************** -->