sTXE – HTML Rich Text editor

Here is a prologue that tells the story how I ended up making this Rich Text editor. If you haven’t read please go ahead and read once.

 

sTXE-Image-support

Now and again, I just came up with Version 2 of sTXE. Version 2 has been released with additional features based on the  feedbacks of version 1.

Whats new with this version.

    • Ability to re-size the editor by drag option.
    • Ability to define editor alignment.
    • Ability to Add and Upload image.
    • Facility to add more symbols.

sTXE is a light weight Browser based Rich Text editor that is fully written in JavaScript.
sTXE – is free and open source.
Easy to understand and use.
Allows you to take full advantage of customizing the controls.
Ability to have multiple editors on same page.
uses iframe as editable component
Compatible with IE.6 and other major browsers .

Download archive also contains more examples and detailed explanations for the features available on sTXE.


How to use.

1. Include the sTXE.css and sTXE.js file in your html page.

2. Create a DIV tag with an id indicating the editor.

<div id=’editorPlanelContainer’></div>

3. Load the editor into your div tag through a javascript function call.

<script>
loadEditorPlane(‘editorPlanelContainer’);
</script>

That it you have Done.

How to customize the buttons in Editor.

By simply defining Boolean value, you can customize the accessibility of those buttons in text editor.

<script>
var controlPanel = {
bold : true,
italic:true,
underline:true,
align_left:true,
align_center:true,
align_right:true,
align_justify:true,
unordered_list:true,
ordered_list:true,
indent:true,
outdent:true,
superscript:true,
subscript:true,
insert_link:false,
remove_link:false,
fonts:false,
fonts_size:false,
fonts_color:false,
symbols:false,
remove_formate:false,
getHtml:false,
author:true,
image:true
};
}
loadEditorPlane(‘editorPlanelContainer’,controlPanel)
</script>

How to customize the width and height of the Editor.

By simply defining width and height value,you can customize dimention of the editor.Vaule for width and height should be given in pixels without px notation.

<script>
var controlPanel = {
bold : true,
italic:true,
underline:true,
align_left:true,
align_center:true,
align_right:true,
align_justify:true,
unordered_list:true,
ordered_list:true,
};
}
var wh = {
width :630,
height:200
}
loadEditorPlane(‘editorPlanelContainer’,controlPanel,wh)
</script>

By default editor width is set to 630px and height is set to 180px.
sTXE- customize the width and height of the Editor

How to get the content of Editor.
There are two way to get the content of sTXE Editor.
1. By click the get HTML Source button on the right corner of the Editor.
This will popup the content in alert box.
2. By invoking a javascript function getEditorContent(editorPlaneName);

<script>
var data= getEditorContent(‘editorPlaneName’);
</script>

How to create multiple Editors in same webpage.

Multiple Editor can be eaily created using muliple div tag ids

<div id=’editorPlanelContainer1′></div>
<div id=’editorPlanelContainer2′></div>
<script>
loadEditorPlane(‘editorPlanelContainer1’);
loadEditorPlane(‘editorPlanelContainer2’);
</script>

Multiple - sTXE - HTML Rich Text editor How to customize the css property.
Every element in editor is defined with css property. However custome css can be assigned to the element of sTXE using the class property of html. Below tabular column shows the css class and id of elements used in sTXE.

Contorl Name CSS Class Name CSS ID Name
bold bold
italic italic
underline underline
JustifyLeft align_left
JustifyCenter align_center
JustifyRight align_right
JustifyFull align_justify
insertorderedlist insert_orderedlist
indent indent
outdent outdent
superscript superscript
subscript subscript
Hyper Link insert_link
Unlink Unlink
Fonts
fonts
Font Size
size
Font color
color
symbols
symbols
RemoveFormat RemoveFormat
Get Html get_html
About sTXE get_author

What’s up next; feel free to give a try. If you’re more curious go ahead and start enhancing the sTXE to your imagination, after all it’s free and open source.


Post a Comment

Your email is never published nor shared. Required fields are marked *