Ticket #1573: xinha.html

File xinha.html, 6.1 KB (added by guest, 8 years ago)

Reproduce code

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4  <title>Xinha test afbeelding</title>
5  <script type="text/javascript">
6        var _editor_url = '/editors/xinha/';
7        var _editor_lang = 'en'; 
8  </script>
9  <script type="text/javascript" src="/editors/xinha/XinhaCore.js"></script>
10  <script type="text/javascript">
11
12  xinha_editors = null;
13  xinha_init    = null;
14  xinha_config  = null;
15  xinha_plugins = null;
16
17  // This contains the names of textareas we will make into Xinha editors
18  xinha_init = xinha_init ? xinha_init : function()
19  {
20     /** STEP 1 ***************************************************************
21     * First, specify the textareas that shall be turned into Xinhas.
22     * For each one add the respective id to the xinha_editors array.
23     * I you want add more than on textarea, keep in mind that these
24     * values are comma seperated BUT there is no comma after the last value.
25     * If you are going to use this configuration on several pages with different
26     * textarea ids, you can add them all. The ones that are not found on the
27     * current page will just be skipped.
28     ************************************************************************/
29   
30    xinha_editors = xinha_editors ? xinha_editors :
31    [
32      'textareaId'
33    ];
34   
35    /** STEP 2 ***************************************************************
36     * Now, what are the plugins you will be using in the editors on this
37     * page.  List all the plugins you will need, even if not all the editors
38     * will use all the plugins.
39     *
40     * The list of plugins below is a good starting point, but if you prefer
41     * a simpler editor to start with then you can use the following
42     *
43     * xinha_plugins = xinha_plugins ? xinha_plugins : [ ];
44     *
45     * which will load no extra plugins at all.
46     ************************************************************************/
47
48    xinha_plugins = xinha_plugins ? xinha_plugins :
49    [
50     'CharacterMap',
51     'ContextMenu',
52     'ListType',
53     'Stylist',
54     'Linker',
55     'SuperClean',
56     'TableOperations'
57    ];
58   
59           // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
60           if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
61
62
63    /** STEP 3 ***************************************************************
64     * We create a default configuration to be used by all the editors.
65     * If you wish to configure some of the editors differently this will be
66     * done in step 5.
67     *
68     * If you want to modify the default config you might do something like this.
69     *
70     *   xinha_config = new Xinha.Config();
71     *   xinha_config.width  = '640px';
72     *   xinha_config.height = '420px';
73     *
74     *************************************************************************/
75
76     xinha_config = xinha_config ? xinha_config() : new Xinha.Config();
77     
78    //this is the standard toolbar, feel free to remove buttons as you like
79    xinha_config.toolbar =
80    [
81      ["popupeditor"],
82      ["separator","formatblock","fontname","fontsize","bold","italic","underline","strikethrough"],
83      ["separator","forecolor","hilitecolor","textindicator"],
84      ["separator","subscript","superscript"],
85      ["linebreak","separator","justifyleft","justifycenter","justifyright","justifyfull"],
86      ["separator","insertorderedlist","insertunorderedlist","outdent","indent"],
87      ["separator","inserthorizontalrule","createlink","insertimage","inserttable"],
88      ["linebreak","separator","undo","redo","selectall","print"], (Xinha.is_gecko ? [] : ["cut","copy","paste","overwrite","saveas"]),
89      ["separator","killword","clearfonts","removeformat","toggleborders","splitblock","lefttoright", "righttoleft"],
90      ["separator","htmlmode","showhelp","about"]
91    ];
92
93         
94     // To adjust the styling inside the editor, we can load an external stylesheet like this
95     // NOTE : YOU MUST GIVE AN ABSOLUTE URL
96   
97     xinha_config.pageStyleSheets = [ _editor_url + "examples/full_example.css" ];
98
99    /** STEP 4 ***************************************************************
100     * We first create editors for the textareas.
101     *
102     * You can do this in two ways, either
103     *
104     *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
105     *
106     * if you want all the editor objects to use the same set of plugins, OR;
107     *
108     *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
109     *   xinha_editors.myTextArea.registerPlugins(['Stylist']);
110     *   xinha_editors.anotherOne.registerPlugins(['CSS','SuperClean']);
111     *
112     * if you want to use a different set of plugins for one or more of the
113     * editors.
114     ************************************************************************/
115
116    xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
117
118    /** STEP 5 ***************************************************************
119     * If you want to change the configuration variables of any of the
120     * editors,  this is the place to do that, for example you might want to
121     * change the width and height of one of the editors, like this...
122     *
123     *   xinha_editors.myTextArea.config.width  = '640px';
124     *   xinha_editors.myTextArea.config.height = '480px';
125     *
126     ************************************************************************/
127
128
129    /** STEP 6 ***************************************************************
130     * Finally we "start" the editors, this turns the textareas into
131     * Xinha editors.
132     ************************************************************************/
133
134    Xinha.startEditors(xinha_editors);
135  }
136
137  Xinha._addEvent(window,'load', xinha_init); // this executes the xinha_init function on page load
138                                              // and does not interfere with window.onload properties set by other scripts
139
140  </script>
141</head>
142<body>
143  <p>
144    <textarea id="textareaId" name="textareaId" style="width: 400px; height: 400px;">
145        &lt;a href=&quot;/my/link.html&quot; id=&quot;player&quot; style=&quot;width: 200px; height: 200px;&quot;&gt;link text&lt;/a&gt;
146    </textarea>
147  </p>
148</body>
149</html>