KTML-API Documentation
Contents
1. Figure 5 Calling the paint function Caution After setting all the KTML object properties it is mandatory to call the paint function otherwise the KTML editor will not be displayed http www interaktonline com Page 16 KTML API Documentation KTML Application Programming Interface The KTML API Application Programming Interface represents a set of methods belonging to the KTML object These methods will be used in order to take actions on the edited content The KTML Object Methods The KTML object methods are defined in the ktml j s file Ktml prototype doBold Ktml_doBold Ktml prototype doItalic Ktml doltalic Ktml prototype doUnderline Ktml dolnderline Ktml prototype doUndo Ktml doUndo Ktml prototype doRedo Ktml doRedo Ktml prototype openColorPicker Ktml openColorPicker Ktml prototype getSelectedNode Ktml loyic get5electedNode Ktml prototype removeselectedNode Ktml logic removeTag Ktml prototype insertObject Ktml insert bject Ktml prototype insertText Ktml insertText Ktml prototype insertHTML Ktml_insertHTML Ktml prototype getHTMLContent Ktml gyetHTMLContent Ktml prototype getXHTHLContent Ktml yetXHTNLContent Ktml prototype applyCssstyle Ktml logic Insert tyle Ktml prototype applyHeading tyle Ktml loyic InsertHeading Ktml prototype openInsertTableDLG Ktml_openInsertTableDLG Ktml prototype yetillSelections Ktml getAllSelections Ktml prototype ad2. KTML JavaScript Inter PROFESSIONAL WEB TOOLS API Documentation KTML API Documentation Table of Contents EE Gr ee db eege E 3 ad Ce TEE 4 E gg E e ceeded aieeaa EA 4 Iypographiclonventions ee eee ee ea aaa EEN eeeneeee 4 intended AUCGIEN CEs eege gege sultana arma duaa sala aa laa daa EEN aa a Ja la ona ala gla alara gra 5 Quick Install el EE 6 i HIR gn OT TG 7 i DOIT Tan d Ee DE 8 Including the JavaScript Required Files and the KTML Initialization Global Call 8 KIME Object Instantiation 1 2 1001 4 04 sesi coved dec se cece esses hates eevee amaa es We esse sel 10 Setting the KTML ObjectProperties 1110110111 00 enamel 11 KTML Application Programming Interface sseeeseeceeeseeeeeeeseeeseeeeeeeeeeeeeeeesneeceeesesneeseneeeeees 17 The KT ML Object Methods 0 2ccccssseesesececcececeseceseueveeneceensseeesedceeneececseeeeeseseseuavenneensieneneteeeseeres 17 KTML Mel Dal ever Eege eet 19 The Selection dE TT EE 19 Built in Toolbar CTT de EE 19 CreatingaCustomToolbarButton aaa nunne maa 20 Adding a Custom ToolbarButton 10010000er eee aaa anma aaa 22 ENK Pl g i ep SM PN DE A Ean aena aaa 23 Plug in Architecture serseri sierra saran saman ala a al m le sollu sa azam grli
3. All other trademarks are acknowledged as the property of their respective owners This document and the product to which it pertains are distributed under licenses restricting their use copying distribution and decompilation No part of this document or of the associated product may be reproduced in any form by any means without prior written authorization of InterAKT Online except when presenting only a summary of the tutorial and then linking to the InterAKT website DOCUMENTATION IS PROVIDED AS IS AND ALL EXPRESS OR IMPLIED CONDITIONS REPRESENTATIONS AND WARRANTIES INCLUDING ANY IMPLIEDWARRANTY OF MERCHANTABILITY FITNESS FOR A PARTICULAR PURPOSE OR NON INFRINGEMENT ARE DISCLAIMED EXCEPT TO THE EXTENT THAT SUCH DISCLAIMERS ARE HELD TO BE LEGALLY INVALID Send comments and suggestions to products interaktonline com nterAki professional web tools InterAKT Online web http www interakt ro e mail contact interakt ro tel 4021 312 5 312
4. e p_dirDepth is the relative path to the folder where KTML is installed from the index htm file e p ext is the file extension for the plug ins corresponding to the chosen web server p_globalUILanguage is the KTML display language If the display language is also set in the local call when the KTML object is instantiated by calling the setUILanguage function the language set in the global call is ignored e This lt script gt tag will also set some other global variables Ee As said above p_dirDepth is the relative path from the index htm file to the ktml CZ Not folder with a trailing slash Example if the file index htm is located in a folder named deep and the ktml is locted in the root folder http www interaktonline com Page 8 KTML API Documentation mi m Site KTMLIS C Documents d Z adodb ao Connections ao deep l index htm B includes e EN km Figure I Possible location of the index htm file then the path would be lt script src ktml includes ktedit init js gt lt script gt lt s z pe klen global i svaziaoles gt Amen 5 eeler ola Virwameads p 3 The third lt script gt tag will include the utils3 js file which contains some helper functions 4 The last lt script gt tag will include the ktm1 js file which contains the KTML class this is where the KTML object is defined khtml gt Khead gt Ktitle gt KTML JSOnly
5. Document lt title gt kmeta http equiv Content Type content text html charset iso 8859 1 gt Kseript src ktml includes ktedit init js gt lt script gt lt script id ktml global jsvariables gt initKTML ktml php francais if is valid amp amp is mozilla f includeJS DIR DEPTHH includes ktedit mozilla ie compat js lt script gt Kseript srce ktml includes ktedit utils3 js gt lt script gt lt script srce ktml includes ktedit ktml js gt lt script gt lt head gt Figure 2 Including the JavaScript Required Files and the KTML Initialization Global Call http www interaktonline com Page 9 KTML API Documentation KTML Object Instantiation The KTML object should be attached to a lt textarea gt from which it will inherit the dimensions Therefore inside the lt body gt tag insert a form and a text area lt form gt lt iexrarsa mame Comc emt ieecene cme Cols 50 wows 5 style width 700px height 400px gt Enter lt b gt html lt b gt text lt textarea gt As you can see we named the text area cont cnt The next step is to create a KTML object instance lt script iek keml Cone emt imstamce gt Kom come eme mey KNIT CODE eme There is a constraint regarding the name of the KTML object instance its name should Caution always begin with ktml_ In our case we named it Atml_cont_cnt in order to mention also the corresponding text area name This
6. class associated to the plug in and some plug in properties and methods You can extend the KTML class by adding your own methods 3 index lt lt server side extension gt gt php asp jsp pl or any name you may want to call it where you will include the KTML object instance When wanting to use plug ins the web page which should include the KTML object should contain server side code therefore it should be dynamic having an extension such as php asp jsp pl or others Creating a Plug in Sample In order to make you understand what is the mechanism of a plug in creation we will provide a PHP plug in example The plug in whose creation process will be presented further on is supposed to help the KTML user to insert in the editing area the name of a user selected from a database located on the server The user will click on a toolbar button which will open a window which should allow the selection of a record a user name First the editor the person who edits content is supposed to type the first letters of the user name in a prompt window then to select a user name from the displayed list The selected user name will be included in the KTML editable area To create the plug in follow the steps presented below 1 Create a new folder named PluginSample in ktml includes ktedit plugins 2 In ktml includes ktedit plugins PluginSample create a plugin php file which will contain the plug in initialization funct
7. document It has one parameter the HTML element Example var newElement ktmlObject edit createElement TT newhlement innerText This is newly created TT element ktmlObject insertObject newElement insertText text Replaces the current selection with the desired text insertHTML htmlText Replaces the current selection with the desired HTML text getHTMLContent Returns the current HTML content getXHTMLContent Returns the XHTML compliant content applyCSSStyle styleName Applies the desired style on the current selection It has one parameter the style name applyHeadingStyle headingName Applies the desired heading on the current selection It has one parameter the heading name openInsertTableDLG Opens the insert table dialog pop up window expandSelectionToParentNode Selects the parent node of the current selected node These methods will help you customize the KTML object in order to suit your needs http www interaktonline com Page 18 KTML API Documentation KTML Toolbar The KTML toolbar is configurable and extensible meaning you can create custom buttons in order to add features to the KTML object By using the API exported by KTML and the toolbar extensibility you can customize the KTML object behavior in order to suit your needs To each button you can attach one of the already existing KTML object methods or you can de
8. naming rule is very useful for the case where you want to include more KTML instances on the same page attached to different text areas lt script src ktml includes ktedit init js gt lt script gt lt script id ktml_global_jsvariables gt initKTML ktml php francais if is valid amp amp is mozilla f inc ludeJS DIR_DEPTH includes ktedit mozilla_ie compat js D lt script gt lt script src ktml includes ktedit utils3 js gt lt script gt lt script src ktml includes ktedit ktml js gt lt script gt lt head gt lt body gt lt form gt lt textarea name cont cnt id cont ent cols 50 rows 5 style width 700px height 400px gt Enter lt b gt html lt b gt text lt textarea gt lt script id ktml_cont_cnt_instance gt ktml_cont_cnt new Ktml cont_cnt Figure 3 Creating a KTML object instance Next inside this lt script gt tag you should call the functions that will set the KTML object properties Pay attention not to forget to call the paint function after the calls of the functions that set the properties and before those that create custom toolbar buttons http www interaktonline com Page 10 KTML API Documentation Setting the KTML Object Properties For each KTML object instance on the page you can set the properties by calling some functions that will be explained further on These functions should be called inside the lt script gt tag where the
9. on and that allow setting some additional properties for the inserted object http www interaktonline com Page 7 KTML API Documentation KTML Instantiation In this chapter you will learn how to include one or more KTML objects into your web page Say you name your page index htmand you place itin your site root Including the JavaScript Required Files and the KTML Initialization Global Call Open the index htm page and include the following code lines inside the lt head gt tag lt script src ktml includes ktedit init js gt lt script gt lt s zripe id kim global eme lee T Hima eK Miron Au Meke Mame s4 2 if is valid amp amp is mozilla ineludeds DIR _DEPTH includes ktedit mozilla ie compat js lt script gt lt script srce ktml includes ktedit utils3 js gt lt script gt lt script srco ktml includes ktedit ktml js gt lt script gt As you can see you should insert 4 lt script gt tags 1 The lt script src ktml includes ktedit init js gt lt script gt code line will include the init js file In this file a browser check is performed in order to verify if it is valid Internet Explorer 6 0 or higher or Mozilla 1 4 or higher The init js file also includes a style sheet for the KTML object 2 The next lt script gt tag will perform the KTML initialization global call e The initKTML function has the following syntax function initKTML p dirDepth p ext P globalUILanguage where
10. rows rsUser ZZ Then define how the interface should look like lt html gt lt head gt lt title gt Select user lt title gt SEI A to execute when the user clicks on the Select User button function selectUser window opener ktmls 0 insertUserName document getElementById user list value window close lt script gt lt head gt lt body style background color buttonface gt lt php if records found display the users names drop down menu and the Select User button if totalRows rsUser gt 0 gt lt select Name user lise sokmser list sige B gt lt php do Ss http www interaktonline com Page 24 KTML API Documentation lt option value lt php echo htmlspecialchars row rsUser full name gt gt lt php echo Srow rsUser full name gt lt option gt lt php while Srow_rsUser mysql fetch assoc rsUser Srows mysql num rows rsUser it rows gt A eer data Seek Sesser O p Snow reliser magl morea assoc Srs 7 b gt lt select gt lt input type button value Select onclick selectUser gt lt php jJelsef if there are no user names matching the criterion just display a message 2 gt No user has been found with name starting with lt php echo become e er Sis o a lt php i ZS displaying a Close window button lt input type button value Close window onclick win
11. By default it is set to true Function Example kemi EE CAC EE Crue The setXHTML Function This function instructs the KTML object to save the edited content as valid XML to the database In View Source http www interaktonline com Page 14 KTML API Documentation mode the edited content will not be displayed as XML because it would take a lot of time and resources but it will be saved as XML in the database Function Syntax function Ktml setXHTML saveXhtml e saveXhimi boolean if false the content will not be saved as XML in the database but HTML By default it is set to false Function Example konl cont cnt setXHTML true The setModuleProperty Function This function sets the properties for possible KTML modules For the moment in KTML only the CSS module is available therefore this function sets only this module s properties This function will be called later on by the corresponding function getModuleProperty Function Syntax function Ktml_setModuleProperty moduleName propertyName propertyValue Function Example kemi come cme serMsenleProperiy ess aararoS yle keml ineludes seyles K1W styles ess Y CZ Note The path to the style sheet is relative to the CSS file from the current file The paint Function This function will output all HTML reguired by the KTML object It should be called after all KTML properties have been set and before the custom toolbar buttons
12. KTML object is instantiated The setUselntrospection Function This function activates or deactivates the Property Inspector By default it is set to true meaning that if it is not called the Property Inspector will be displayed Function Syntax Fonccion keni ser selmcerospeccion MSOIMEZOSOSCELCIM 2 e uselntrospection boolean if false the Property Inspector will not be displayed By default it is set to true Function Example semi e omer semee species ei The setDebug Function This function sets the DEBUG mode for the KTML object The debug messages will be displayed in a new window The default value is false so if this function is not included when setting the KTML object properties the DEBUG window will not be displayed Function Syntax function Ktml_setDebug pDebug e pDebug boolean if true the DEBUG window will be displayed By default it is set to false Function Example ktml_cont_cnt setDebug true In the below image we present the DEBUG window when no error occurs http www interaktonline com Page 11 KTML API Documentation Debugger for the ktml_cont_cnt object 4 EK Ze Load time 1091 xmlhttp time 90 Etml includes Etedit lanyuayes eng 50 Etml includes Etedit modules intro 60 Etml includes ktedit modules intro 0 Etml includes Etedit modules linkin 20 Etml includes Etedit modules linki 10 Etml includes Etedit modules templ 0 Et
13. PI Documentation The setUlLanguage Function This function sets the KTML display language The default user interface language is set globally by the initKTML function But the setUlLanguage function overwrites the global language settings This function is very useful when wanting to include more KTML instances on the same page Function Syntax function Ktml_setUI Language uiLang e uiLang can have one of the following values english francais dutch espagnol german norwegian At the moment KTML supports 6 languages The language resources files can be found in the following folders ktml includes ktedit languages ktml includes ktedit modules introspection languages ktml includes ktedit tags a languages ktml includes ktedit tags img languages ktml includes ktedit tags none languages ktml includes ktedit tags table help ktml includes ktedit tags table languages ktml includes ktedit tags td help ktml includes ktedit tags td languages ktml includes ktedit tags tr help ktml includes ktedit tags tr languages ktml includes ktedit help gt e 00 Function Example kenil e o me e EE Eeler T y The setAutoFocus Function This function allows you to automatically insert the cursor inside the KTML editable area even if on the page there are multiple controls Function Syntax function Ktml_setAutoFocus autoF e autoF boolean if false the auto focus will not be set
14. d parameter may be Coils eml logic elor rmac ImsereSeyle tals value ktml_cont_cnt addToolbarButton new ToolbarButton TextInsertion Textinsertion TextInsertion null null img null KT_JS_STRING this ktml insertHTML prompt Enter the text Text Figure 12 Example of command parameter when comandType is KT JS STRING e IfcommandType is KT_JS_FUNCTION then the command parameter may be a custom function ktml_cont_cnt addToolbarButton new ToolbarButton st st st null null img null KT_JS_FUNCTION lcustomFunction Figure 13 Example of command parameter when comandType is KT JS FUNCTION You will find below an example of how to create a custom toolbar button var btniInsertCustomHTML new ToolbarButton TextInsertion TextInsertion test Heer Loa y RE mall Mame mui Il y KT JS STRING Chis keml insereniMn prompe CEnter the mee lr rex After having created the button you should add it in order to be displayed in the KTML toolbar Adding a Custom Toolbar Button In order to add a custom toolbar button you should use http www interaktonline com Page 21 KTML API Documentation ktml cont cnt addToolbarButton customToolbarButton There are two ways of adding a button 1 Adding the button after it was created e First you create the button var btnInsertCustomHTML new ToolbarButton expandSelectionToParentNode expandSelectionToPa
15. d the custom buttons So the following code lines should be inserted after the lt script gt tag that contains the KTML object instance definition the KTML object properties the built in and custom toolbar buttons definitions lt php include ktml includes ktedit pluggins PluginSample plugin php PluguimSeamele come eme 2 gt In the browser you will notice the display of another toolbar button without an icon named Insert User as you will be able to see when moving the mouse over the button After clicking on this button the following prompt window will be displayed Explorer User Prompt E Enter the starting letter Cancel Figure 14 The prompt window allowing to enter a criterion for the user names selection After having entered a letter or a string of characters and clicked on OK a pop up window similar to the one below will be displayed if there are record in the database matching your criterion http www interaktonline com Page 26 KTML API Documentation 28 Select user Web Page Dialog x mihail corlan mihai corlan Select Close window Figure 15 The user name selection window Select a user name and click on the Select button The user name will be inserted in the KTML editable area inde EC Ge SES Se AAO None Tie M se Je BZ U A jr mihai corlan Property nspector This is the Property Inspector panel Special options will appear
16. dUndoContext Ktml_addUndoContext Ktml prototype expandSelectionToParentNode Ktml expandSelectionToParentNode Figure 6 The definition of the KTML object methods You will find below a list of all defined KTML object methods Method name Action to perform doBold Applies a bold format to the selected text doltalic Applies an italic format to the selected text doUnderline Applies an underlined format to the selected text doUndo Reverts the edited document to previous state doRedo Re does the last undo action addUndoContext Adds the current KTML state to the undo queue http www interaktonline com Page 17 KTML API Documentation Method name Action to perform openColorPicker 0 t Opens the Color Picker cither for the Background Color or Foreground Color buttons The parameters are e o obiect the caller HTML object e t type The Color Picker will be positioned relatively to the object that will be opened The t parameter can have either the f value for foreground or the b one for background Example lt input type button Value Open color picker GE ee kimi come eme CoenColowPiciKe cals 1b Il gt getSelectedNode Returns the HTML object node containing the selection removeSelectedNode Removes the HTML object node containing the selection insertObject newObject Inserts a newly created HTML element into the
17. dow close gt lt body gt lt html gt lt php mysql free result rsUser gt 4 In ktml includes ktedit plugins PluginSample create scripts js which will define the plug in JavaScript class and extend the KTML class with two more methods The opening method of the dialog window which can be attached to a custom toolbar button The insertion method in the KTML edited area of the selected user name the PluginSample class function PluginSample owner this ktml owner meburn Thus p Opens the select user dialog Fonction eml openselecilser http www interaktonline com Page 25 KTML API Documentation var plug nParam prompt Enter the starting letter ww pluginParam pluginParam substring 0 1 util openwnd windowName DIR DEPTH includes ktedit pluggins PluginSample UserDialog php pluginParam oluginParam 300 200 ve Insert the name of the selected user into the document replacing the selection function Ktml_InsertUserName userName this insertText userName ella SS Cli FOCUS A 3 open the plug in dialog window Kemi pro ype openSelecelser Kemi epemsSelecrlser7 insert the selected user into the edited document Kel prococydo imsert serName Keml ImsercliseziName 2 5 Call the PluginSample function including the plug in from index php after having set the KTML properties and after having adde
18. fine your own custom functions The Selection Mechanism You the KTML programmer can access the current selection from the KTML editable area by using the getSelectedNode method of the KTML object This will be very helpful if you want to get an image or table s properties in order to use them further on In order to replace the current selection with e text use the insertText method e HTML code use the insertHTML method e an object use the insertObject method Built in Toolbar Buttons The list of built in toolbar buttons is defined by the ktmlButtons variable in the toolbar js file Thus by using the setToolbarButtons function you will be able to display only the desired built in buttons in the toolbar The KTML built in toolbar buttons are Cut Copy Paste Undo Redo InsertTable BulletList NumberedList Indent Outdent HorizontalLine AlignLeft AlignCenter AlignRight AlignJustify ToggleVisible ToggleEditMode CleanHTMLContent Help HeadingList Style List Font Type FontSize InsertLink Bold Italic Underline ForegroundColor BackgroundColor ktmlButtons new ToolbarButton Cut null null cutcopypaste new ToolbarButton Copy null null cutcopypaste new ToolbarButton Paste null null cutcopypaste new ToolbarButton Undo null null undoredo new ToolbarButton Redo null null undoredo new ToolbarButton InsertTable null null null null img nu
19. have been defined Function Syntax function Ktml paint Function Example kemi come email http www interaktonline com Page 15 KTML API Documentation lt textarea name cont cent id cont cnt cols 50 rows 5 gt lt php echo Recordset1 gt Fields cont cnt 17 gt lt textarea gt lt script id ktml cont cnt instance gt ktml cont cent new Ktml cont cnt ktml_cont_cnt setDebug false ktml cont cnt setSize S00px 200px ktml cont cnt setRead nly false ktml cont cnt setToolbarButtons new Array Cut Copy Paste Undo Redo Insertlmage InsertTable BulletList NumberedList Indent Outdent HorizontalLine AlignLeft Ali nCenter AlignRight ili ndustify ToggleVisible ToggleEditMode ClganHTMLContent About Help BREAK HeadingList Style List Font Type FontSize InsertLink Bold Italic Underline ForegroundColor BackgroundColor ktml_cont_cnt setUseIntrospection false ktml cont cnt setAutoFocus true ktml cont cnt setXHTNL true ktml cont cnt setModuleProperty css pathToStyle ktml includes styles KT_styles css ktml cont cnt paint ktml cont cnt addToolbarButton new ToolbarButton st st st null null img null KT J5 FUNCTION customFunction function customFunction var selectedNode ktml_cont_ent getSelectedNode selectedNode style textDecoration line through
20. in this space once you select elements like TABLE TR TD A IMG Figure 16 The selected user name is inserted in the KTML editable area Based on this example you should be able to create your own plug ins and to attach them to your customized KTML object http www interaktonline com Page 27 KTML API Documentation Conclusions This document is of great help for when you will try to customize and extend the KTML HTML editor After having read it you will be able to include a KTML object instance in your web page to set the KTML properties and to select the built in buttons that will be displayed in the toolbar You will also find out what are the API methods that can be attached to a button in order to extend the KTML toolbar By following the steps described in the document you will also be able to create your own server side plug ins and to attach them to KTML Further Reading For comprehensive information on all features of KTML we recommend reading KTML User Manual In order to train your editors on how to use the KTML please refer to Publishing Content with KTML Tutorial http www interaktonline com Page 28 Copyrights and Trademarks Copyright 2000 2004 by InterAKT Online SRL All Rights Reserved This tutorial is subject to copyright protection KTML MX Kart MX Shop MX Includes MX Looper PHAKt ImpAKT NeXTensio MX Query Builder Transaction Engine are trademarks of InterAKT
21. ion lt php function PluginSample name echo lt script gt includeJ S DIR DEPTH includes ktedit pluggins PluginSample scripts js irin echo ktml name registerPluggin PluginSample new PluginSample ktml_Sname r n echo ktml name addToolbarButton new ToolbarButton InsertUser Insert User mai mut 1 y mall Mmo N H mt Il KT JS STRING this ktml openSelectUser http www interaktonline com Page 23 KTML API Documentation echo lt script gt 2 gt 3 Inktml includes ktedit plugins PluginSample create UserDialog php which will allow the selection of a user name from the database on the server e First include the database connection file and the rsUser recordset used to select the users from the database lt php require once Connections dbconnection php gt lt php colname _rsUser if isset HTTP GET VARS pluginParam Scolname rsUser get magic quotes gpc SHTTP GET VARS pluginParam addslashes SATTE GET VARS pluginParam mysql select db Sdatabase dbconnection dbconnection EE Users Ee GSM zel USE Lirsemeams USE concat firstname USE Ieren mee as full name FROM users_usr WHERE firstname usr like ssso eolmame rsl ser pro ser nysglwguery oguery rsUser w gt dbeonmeceron worerci mys gl error row rsUser mysql fetch assoc rsUser stotalRows rsUser mysqli num
22. ll KT JS STRING this ktml logic InsertTablei new ToolbarButton BulletList null null null DECMD_UNORDERLIST img null KT CMD ID InsertUnorderedList new ToolbarButton NumberedList null numberlist null DECMD_ORDERLIST img null KT CMD ID InsertOrderedList new ToolbarButton finden null null indentation new ToolbarButton Outdent null null indentation new ToolbarButton HorizontalLine null hr horline DECMD_INSERTHR img null KT CMD ID InsertHorizontalRule new ToolbarButton AlignLeft null null paralign DECMD_JUSTIFYLEFT img null KT CMD ID JustifyLeft new ToolbarButton 4lignCenter null null paralign DECMD_JUSTIFYCENTER img null KT CMD ID JustifyCenter new ToolbarButton AlignRight null null paralign DECMD_JUSTIFYRIGHT img null KT CMD ID JustifyRight new ToolbarButton Aligndustify null null paralign DECMD_JUSTIFYFULL img null KT CMD ID JustifyFull new ToolbarButton ToggleVisible null null toggleinvis null img null KT CMD ID toggleInvisibles new ToolbarButton ToggleEditMode null html toggleedit null img null KT CMD ID toggleEditMode new ToolbarButton CleanHTMLContent null cleanword cleanup null img null KT CMD ID CleanHTML new ToolbarButton Help null null null null img null KT_JS_STRING if pageLoded Es this k
23. ml includes ktedit modules templa 0 Etml includes ktedit modules css la 10 ktml includes ktedit modules css s 10 Etml includes Etedit toolbar js ten 10 Etml includes ktedit plugins Plugi s 4 hhttp work iat JLocalintranet SSS Figure 4The DEBUG window The setSize Function This function allows you to set the KTML editable area size Normally the KTML object gets its size from the text area it is attached to if no set Size function is called When the size is set both in the text area definition and by the setSize function the setSize function has priority It should also be mentioned that the actual width will be forced by the toolbar width which may be larger than the specified KTML width Function Syntax function Ktml_setSize width height width the KTML editable area s width in pixels height the KTML editable area s height in pixels Function Example kemi cont CME SEES Ze ad 300px http www interaktonline com Page 12 KTML API Documentation The setReadOnly Function This function allows you to set whether the KTML editable area should be editable or read only By default the area will be editable and you will not even have to call the function inside the lt script gt tag where the KTML object is instantiated Function Syntax function Ktml_setReadOnly readOnly e readOnly boolean if true the KTML editable area will be read only By default it is
24. n sapan vaste 23 Greating a Plug in Sample icccicciicc ccccsecce sce der li kali dara izl vaa Ba Yasini saa azan Bae Bala Bia 23 e pe TT NEN SE MASAL SAM MENE E E MZ A 28 el O UE 28 http www interaktonline com Page 2 KTML API Documentation Overview This document aims to teach you how to install and customize the KTML online visual HTML editor You will learn the KTML architecture and how to include and customize such an advanced control into your web pages The application is not server side but is very extensible as you can add your own plug ins depending on the web server you decide to use KTMLis an online visual HTML editor designed for publishers who need to edit web content fast It allows easy content formatting using its advanced table manipulation features based on the live property inspector Unlike other online editors on the market our product supports most platforms and browsers providing the user with advanced text and paragraph formatting capabilities as well as CSS support and easy HTML tag selection http www interaktonline com Page 3 KTML API Documentation Prereguisites Requirements You can edit web content with KTML from anywhere without having to download or install any special program supposing you have already installed KTML on your content management system All you need is a computer with an operating system and an web browser This can be your local computer or a
25. ny other computer The KTML requirements are e Web browsers e Microsoft Internet Explorer 6 0 or higher e Mozilla 1 4 or higher e Operating systems Windows 98 ME NT 2000 XP Mac OSX Typographic Conventions The notations and text formats used in this document are found below Site page mono spaced italic index htm e Application button or menu bold font Button User interface elements bold italic font Property Inspector e HTML source tags and attributes italic font lt script gt e Source code mono spaced font lt script src init js gt lt script gt http www interaktonline com Page 4 KTML API Documentation Intended Audience This document addresses to web programmers who want to include and extend the KTML visual editor features and to create their own plug ins in a certain language depending on the chosen web server By including the advanced KTML control the programmers will offer their clients the possibility to edit content visually http www interaktonline com Page 5 KTML API Documentation Quick Install Guide To install KTML follow the steps briefly presented below 1 Unzip the KTML package and install the ktml folder in your site root 2 Create a new file in your site root named index htm where you should 1 Include the JavaScript required files and the KTML initialization global call Include a KTML object instantiation Set the KTML object prope
26. rentNode expandselectiontoparentnode imi dL pl wima y mali KT JS STRING this ktml insertHTML prompt Enter the eb ie UO Maney e au 9 e Then you add it ktml_cont_cnt addToolbarButton btninsertCustomHTML 2 Create the button and adding it in the same time ktml cont cnt addToolbarButton new ToolbarButton expandSelectionToParentNode expandSelectionToParentNode expandselectiontoparentnode mL y moli y Mine p m Li KT JS STRING this ktml insertHATML prompt Enter the ence i Wee After having inserted a code bloc similar to one of the ones presented above the newly created button will be displayed in the KTML toolbar http www interaktonline com Page 22 KTML API Documentation KTML Plug in Mechanism KTML was designed to be independent of the web server However some specific functionalities such as image gallery and spell checker depend on server side code and data KTML is very extesible allowing you to attach such plug ins In KTML all plug ins are located in the ktml includes ktedit plugins folder Plug in Architecture Each plug in must include the following files l plugin lt lt server side extension gt gt php asp jsp DI which will register plug in properties into the KTML security session variable and generate all other HTML and JavaScript necessary code to extend the KTML object features 2 scripts js which contains the definition of the JavaScript
27. rties Include the built in toolbar buttons nA A U N Add your own plug ins http www interaktonline com Page 6 KTML API Documentation KTML Architecture KTML was designed to satisfy the needs for a non server side HTML visual editor Our product was developed in JavaScript but is very extensible allowing you to extend the features and to add your own plug ins depending on the chosen web server The KTML object has 4 areas communicating amongst themselves 1 Toolbar containing the buttons allowing to apply commands to the edited content 2 Editable Area allowing to insert HTML code visually 3 Tag Selector used to display and select various tags 4 Properties Inspector used to display and set the properties for the selected item Toolbar Edit Commands 1 Insert Objects Button Status 2 Format Text Updates eg doBold Editable Area lt HTML gt Select Tag View the hierarchy of tags Edit more Tag Selector commands specific to the Set some tags View tags selected tag attributes y attributes Property Inspector Drawing 1 KTML architecture The editing commands are executed by using API methods belonging to the KTML object such as doBold doUndo openColorPicker getSelectedNode insertObject insertText applyCSSStyle and others Some commands have dialog windows that open when the corresponding toolbar button is clicked
28. set to KaG Function Example kemi cont _cnt setReadOnly true The setToolbarButtons Function This function allows you to choose the built in buttons that will be displayed in the KTML toolbar The buttons can be arranged in more than one row within the toolbar For that you should also include BREAK in the list of buttons It will insert a break after the button where it is inserted Function Syntax function Ktml_setToolbarButtons buttonsVariable buttonsVariable it is a vector formed by the name of the built in buttons that will be displayed in the the KTML toolbar For the list of all built in buttons search the ktmlButtons variable in the toolbar js file For more information please refer to the KTML Toolbar chapter further in this document These are only the built in buttons the custom toolbar buttons will be defined after the paint function call Function Example ktml_cont_cnt setToolbarButtons new Array tncwospaccioa Cue Cooy agta Undo Reco Weeer mace VMS Telo le BulletList NumberedList Indent Outdent HorizontalLine AlignLe fe Align enter AlignRight Aligndustify ToggleVisible TogglekditMod e CleanHTMLContent About Help BREAK HeadingList Style isi Bie Pont myos gent E we Weeer Ate Wole Hicalie Wineleicilina Wueren ere acele unecoleor 4 http www interaktonline com Page 13 KTML A
29. the options Object optionsObject the options from the toolbar button having the type select This object contains value label pairs See an example in the below image new ToolbarButton HeadingList null property heading html tags DECMD SETBLOCKFNT select lt P gt Normal lt p gt Paragraph lt h1 gt Heading 1 lt h2 gt Heading 2 lt h3 gt Heading 3 lt h4 gt Heading 4 lt h5 gt Heading 5 lt h6 gt Heading 6 lt address gt Address lt pre gt Formatted 3 Figure 8 Creating a select toolbar button along with the options commandIype there are 3 types of commands e KT CMD ID specifies that the toolbar button should call one of the commands supported by the KTML object the name of the command is specified by the command parameter A list of supported KTML commands IDs is defined by the Ktml logic doFormat what function in ktml includes ktedit ktml js function Ktml_logic_doFormat what var toundo true switch what case Cut try this edit execCommand DECMD CUT OLECMDEXECOPT DODEFAULT null catch e if confirm Unprivileged scripts cannot invoke the Cut Copy and Paste commands nPress OK to open a technical note window with possible explanations to your problem Press Cancel to return to the editor var und window open http mozilla org editor midasdemo securityprefs html securit
30. tml toolbar getHelpMode this ktml toolbar setHelpMode false this else this ktml toolbar setHelpMode true this btn new ToolbarButton BREAK new ToolbarButton HeadingList null property heading html tags DECMD SETBLOCKFHT select i lt P gt Normal lt p gt Paragraph lt h1 gt Heading 1 lt h2 gt Heading 2 lt h3 gt Heading 3 Figure 7 The list of built in toolbar buttons http www interaktonline com Page 19 KTML API Documentation Creating a Custom Toolbar Button A button is an object created with the ToolbarButton function The ToolbarButton Syntax function ToolbarButton bName bAlt J leli helpld col buttonType optionsObject commandType command This function parameters are bName the new button name bAlt the alternative text that will be displayed when placing the mouse over the button e bid the button ID which will also be used to name the icon existing in ktml images editor images e helpld the help file name which should be found in ktml includes ktedit help e cid edit command identifier used by browser to query the state value for the button enabled disabled For a list of supported command identifiers see ktml includes ktedit utils3 js buttonType sets the button type It may be one of the following e img displays an image e select displays a drop down menu with options from
31. yprefs wnd focus break Figure 9 The Cut command ID defined by the Ktml_logic_doFormat function http www interaktonline com Page 20 KTML API Documentation e KIT JS STRING specifies the JavaScript custom code to be executed by the toolbar button To access the KTML object to which this button is attached to use this ktml ktml cont cnt addToolbarButton new ToolbarButton TextInsertion TextInsertion TextInsertion null null img null KT_JS_STRING this ktml insertHTML prompt Enter the text Text Figure 10 Using this ktml to access the KTML object to which a button is attached e KT_JS_FUNCTION specifies the function to be executed Example kenl comtr Cnr eleleimooloazisuicicom new Loolbars irrom e se We all null ime noll KT JS FUNCITON ewsicemineumcicd om 2 function customFunction var selececeliede keml come cme gerseleceselNece 7 selectedNode style textDecoration line througnh command specifies the command to be executed Example e IfcommandType is KT_CMD_ID then the command parameter may be InsertOrderedList ktml cont _cnt addToolbarButton new ToolbarButton AlignCenter null null paralign DECMD_JUSTIFYCENTER img null KT CMD ID JustifyCenter Figure 11 Example of command parameter when comandType is KT CMD ID e If commandiype is KT JS STRING then the comman
Download Pdf Manuals
Related Search