1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<script type="text/javascript">
_editor_url = "http://augoutdujour.fr/solea/soleadmin/editor";
_editor_lang = "fr";
</script>
<script type="text/javascript" src="./editor/htmlarea.js"></script>
<script type="text/javascript">
var editor = null;
initEditor = function() {
editor = new HTMLArea("newbio_art");
// comment the following two lines to see how customization works
editor.generate();
return false;
var cfg = editor.config; // this is the default configuration
cfg.registerButton({
id : "my-hilite",
tooltip : "Highlight text",
image : "ed_custom.gif",
textMode : false,
action : function(editor) {
editor.surroundHTML("<span class=\"hilite\">", "</span>");
},
context : 'table'
});
cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar
// BEGIN: code that adds a custom button
// uncomment it to test
var cfg = editor.config; // this is the default configuration
/*
cfg.registerButton({
id : "my-hilite",
tooltip : "Highlight text",
image : "ed_custom.gif",
textMode : false,
action : function(editor) {
editor.surroundHTML("<span class=\"hilite\">", "</span>");
}
});
*/
clickHandler = function(editor, buttonId) {
switch (buttonId) {
case "my-toc":
editor.insertHTML("<h1>Table Of Contents</h1>");
break;
case "my-date":
editor.insertHTML((new Date()).toString());
break;
case "my-bold":
editor.execCommand("bold");
editor.execCommand("italic");
break;
case "my-hilite":
editor.surroundHTML("<span class=\"hilite\">", "</span>");
break;
}
};
cfg.registerButton("my-toc", "Insert TOC", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler);
cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false,
function(editor) {
if (HTMLArea.is_ie) {
editor.insertHTML("<span class=\"sample\"> </span>");
var r = editor._doc.selection.createRange();
r.move("character", -2);
r.moveEnd("character", 2);
r.select();
} else { // Gecko/W3C compliant
var n = editor._doc.createElement("span");
n.className = "sample";
editor.insertNodeAtSelection(n);
var sel = editor._iframe.contentWindow.getSelection();
sel.removeAllRanges();
var r = editor._doc.createRange();
r.setStart(n, 0);
r.setEnd(n, 0);
sel.addRange(r);
}
}
);
/*
cfg.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false,
function(editor) {
editor.surroundHTML('<span class="hilite">', '</span>');
}
);
*/
cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+
".sample { color: green; font-family: monospace; }";
cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar
// END: code that adds a custom button
editor.generate();
}
insertHTML = function() {
var html = prompt("Enter some HTML code here");
if (html) {
editor.insertHTML(html);
}
}
highlight = function() {
editor.surroundHTML('<span style="background-color: yellow">', '</span>');
}
</script> |
