16 | | {{{ |
17 | | #!text/html |
18 | | <script type="text/javascript"> |
19 | | _editor_url = "/xinha/"; |
20 | | _editor_lang = "en"; |
21 | | </script> |
22 | | <script type="text/javascript" src="/xinha/XinhaCore.js"></script> |
23 | | }}} |
24 | | |
25 | | == Form preparation == |
26 | | The TEXTAREA that's need to be turned into a Xinha editor, absoluty require an ID, uniq ID obviously. |
27 | | |
28 | | {{{ |
29 | | #!text/html |
30 | | <form> |
31 | | <textarea id="description"></texarea> |
32 | | <form> |
33 | | }}} |
34 | | |
35 | | == Editor preparation == |
36 | | === Generic variable creation === |
37 | | Because it is usually required to manipulate Xinha by javascript, it is needed to create a variable to hold the object created. |
38 | | |
39 | | === Init function === |
40 | | It is needed to make a function to start the editor that we will trigger once the document is loaded. |
41 | | In this function, we will do basic initialisation such as creation of the configuration object and editor start. |
42 | | |
43 | | === Xinha start === |
44 | | Once the document is loaded, the init function must be triggered. There is quite a lot of methods to do it, the two easiest for our first example here are : |
45 | | |
46 | | {{{ |
47 | | #!text/html |
48 | | <body onload="initXinha();"> |
49 | | }}} |
50 | | |
51 | | or the method we will use here |
52 | | |
53 | | |
54 | | {{{ |
55 | | #!text/x-javascript |
56 | | window.onload = initXinha; |
57 | | }}} |
58 | | |
59 | | Which finally give the following result. |
60 | | |
61 | | |
62 | | {{{ |
63 | | #!text/html |
64 | | <script type="text/javascript"> |
65 | | var editeur = null; |
66 | | function initXinha() { |
67 | | var config = new Xinha.Config(); |
68 | | editeur = Xinha.makeEditors(['description'], config); |
69 | | Xinha.startEditors(editeur); |
70 | | } |
71 | | window.onload = initXinha; |
72 | | </script> |
73 | | }}} |
74 | | |
75 | | == Complete source code == |
76 | | |
77 | | {{{ |
78 | | #!text/html |
79 | | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> |
80 | | <html> |
81 | | <head> |
82 | | <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
83 | | <title>Sample</title> |
84 | | <script type="text/javascript"> |
85 | | _editor_url = "/xinha/"; |
86 | | _editor_lang = "en"; |
87 | | </script> |
88 | | <script type="text/javascript" src="/xinha/XinhaCore.js"></script> |
89 | | <script type="text/javascript"> |
90 | | var editeur = null; |
91 | | function initXinha() { |
92 | | var config = new Xinha.Config(); |
93 | | editeur = Xinha.makeEditors(['description'], config); |
94 | | Xinha.startEditors(editeur); |
95 | | } |
96 | | window.onload = initXinha; |
97 | | </script> |
98 | | </head> |
99 | | <body> |
100 | | |
101 | | <form> |
102 | | <textarea id="description"></textarea> |
103 | | <form> |
104 | | |
105 | | </body> |
106 | | </html> |
107 | | }}} |
| 12 | Ok there's a lot more you CAN do if you want, read the [wiki:Documentation/NewbieGuide] if you want to learn how. |