Skip to Content

Changes for page ImageEditorService

Last modified by Thomas Coelho (local) on 2023/07/26 11:23
From version 1.1
edited by Thomas Coelho (local)
on 2022/05/27 15:18
Change comment: Install extension [org.xwiki.contrib:application-ckeditor-ui/1.63.1]
To version 5.1
edited by Thomas Coelho (local)
on 2023/07/26 11:23
Change comment: Install extension [org.xwiki.platform:xwiki-platform-ckeditor-ui/15.5]

Summary

Details

Page properties
Content
... ... @@ -51,7 +51,7 @@
51 51   #set ($discard = $xwiki.linkx.use($services.webjars.url('selectize.js', 'css/selectize.bootstrap3.css'),
52 52   {'type': 'text/css', 'rel': 'stylesheet'}))
53 53   #set ($discard = $xwiki.ssfx.use('uicomponents/suggest/xwiki.selectize.css', true))
54 - #set ($discard = $xwiki.jsx.use('CKEditor.ImageEditorService'))
54 + #set ($discard = $xwiki.ssx.use('CKEditor.ImageEditorService'))
55 55   <select id="imageStyles"></select>
56 56   </dd>
57 57   #end
... ... @@ -100,13 +100,22 @@
100 100   <dd>
101 101   <label>
102 102   $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.size.width.label'))
103 - <input type="number" name="imageWidth" id="imageWidth" />
103 + <input type="text" name="imageWidth" id="imageWidth" />
104 104   </label>
105 105   <label>
106 106   $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.size.height.label'))
107 - <input type="number" name="imageHeight" id="imageHeight" />
107 + <input type="text" name="imageHeight" id="imageHeight" />
108 108   </label>
109 + <button type="button" class="btn btn-default image-size-lock image-size-locked">
110 + $services.icon.renderHTML('lock')
111 + </button>
112 + <button type="button" class="btn btn-default image-size-lock image-size-unlocked hidden">
113 + $services.icon.renderHTML('unlock')
114 + </button>
109 109   </dd>
116 + <dd class='hidden has-warning'>
117 + <span class="help-block outscaleWarning"></span>
118 + </dd>
110 110   <dt>
111 111   <label for="imageBorder">
112 112   $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.border.label'))
... ... @@ -126,22 +126,22 @@
126 126   $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.hint'))
127 127   </span>
128 128   </dt>
129 - <dd>
138 + <dd class="alignments">
130 130   <label>
131 - <input type="radio" name="alignment" value="none"/>
132 - $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.none'))
140 + #set ($noneOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.none')))
141 + <input type="radio" name="alignment" value="none"/>$noneOptionLabel
133 133   </label>
134 134   <label>
135 - <input type="radio" name="alignment" value="start"/>
136 - $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.start'))
144 + #set ($startOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.start')))
145 + <input type="radio" name="alignment" value="start"/>$startOptionLabel
137 137   </label>
138 138   <label>
139 - <input type="radio" name="alignment" value="center"/>
140 - $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.center'))
148 + #set ($centerOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.center')))
149 + <input type="radio" name="alignment" value="center"/>$centerOptionLabel
141 141   </label>
142 142   <label>
143 - <input type="radio" name="alignment" value="end"/>
144 - $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.end'))
152 + #set ($endOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.end')))
153 + <input type="radio" name="alignment" value="end"/>$endOptionLabel
145 145   </label>
146 146   </dd>
147 147   <dt>
... ... @@ -159,10 +159,6 @@
159 159   </form>
160 160   </div>
161 161   </div>
162 - <input type="hidden" name="defaultImageStylesRestURL" id="defaultImageStylesRestURL"
163 - value="$services.imageStyle.getDefaultImageStyleRestPath()" />
164 - <input type="hidden" name="imageStylesRestURL" id="imageStylesRestURL"
165 - value="$services.imageStyle.getImageStylesRestPath()" />
166 166  </div>
167 167  {{/html}}
168 168  #end
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,11 @@
1 +#advanced .image-size-lock {
2 + margin-top: -2px;
3 +}
4 +
5 +#advanced .alignments label {
6 + margin-right: 1em;
7 +}
8 +
9 +#standard .xform, #advanced .xform {
10 + margin-top: floor(@font-size-base * 1.4);
11 +}
Use this extension
... ... @@ -1,0 +1,1 @@
1 +onDemand
Parse content
... ... @@ -1,0 +1,1 @@
1 +No
Content Type
... ... @@ -1,0 +1,1 @@
1 +LESS
XWiki.UIExtensionClass[0]
Asynchronous rendering
... ... @@ -1,0 +1,1 @@
1 +No
Extension Point ID
... ... @@ -1,0 +1,1 @@
1 +org.xwiki.platform.template.header.after
Cached
... ... @@ -1,0 +1,1 @@
1 +No
Extension Scope
... ... @@ -1,0 +1,1 @@
1 +wiki
Extension ID
... ... @@ -1,0 +1,1 @@
1 +org.xwiki.platform.ckeditor.imageEditorService.template.header.after
Executed Content
... ... @@ -1,0 +1,10 @@
1 +{{velocity}}
2 +{{html}}
3 +<div class="hidden">
4 +<input type="hidden" name="defaultImageStylesRestURL" id="defaultImageStylesRestURL"
5 + value="$escapetool.xml($services.imageStyle.getDefaultImageStyleRestPath())" />
6 +<input type="hidden" name="imageStylesRestURL" id="imageStylesRestURL"
7 + value="$escapetool.xml($services.imageStyle.getImageStylesRestPath())" />
8 +</div>
9 +{{/html}}
10 +{{/velocity}}