/
plugin_captioned-image.html
183 lines (169 loc) · 7.69 KB
/
plugin_captioned-image.html
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>: The Captioned Image Plugin</title>
<!-- guides styles -->
<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="stylesheets/strobe.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/overrides.style.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/overrides.print.css" media="print" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- syntax highlighting styles -->
<link rel="stylesheet" type="text/css" href="stylesheets/syntaxhighlighter/shCore.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/shThemeStrobeGuides.css" />
</head>
<body class="guide">
<header role="banner">
<div class="container">
<h1 id="logo">
<a href="http://aloha-editor.org"><img src="images/header/logo.png" height="50" alt="Aloha Editor" /></a>
</h1>
<nav role="navigation">
<ul>
<li><a href="http://aloha-editor.org/features.php" title="A shortcut for Aloha Editor features" class="new">Features</a></li>
<li><a href="http://aloha-editor.org/plugins.php" title="A list of all known Aloha Editor plugins.">Plugins</a></li>
<li class="active"><a href="http://aloha-editor.org/guides/" title="The Aloha Editor documentation">Guides</a></li>
<li><a href="http://aloha-editor.org/about.php" title="Why Aloha? Why HTML5? Lern more about Aloha Editor">About</a></li>
<li><a href="http://getsatisfaction.com/aloha_editor" title="Get help or help others">Forum</a></li>
<li><a href="http://aloha-editor.org/demos.php" title="Feel the Aloha">Try it</a></li>
</ul>
</nav>
</div>
</header>
<div id="feature">
<div class="wrapper">
<div class="feature_header">
<a href="/"><img src="images/strobe/guides.png"></a>
<h2><a href="/"></a></h2>
<p>These guides help you to make your content editable and to develop Aloha Editor.</p>
</div>
<div class="feature_sidebar">
<a href="index.html" id="guidesMenu">
Guides Index <span id="guidesArrow">▸</span>
</a>
<div id="guides" class="clearfix" style="display: none;">
<a href="index.html" class="guidesMenu">
Guides Index <span class="guidesArrow">▾</span>
</a>
<hr style="clear:both;">
<dl class="L">
<dt>Start Here</dt>
<dd><a href="using_aloha.html">Using Aloha Editor</a></dd>
<dd><a href="functional_description.html">Functional Description</a></dd>
<dd><a href="develop_aloha.html">Developing and building Aloha Editor</a></dd>
<dd>Configuring Aloha Editor</dd>
<dd>Aloha Editor and jQuery</dd>
<dd><a href="develop_aloha.html">Developing and building Aloha Editor</a></dd>
<dd><a href="require.html">Aloha Editor dependency management</a></dd>
<dd><a href="writing_plugins.html">Writing Plugins</a></dd>
<dd><a href="repository.html">Working with repositories</a></dd>
<dt>The Core</dt>
<dd><a href="core.html">The Core</a></dd>
<dt>Commands</dt>
<dd><a href="using_commands.html">Using commands</a></dd>
<dt>UI</dt>
<dd><a href="ui.html">Aloha Editor UI</a></dd>
<dd>Aloha Editor toolbar</dd>
<dd>Aloha Editor sidebar</dd>
<dd>Aloha Editor UI API</dd>
</dl>
<dl class="R">
<dt>Plugins</dt>
<dd><a href="plugins.html">Aloha Editor plugins</a></dd>
<dd><a href="plugin_block.html">Block</a></dd>
<dd><a href="plugin_image.html">Image</a></dd>
<dd><a href="plugin_contenthandler.html">Content Handler</a></dd>
<dd><a href="plugin_browser.html">Browser</a></dd>
<dd>Numerated Headers</dd>
<dd><a href="plugin_undo.html">Undo</a></dd>
<dd><a href="plugin_table.html">Table</a></dd>
<dd><a href="plugin_paste.html">Paste</a></dd>
<dd><a href="plugin_formatlesspaste.html">Formatless paste</a></dd>
<dd><a href="plugin_dom_to_xhtml.html">DOM to XHTML</a></dd>
<dd><a href="plugin_wai-lang.html">WAI Language</a></dd>
<dt>Contributing to Aloha Editor</dt>
<dd><a href="releasing.html">Releasing</a></dd>
<dd>Development Process</dd>
<dd><a href="style_guide.html">Javascript Style Guide</a></dd>
<dd><a href="documentation_guidelines.html">Documentation Guidelines</a></dd>
</dl>
</div>
</div>
</div>
</div>
<div id="container">
<div class="wrapper">
<div id="mainCol">
<div class="headerSection">
<h2>The Captioned Image Plugin</h2>
<p>After reading this guide, you will be able to:</p>
<ul>
<li>Understand what Captioned Image Plugin isand how to use it</li>
</ul>
</div>
<div class="warning"><p>This guide is currently work-in-progress.</p></div>
<h3 id="what-is-a-captioned-image">1 What is a Captioned Image?</h3>
<p><strong>Captioned Image</strong> is used in Aloha Editor to display an image with a caption (as AE Block).</p>
<div class="code_container">
<pre class="brush: xml; gutter: false; toolbar: false">
<img src="http://www.aloha-editor.org/logo/Aloha%20Editor%20HTML5%20sticker%20transparent%20256.png"
alt="Sample alt text"
data-caption="Short caption."
class="aloha-captioned-image"
/>
</pre></div><p>This will create an AE Block containing an image with a caption.</p>
<h4 id="using-configuration">1.1 Using Configuration</h4>
<div class="code_container">
<pre class="brush: javascript; gutter: false; toolbar: false">
Aloha.settings.plugins.captionedImage: {
allowLinebreak: false, // ['br', 'p'], true or false (default)
selector: 'img.aloha-captioned-image',
render: function (properties, callback, error) {
error({message: 'noop'});
},
defaultCSS: false,
captionedImageClass: 'aloha-captioned-image',
blockClass: 'mycms-captioned-image-block'
}
</pre></div>
</div>
<div id="subCol">
<h3 class="chapter"><img src="images/strobe/chapters.png" alt="" />Chapters</h3>
<ol class="chapters">
<li><a href="#what-is-a-captioned-image"><p>What is a Captioned Image?</p>
</a><ul><li><a href="#using-configuration"><p>Using Configuration</p>
</a></li></ul></li>
</ol>
</div>
</div>
</div>
<hr class="hide" />
<footer>
<div class="container">
<div class="col">
<a href="index.html"><img src="images/footer/logo.png" alt="Aloha Editor" /></a>
<p>
Templates based on <a href="https://github.com/sproutcore/sproutguides">SproutCore guides</a>.
</p>
</div>
<a href="#feature" class="top">Back To Top</a>
</div>
</footer>
<script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="javascripts/alohaEditorGuides.js"></script>
<script type="text/javascript" src="javascripts/syntaxhighlighter/shCore.js"></script>
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushRuby.js"></script>
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushCss.js"></script>
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushXml.js"></script>
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushSql.js"></script>
<script type="text/javascript" src="javascripts/syntaxhighlighter/shBrushPlain.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>