HTML Text Editing Component for hosting in Web Pages : Editor « GUI Components « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » GUI Components » Editor 




HTML Text Editing Component for hosting in Web Pages
 

<!--
#################################################################################
##
## HTML Text Editing Component for hosting in Web Pages
## Copyright (C2001  Ramesys (Contracting ServicesLimited
##
## This library is free software; you can redistribute it and/or
## modify it under the terms of the GNU Lesser General Public
## License as published by the Free Software Foundation; either
## version 2.1 of the License, or (at your optionany later version.
##
## This library is distributed in the hope that it will be useful,
## but WITHOUT ANY WARRANTY; without even the implied warranty of
## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
## Lesser General Public License for more details.
##
## You should have received a copy of the GNU LesserGeneral Public License
## along with this program; if not a copy can be obtained from
##
##    http://www.gnu.org/copyleft/lesser.html
##
## or by writing to:
##
##    Free Software Foundation, Inc.
##    59 Temple Place - Suite 330,
##    Boston,
##    MA  02111-1307,
##    USA.
##
## Original Developer:
##
##  Austin David France
##  Ramesys (Contracting ServicesLimited
##  Mentor House
##  Ainsworth Street
##  Blackburn
##  Lancashire
##  BB1 6AY
##  United Kingdom
##  email: Austin.France@Ramesys.com
##
## Home Page:    http://richtext.sourceforge.net/
## Support:      http://richtext.sourceforge.net/
##
#################################################################################
## Modified by Alex Baker
## 03/21/2002
## 1Removed css link so there is only one document to keep track of
## 2Added Table Height and Width parameters
## 3Added a label and header class in the style sheet to control look of dialog
## 4Cleaned up the layout of the table a touch. Removed unneeded empty <td> tags
## 5Cleaned up the output of the table with a few tabs and returns
-->
<html>
<head>
<meta name="vs_targetSchema" content="HTML 4.0">
<style>
  BODY 
    background-color: buttonface;
    border: 0
    margin: 2px; 
  }

  INPUT{
    font-family: sans-serif;
    font-size: 8pt;
  }
  
  INPUT.button 
    border-top: 1px solid white; 
    border-left: 1px solid white;
    border-bottom: 1px solid black; 
    border-right: 1px solid black;
    font-size: 8pt; 
    width: 60
  }
  
  .label{
    font-family: sans-serif;
    font-size: 8pt;
    text-align: right;
  }
  
  .header{
    font-family: sans-serif;
    font-size: 8pt;
    font-weight : bold;
    text-align: left;
  }

</style>
<title>Insert Table</title>
  <script language="JavaScript">
<!--  
    function attrname, value ) {
      if (!value || value == ""return "";
      return ' ' + name + '="' + value + '"';
    }

    function insertTable() {
      var nRows = rows.value ? parseInt(rows.value2;
      var nCols = cols.value ? parseInt(cols.value2;
      var strHTML = '<TABLE'
              + attr("border", borderWidth.value)
              + attr("height", tableHeight.value)
              + attr("width", tableWidth.value)
              + attr("bordercolor", borderColor.value)
              + attr("cellspacing", cellSpacing.value)
              + attr("cellpadding", cellPadding.value)
              + attr("bgcolor", backgroundColor.value)
              '>\n';
      for (var i = 0; i < nRows; i++) {
        strHTML += '\t<TR>\n';
        for (var j = 0; j < nCols; j++) {
            strHTML += '\t\t<TD></TD>\n';
        }
        strHTML += '\t</TR>\n';
      }
      strHTML += '</TABLE>\n';
       window.returnValue = strHTML;
       window.close();
    }

    function cancel() {
      window.returnValue = null;
      window.close();
    }
//-->
  </script>
</head>

<body scroll="no">
  <table class="dlg" border="0" cellpadding="0" cellspacing="0" width="240px">
    <tr>
      <td>
        <table width="100%">
          <tr>
            <td class="header">Layout</td>
            <td valign="middle" width="90%">
              <hr width="100%">
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center">
        <table border="0" cellpadding="1" cellspacing="0">
          <tr>
            <td class="label">Rows:</td>
            <td valign="middle">
              <input type="text" class="inputBox" name="rows" value="2" size="1" maxlength="4">
            </td>
            <td class="label">Cols:</td>
            <td valign="middle">
              <input type="text" name="cols" value="2" size="1" maxlength="4">
            </td>
            
          </tr>
          <tr>
            <td class="label"><nobr>Cell Padding:</nobr></td>
            <td valign="middle">
              <input type="text" name="cellPadding" value="0" size="1" maxlength="4">
            </td>
            <td class="label"><nobr>Cell Spacing:<nobr></td>
            <td valign="middle">
              <input type="text" name="cellSpacing" value="0" size="1" maxlength="4">
            </td>
          </tr>
          <tr>
            <td class="label"><nobr>Table Width:</nobr></td>
            <td valign="middle">
              <input type="text" name="tableWidth" value="100%" size="1" maxlength="5">
            </td>
            <td class="label"><nobr>Table Height:<nobr></td>
            <td valign="middle">
              <input type="text" name="tableHeight" value="" size="1" maxlength="5">
            </td>
          </tr>
          <tr>
            <td class="label"><nobr>Rows Height:</nobr></td>
            <td valign="middle">
              <input type="text" name="rowHeight" value="" size="1" maxlength="5">
            </td>
            <td class="label"><nobr>Column Width:</nobr></td>
            <td valign="middle">
              <input type="text" name="colWidth" value="" size="1" maxlength="5">
            </td>
          </tr>
        </table>
      </td>
    </tr>      
    <tr>
      <td>
        <table width="100%">
          <tr>
            <td class="header"><nobr>Borders</nobr></td>
            <td valign="middle" width="90%">
              <hr width="100%">
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center">
        <table border="0" cellpadding="1" cellspacing="0">
          <tr>
            <td class="label">Size:</td>
            <td valign="middle">
              <input type="text" name="borderWidth" value="1" size="1" maxlength="4">
            </td>
            <td class="label">Color:</td>
            <td valign="middle">
              <input type="text" name="borderColor" value="" size="10">
            </td>
          </tr>
        </table>
      </td>
    </tr>      
    <tr>
      <td>
        <table width="100%">
          <tr>
            <td class="header">Background</td>
            <td valign="middle" width="90%">
              <hr width="100%">
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center">
        <table border="0" cellpadding="1" cellspacing="0">
          <tr>
            <td class="label">Color:</td>
            <td valign="middle">
              <input type="text" name="backgroundColor" value="" size="15">
            </td>
          </tr>
        </table>
      </td>
    </tr>      
    <tr>
      <td>
        <hr width="100%">
      </td>
    </tr>
    <tr>
      <td align="right">
        <input class="button" type="button" value="Insert" title="Insert Table" onclick="insertTable()">
        <input class="button" type="button" value="Cancel" title="Cancel Dialog" onclick="cancel()">
      </td>
    </tr>
  </table>
</body>
</html>

           
         
  














XsDhtmlEditor_0.95.zip( 134 k)
Related examples in the same category
1.Editor based on Javascript
2.Rich text
3.WebFX Dynamic Webboard 2.0
4.Walter - A WYSIWYG HTML editor that runs purely on JavaScript
5.Text Editor in JavaScript: toolbar, Color picker, Bold style etc
6.Edit in place (Direct edit)
7.WebIEdit
8.Bitflux Editor Examples
9.editarea 0.8.1.1
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.