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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
<html>
<!--
Copyright 2009 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<!--
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>goog.editor Demo</title>
<script src="../../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.editor.Command');
goog.require('goog.editor.Field');
goog.require('goog.editor.plugins.BasicTextFormatter');
goog.require('goog.editor.plugins.EnterHandler');
goog.require('goog.editor.plugins.HeaderFormatter');
goog.require('goog.editor.plugins.LinkBubble');
goog.require('goog.editor.plugins.LinkDialogPlugin');
goog.require('goog.editor.plugins.ListTabHandler');
goog.require('goog.editor.plugins.LoremIpsum');
goog.require('goog.editor.plugins.RemoveFormatting');
goog.require('goog.editor.plugins.SpacesTabHandler');
goog.require('goog.editor.plugins.UndoRedo');
goog.require('goog.ui.editor.DefaultToolbar');
goog.require('goog.ui.editor.ToolbarController');
</script>
<link rel="stylesheet" href="../css/demo.css">
<link rel="stylesheet" href="../../css/button.css" />
<link rel="stylesheet" href="../../css/dialog.css" />
<link rel="stylesheet" href="../../css/linkbutton.css" />
<link rel="stylesheet" href="../../css/menu.css">
<link rel="stylesheet" href="../../css/menuitem.css">
<link rel="stylesheet" href="../../css/menuseparator.css">
<link rel="stylesheet" href="../../css/tab.css" />
<link rel="stylesheet" href="../../css/tabbar.css" />
<link rel="stylesheet" href="../../css/toolbar.css" />
<link rel="stylesheet" href="../../css/colormenubutton.css" />
<link rel="stylesheet" href="../../css/palette.css" />
<link rel="stylesheet" href="../../css/colorpalette.css" />
<link rel="stylesheet" href="../../css/editor/bubble.css" />
<link rel="stylesheet" href="../../css/editor/dialog.css" />
<link rel="stylesheet" href="../../css/editor/linkdialog.css" />
<link rel="stylesheet" href="../../css/editortoolbar.css" />
<style>
#editMe {
width: 600px;
height: 300px;
background-color: white;
border: 1px solid grey;
}
</style>
</head>
<body>
<h1>goog.editor Demo</h1>
<p>This is a demonstration of a editable field, with installed plugins,
hooked up to a toolbar.</p>
<br>
<div id='toolbar' style='width:602px'></div>
<div id='editMe'></div>
<hr>
<p><b>Current field contents</b>
(updates as contents of the editable field above change):<br>
<textarea id="fieldContents" style="height:100px;width:400px;"></textarea><br>
<input type="button" value="Set Field Contents"
onclick="myField.setHtml(false, goog.dom.getElement('fieldContents').value);" />
(Use to set contents of the editable field to the contents of this textarea)
</p>
<script>
function updateFieldContents() {
goog.dom.getElement('fieldContents').value = myField.getCleanContents();
}
// Create an editable field.
var myField = new goog.editor.Field('editMe');
// Create and register all of the editing plugins you want to use.
myField.registerPlugin(new goog.editor.plugins.BasicTextFormatter());
myField.registerPlugin(new goog.editor.plugins.RemoveFormatting());
myField.registerPlugin(new goog.editor.plugins.UndoRedo());
myField.registerPlugin(new goog.editor.plugins.ListTabHandler());
myField.registerPlugin(new goog.editor.plugins.SpacesTabHandler());
myField.registerPlugin(new goog.editor.plugins.EnterHandler());
myField.registerPlugin(new goog.editor.plugins.HeaderFormatter());
myField.registerPlugin(
new goog.editor.plugins.LoremIpsum('Click here to edit'));
myField.registerPlugin(
new goog.editor.plugins.LinkDialogPlugin());
myField.registerPlugin(new goog.editor.plugins.LinkBubble());
// Specify the buttons to add to the toolbar, using built in default buttons.
var buttons = [
goog.editor.Command.BOLD,
goog.editor.Command.ITALIC,
goog.editor.Command.UNDERLINE,
goog.editor.Command.FONT_COLOR,
goog.editor.Command.BACKGROUND_COLOR,
goog.editor.Command.FONT_FACE,
goog.editor.Command.FONT_SIZE,
goog.editor.Command.LINK,
goog.editor.Command.UNDO,
goog.editor.Command.REDO,
goog.editor.Command.UNORDERED_LIST,
goog.editor.Command.ORDERED_LIST,
goog.editor.Command.INDENT,
goog.editor.Command.OUTDENT,
goog.editor.Command.JUSTIFY_LEFT,
goog.editor.Command.JUSTIFY_CENTER,
goog.editor.Command.JUSTIFY_RIGHT,
goog.editor.Command.SUBSCRIPT,
goog.editor.Command.SUPERSCRIPT,
goog.editor.Command.STRIKE_THROUGH,
goog.editor.Command.REMOVE_FORMAT
];
var myToolbar = goog.ui.editor.DefaultToolbar.makeToolbar(buttons,
goog.dom.getElement('toolbar'));
// Hook the toolbar into the field.
var myToolbarController =
new goog.ui.editor.ToolbarController(myField, myToolbar);
// Watch for field changes, to display below.
goog.events.listen(myField, goog.editor.Field.EventType.DELAYEDCHANGE,
updateFieldContents);
myField.makeEditable();
updateFieldContents();
</script>
</body>
</html>
|
