The example shows how to create a simple module that displays the count of tables and images in the content area.
To create a custom module register its tag in the Modules inner-tag of RadEditor. Please, note that at least one of the built-in modules should be registered when creating a custom module, because due to optimization purposes the editor will not register its modules javascript code if some of the built-in modules is not declared:
<telerik:radeditor runat="server" ID="RadEditor1" Height="700px">
<Modules>
<telerik:EditorModule Name="MyModule" Enabled="true" Visible="true"/>
<telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true"/>
</
Modules
>
</
telerik:radeditor
>
and after that implement the initializeBase function, e.g.
<script type
=
"text/javascript"
>
MyModule
= function
(element)
{
MyModule.initializeBase(
this
, [element])
;
}
MyModule.prototype
=
{
initialize :
function
()
{
MyModule.callBaseMethod(
this
,
'initialize'
)
;
var
selfPointer
= this;
this
.get_editor().add_selectionChange(
function
(){ selfPointer.doSomething()
;
})
;
this
.doSomething()
;
},
//A method that does the actual work - it is usually attached to the "selection changed" editor event
doSomething :
function
()
{
var
span
= document
.createElement (
"SPAN"
)
;
span.innerHTML
= this
.get_editor().get_html()
;
var
imageCount
=
span.getElementsByTagName(
"IMG"
).length
;
var
tableCount
=
span.getElementsByTagName(
"TABLE"
).length
;
var
element
= this
.get_element()
;
element.innerHTML
=
"<b>CUSTOM MODULE: Images: "
+ imageCount +
" Tables: "
+ tableCount +
"</b>"
;
element.style.border
=
"1px solid red"
;
element.style.backgroundColor
=
"yellow"
;
element.style.color
=
"red"
;
}
}
;
MyModule.registerClass(
'MyModule'
, Telerik.Web.UI.Editor.Modules.ModuleBase)
;
</script>