summernote-image-attributes.js (33940B)
1 /** 2 * Summernote Image Attributes 3 * https://github.com/StudioJunkyard/summernote-image-attributes 4 */ 5 (function(factory){ 6 if(typeof define==='function'&&define.amd){ 7 define(['jquery'],factory); 8 }else if(typeof module==='object'&&module.exports){ 9 module.exports=factory(require('jquery')); 10 }else{ 11 factory(window.jQuery); 12 } 13 }(function($){ 14 var readFileAsDataURL=function(file){ 15 return $.Deferred(function(deferred){ 16 $.extend(new FileReader(),{ 17 onload:function(e){ 18 var sDataURL=e.target.result; 19 deferred.resolve(sDataURL); 20 }, 21 onerror:function(){ 22 deferred.reject(this); 23 } 24 }).readAsDataURL(file); 25 }).promise(); 26 }; 27 $.extend(true,$.summernote.lang,{ 28 'en-US':{ /* English */ 29 imageAttributes:{ 30 dialogTitle:'Image Attributes', 31 tooltip:'Image Attributes', 32 pluginImageTitle:'Image Attributes', 33 pluginLinkTitle:'Link Attributes', 34 title:'Title', 35 src:'Source', 36 srcHelp:'Selecting an image will replace existing image with an Inlined Image.', 37 alt:'Alt', 38 class:'Class', 39 classSelect:'Select Class', 40 style:'Style', 41 role:'Role', 42 href:'URL', 43 target:'Target', 44 linkClass:'Class', 45 linkRole:'Role', 46 rel:'Rel', 47 relBlank:'Do not use Rel Attribute', 48 relAlternate:'Alternate: Links to an alternate version of the document', 49 relAuthor:'Author: Links to the Author of the Document', 50 relBookmark:'Bookmark: Permanent URL used for Bookmarking', 51 relHelp:'Help: Links to a Help Document', 52 relLicense:'License: Links to copyright information for the document', 53 relNext:'Next: The next document in a selection', 54 relNofollow:'NoFollow: Links to an unendorsed document, like a paid link, also stops Search Engines following this link', 55 relNoreferrer:'NoReferrer: Specifies that the browser should not send a HTTP Header', 56 relPrefetch:'PreFetch: Specifies that the target document should be cached', 57 relPrev:'Prev: The previous document in a selection', 58 relSearch:'Search: Links to a search tool for the document', 59 relTag:'Tag: A tag (Keyword) for the current document' 60 } 61 }, 62 'es-ES':{ /* Spanish */ 63 imageAttributes:{ 64 dialogTitle:'Propiedades de la Imagen', 65 tooltip:'Propiedades de la Imagen', 66 pluginImageTitle:'Atributos de la Imagen', 67 pluginLinkTitle:'Atributos del Enlace', 68 title:'Titulo', 69 src:'Fuente', 70 srcHelp:'La selección de una imagen reemplazará la imagen existente con una imagen Inline.', 71 alt:'Alternativo', 72 class:'Clases', 73 classSelect:'Selecciona Forma', 74 style:'Estilo', 75 role:'Papel', 76 href:'URL', 77 target:'Destino', 78 linkClass:'Clase', 79 linkRole:'Papel', 80 rel:'Rel', 81 relBlank:'No usar atributo Rel', 82 relAlternate:'Alternate: Enlaza a una versión alternativa del documento', 83 relAuthor:'Author: Enlaza al autor del documento', 84 relBookmark:'Bookmark: URL permanente utilizada para enlazar', 85 relHelp:'Help: Enlaza a un documento de Ayuda', 86 relLicense:'License: Enlaza a un documento de información de Copyright', 87 relNext:'Next: Enlaza al siguiente documento en una selección', 88 relNofollow:'NoFollow: Enlaza a un documento no confirmado, como un enlace de pago, también evita que los buscadores sigan este enlace', 89 relNoreferrer:'NoReferrer: Specifies that the browser should not send a HTTP Header', 90 relPrefetch:'PreFetch: Specifies that the target document should be cached', 91 relPrev:'Prev: Enlaza al documento anterior en una selección', 92 relSearch:'Search: Enlaza a una herramienta de búsqueda para el documento', 93 relTag:'Tag: Un etiqueta (palabra clave) para el documento actual' 94 } 95 }, 96 'pt-BR':{ /* Spanish */ 97 imageAttributes:{ 98 dialogTitle:'Propriedades da Imagem', 99 tooltip:'Propriedades da Imagem', 100 pluginImageTitle:'Propriedades da Imagem', 101 pluginLinkTitle:'Propriedades do Link', 102 title:'Título', 103 src:'Fonte', 104 srcHelp:'Selecionar uma imagem irá substituir a imagem existente com uma imagem inline.', 105 alt:'Alt', 106 class:'Class', 107 classSelect:'Selecione a Classe', 108 style:'Estilo', 109 role:'Papel', 110 href:'URL', 111 target:'Destino', 112 linkClass:'Classe', 113 linkRole:'Papel', 114 rel:'Rel', 115 relBlank:'Não use o atribudo Rel', 116 relAlternate:'Alternate: Links para uma versão alternativa do documento', 117 relAuthor:'Author: Links para o autor do documento', 118 relBookmark:'Bookmark: URL permanente usada para favoritos', 119 relHelp:'Help: Links para um documento de ajuda', 120 relLicense:'License: Links para a informação de copyright do documento', 121 relNext:'Next: O próximo documento em uma seleção', 122 relNofollow:'NoFollow: Links para um documento não confirmado, como um link pago, também impede mecanismos de busca de seguir esse link', 123 relNoreferrer:'NoReferrer: Especifica que o navegador não deve enviar um cabeçalho HTTP', 124 relPrefetch:'PreFetch: Especifica que o documento de destino deve ser cacheado', 125 relPrev:'Prev: O documento anterior em uma seleção', 126 relSearch:'Search: Links para um mecanismos de busca para o documento', 127 relTag:'Tag: Uma etiqueta (palavra-chave) para o documento atual' 128 } 129 }, 130 'fr-FR':{ /* French */ 131 imageAttributes:{ 132 dialogTitle:'Attributs de l\'image', 133 tooltip:'Attributs de l\'image', 134 pluginImageTitle:'Attributs de l\'image', 135 pluginLinkTitle:'Attributs du lien', 136 title:'Titre', 137 src:'La source', 138 srcHelp:'La sélection d\'une image remplacera l\'image existante par une Image Inline.', 139 alt:'Alt', 140 class:'Class CSS', 141 classSelect:'Choisir une Class', 142 style:'Style', 143 role:'Rôle', 144 href:'URL', 145 target:'Cible', 146 linkClass:'Class CSS du lien', 147 linkRole:'Rôle', 148 rel:'Lien Rel', 149 relBlank:'Ne pas utiliser d\'attribut Rel', 150 relAlternate:'Alternate: Lien vers une autre version du document', 151 relAuthor:'Author: Lien vers l\'auteur du document', 152 relBookmark:'Bookmark: Lien permant utilisé pour les signets', 153 relHelp:'Help: Lien vers un document d\'aide', 154 relLicense:'License: Lien vers les informations de droits d\'auteur du document', 155 relNext:'Next: La page suivante de ce document', 156 relNofollow:'NoFollow: Empêcher les moteurs de recherche de suivre ce lien', 157 relNoreferrer:'NoReferrer: Précise que le navigateur ne doit pas envoyer d\'entête HTTP', 158 relPrefetch:'PreFetch: Précise que le document cible doit être mis en cache', 159 relPrev:'Prev: La page précédente de ce document', 160 relSearch:'Search: Lien vers un outil de recherche du document', 161 relTag:'Tag: Mot-clé du document' 162 } 163 }, 164 'zh-TW':{ /* Chinese */ 165 imageAttributes:{ 166 dialogTitle:'圖片提示', 167 tooltip:'圖片提示', 168 pluginImageTitle:'圖片屬性', 169 pluginLinkTitle:'連結屬性', 170 title:'標題', 171 src:'資源', 172 srcHelp:'選擇圖像將用內聯圖像替換現有圖像.', 173 alt:'圖片說明', 174 class:'类', 175 classSelect:'選擇 类', 176 style:'样式', 177 role:'角色', 178 href:'URL', 179 target:'目標', 180 linkClass:'連結樣式', 181 linkRole:'角色', 182 rel:'描述', 183 relBlank:'不使用連結說明', 184 rel:'不使用鏈結說明', 185 relBlank:'不使用鏈結說明', 186 relAlternate:'替代說明: 連至替代說明文件', 187 relAuthor:'作者: 連至來源位置', 188 relBookmark:'書籤: 提供加入書籤', 189 relHelp:'幫助: 連結至幫助文件', 190 relLicense:'版權: 連結至版權宣告頁面', 191 relNext:'下一步: 連結至下一個被選擇的頁面', 192 relNofollow:'不追蹤: 連結設置取消追蹤選項, 例如付費頁面, 並且禁止搜尋引擎追蹤該頁面', 193 relNoreferrer:'NoReferrer: 指定發送時取消 HTTP 的開頭', 194 relPrefetch:'預存: 指定該頁面啟用預存瀏覽', 195 relPrev:'上一步: 上一個被選擇的頁面', 196 relSearch:'搜尋: 連至搜尋文件', 197 relTag:'標籤: 為該文件設定標籤(關鍵字)' 198 } 199 }, 200 'it-IT':{ /* Italian */ 201 imageAttributes:{ 202 dialogTitle:'Attributi Immagine', 203 tooltip:'Attributi Immagine', 204 pluginImageTitle:'Attributi Immagine', 205 pluginLinkTitle:'Attributi Collegamento', 206 title:'Titolo', 207 src:'Fonte', 208 srcHelp:'elezione di un\'immagine sostituirà immagine esistente con un inline Immagine.', 209 alt:'Alt', 210 class:'Classe', 211 classSelect:'Seleziona Classe', 212 style:'Stile', 213 role:'Ruolo', 214 href:'URL', 215 target:'Bersaglio', 216 linkClass:'Classe per il collegamento', 217 linkRole:'Ruolo', 218 rel:'Link Rel', 219 relBlank:'Non usare attributo Rel', 220 relAlternate:'Alternate: Collegamento ad una versione alternativa del documento', 221 relAuthor:'Author: Collegamento all\'autore del documento', 222 relBookmark:'Bookmark: URL permanente per i preferiti', 223 relHelp:'Help: Collegamento ad una pagina di aiuto per questo documento', 224 relLicense:'License: Collegamento alle informazioni sul copyright di questo docuemnto', 225 relNext:'Next: Pagina successiva di questo documento', 226 relNofollow:'NoFollow: Impedisce ai motori di ricerca di seguire questo collegamento', 227 relNoreferrer:'NoReferrer: Specifica al browser di non inviare Header HTTP', 228 relPrefetch:'PreFetch: Specifica che il documento di destinazione deve essere memorizzato nella cache', 229 relPrev:'Prev: Pagina precedente di questo documento', 230 relSearch:'Search: Collegamenti a uno strumento di ricerca per questo documento', 231 relTag:'Tag: Un tag (parola chiave) per questo documento' 232 } 233 }, 234 'de-DE':{ /* German */ 235 imageAttributes:{ 236 dialogTitle:'Bild Eigenschaften', 237 tooltip:'Bild Eigenschaften', 238 pluginImageTitle:'Bild Eigenschaften', 239 pluginLinkTitle:'Link Eigenschaften', 240 title:'Titel', 241 src:'Quelle', 242 srcHelp:'Wenn Sie ein Bild auswählen, wird das bestehende Bild durch ein Inlined Image ersetzt.', 243 alt:'Alt Tag', 244 class:'CSS Klasse', 245 classSelect:'wähle CSS Klasse', 246 style:'Stil', 247 role:'Rolle', 248 href:'URL', 249 target:'Ziel (target)', 250 linkClass:'CSS Link Klasse', 251 linkRole:'Ruolo', 252 rel:'Link Beziehung (Relation)', 253 relBlank:'Keine Link Beziehung', 254 relAlternate:'Alternate: Link zu einer alternativen Version', 255 relAuthor:'Author: Link zum Autor des Artikels', 256 relBookmark:'Bookmark: Permanent URL für Lesezeichen', 257 relHelp:'Help: Link zur Hilfe', 258 relLicense:'License: Link zu Urheber und Lizenzinformationen', 259 relNext:'Next: Die nächste aktive Seite', 260 relNofollow:'NoFollow: Suchmaschinen sollen dem Link nicht folgen', 261 relNoreferrer:'NoReferrer: Browser soll keinen HTTP Header senden', 262 relPrefetch:'PreFetch: Gibt an, dass die Seite gecacht werden soll', 263 relPrev:'Prev: Die zuletzt aktive Seite', 264 relSearch:'Search: Link zur Dokumentsuche', 265 relTag:'Tag: Ein Schlüsselwort (keyword) für diese Seite' 266 } 267 }, 268 'tr-TR':{ /* Turkish */ 269 imageAttributes:{ 270 dialogTitle:'Resim Özellikleri', 271 tooltip:'Resim Özellikleri', 272 pluginImageTitle:'Resim Özellikleri', 273 pluginLinkTitle:'Bağlantı Özellikleri', 274 title:'Başlık', 275 src:'Kaynak', 276 srcHelp:'Bir görüntüyü seçmek, var olan resmi Inlined Image ile değiştirecektir.', 277 alt:'Alt. Metin', 278 class:'Sınıf', 279 classSelect:'Sınıf Seçin', 280 style:'Stil', 281 role:'Rol', 282 href:'URL', 283 target:'Hedef', 284 linkClass:'Bağlantı Sınıfı', 285 linkRole:'Rol', 286 rel:'Bağlantı İlişkisi(Rel)', 287 relBlank:'İlişki özelliğini kullanma', 288 relAlternate:'Alternatif: Belgenin farklı bir versiyonuna bağlantı', 289 relAuthor:'Yazar: Belgenin yazarına bağlantı', 290 relBookmark:'Yer İmi: Yer İmi eklemek için kalıcı adres', 291 relHelp:'Yardım: Yardım dökümanına giden bağlantı', 292 relLicense:'Lisans: Belgenin telif hakkı bilgisine bağlantı', 293 relNext:'Sonraki: Sıradaki belgeye giden bağlantı', 294 relNofollow:'Takip Etme (NoFollow): Arama motorlarının bu bağlantıyı takip etmemesini sağlar', 295 relNoreferrer:'Referanssız (NoReferrer): Tarayıcının bu bağlantıya referans adresi göndermemesi gerektiğini belirtir', 296 relPrefetch:'ÖnBellek(PreFetch): Hedef bağlantının ön belleğe alınması gerektiğini belirtir', 297 relPrev:'Önceki: Önceki belgeye giden bağlantı', 298 relSearch:'Arama: Belge için bir arama aracına bağlantı olduğunu belirtir.', 299 relTag:'Etiket: Belge için bir etiket olduğunu belirtir' 300 } 301 } 302 }); 303 $.extend($.summernote.options,{ 304 imageDialogLayout:'default', /* default|horizontal */ 305 imageAttributes:{ 306 icon:'<i class="note-icon-pencil"/>', 307 removeEmpty:true, 308 }, 309 displayFields:{ 310 imageBasic:true, 311 imageExtra:false, 312 linkBasic:true, 313 linkExtra:false 314 } 315 }); 316 $.extend($.summernote.plugins,{ 317 'imageAttributes':function(context){ 318 var self=this; 319 var ui=$.summernote.ui; 320 var $note=context.layoutInfo.note; 321 var $editor=context.layoutInfo.editor; 322 var $editable=context.layoutInfo.editable; 323 var options=context.options; 324 var lang=options.langInfo; 325 var imageLimitation=''; 326 if(options.maximumImageFileSize){ 327 var unit=Math.floor(Math.log(options.maximumImageFileSize)/Math.log(1024)); 328 var readableSize=(options.maximumImageFileSize/Math.pow(1024,unit)).toFixed(2)*1+' '+' KMGTP'[unit]+'B'; 329 imageLimitation='<small>'+lang.image.maximumFileSize+' : '+readableSize+'</small>'; 330 } 331 context.memo('button.imageAttributes',function(){ 332 var button=ui.button({ 333 contents:options.imageAttributes.icon, 334 tooltip:lang.imageAttributes.tooltip, 335 click:function(e){ 336 context.invoke('imageAttributes.show'); 337 } 338 }); 339 return button.render(); 340 }); 341 this.initialize=function(){ 342 var $container=options.dialogsInBody?$(document.body):$editor; 343 if(options.imageDialogLayout=='horizontal'){ 344 var body='<dl class="dl-horizontal">'; 345 if (options.displayFields.imageBasic) { 346 body += '<dt><label for="note-image-attributes-title">'+lang.imageAttributes.title+'</label></dt>'+ 347 '<dd><input type="text" id="note-image-attributes-title" class="note-image-attributes-title form-control"></dd>'+ 348 '<dt><label for="note-image-attributes-src">'+lang.imageAttributes.src+'</label></dt>'+ 349 '<dd><input type="text" id="note-image-attributes-src" class="note-image-attributes-src form-control"></dd>'+ 350 '<dt><label for="note-group-select-from-files"></label></dt>'+ 351 '<dd><input type="file" id="note-group-select-from-files" name="file" accept="image/*" class="note-image-input form-control">'+imageLimitation+'</dd>'+ 352 '<dt></dt>'+ 353 '<dd><small class="help-block">'+lang.imageAttributes.srcHelp+'</small></dd>'+ 354 '<dt><label for="note-image-attributes-alt">'+lang.imageAttributes.alt+'</label></dt>'+ 355 '<dd><input type="text" id="note-image-attributes-alt" class="note-image-attributes-alt form-control"></dd>'; 356 } 357 if (options.displayFields.imageExtra) { 358 body += '<dt><label for="note-image-attributes-class">'+lang.imageAttributes.class+'</label></dt>'+ 359 '<dd><input type="text" id="note-image-attributes-class" class="note-image-attributes-class form-control"></dd>'+ 360 '<dt><label for="note-image-attributes-style">'+lang.imageAttributes.style+'</label></dt>'+ 361 '<dd><input type="text" id="note-image-attributes-style" class="note-image-attributes-style form-control"></dd>'+ 362 '<dt><label for="note-image-attributes-role">'+lang.imageAttributes.role+'</label></dt>'+ 363 '<dd><input type="text" id="note-image-attributes-role" class="note-image-attributes-role form-control"></dd>'; 364 } 365 body += '</dl>'+ 366 '<hr>'; 367 if (options.displayFields.linkBasic) { 368 body += '<h4>'+lang.imageAttributes.pluginLinkTitle+'</h4>'+ 369 '<dl class="dl-horizontal">'+ 370 '<dt><label for="note-image-attributes-link-href">'+lang.imageAttributes.href+'</label></dt>'+ 371 '<dd><input type="text" id="note-image-attributes-link-href" class="note-image-attributes-href form-control"></dd>'+ 372 '<dt><label for="note-image-attributes-link-target">'+lang.imageAttributes.target+'</label></dt>'+ 373 '<dd><select id="note-image-attributes-link-target" class="note-image-attributes-target form-control">'+ 374 '<option value="_self">Self</option>'+ 375 '<option value="_blank">Blank</option>'+ 376 '<option value="_top">Top</option>'+ 377 '<option value="_parent">Parent</option>'+ 378 '</select></dd>'; 379 } 380 if (options.displayFields.linkExtra) { 381 body += '<dt><label for="note-image-attributes-link-class">'+lang.imageAttributes.linkClass+'</label></dt>'+ 382 '<dd><input type="text" id="note-image-attributes-link-class" class="note-image-attributes-link-class form-control"></dd>'+ 383 '<dt><label for="note-image-attributes-link-rel">'+lang.imageAttributes.rel+'</label></dt>'+ 384 '<dd><select id="note-image-attributes-link-rel" class="note-image-attributes-link-rel form-control">'+ 385 '<option value="">'+lang.imageAttributes.relBlank+'</option>'+ 386 '<option value="alternate">'+lang.imageAttributes.relAlternate+'</option>'+ 387 '<option value="author">'+lang.imageAttributes.relAuthor+'</option>'+ 388 '<option value="bookmark">'+lang.imageAttributes.relBookmark+'</option>'+ 389 '<option value="help">'+lang.imageAttributes.relHelp+'</option>'+ 390 '<option value="license">'+lang.imageAttributes.relLicense+'</option>'+ 391 '<option value="next">'+lang.imageAttributes.relNext+'</option>'+ 392 '<option value="nofollow">'+lang.imageAttributes.relNofollow+'</option>'+ 393 '<option value="noreferrer">'+lang.imageAttributes.relNoreferrer+'</option>'+ 394 '<option value="prefetch">'+lang.imageAttributes.relPrefetch+'</option>'+ 395 '<option value="prev">'+lang.imageAttributes.relPrev+'</option>'+ 396 '<option value="search">'+lang.imageAttributes.relSearch+'</option>'+ 397 '<option value="tag">'+lang.imageAttributes.relTag+'</option>'+ 398 '</select></dd>'+ 399 '<dt><label for="note-image-attributes-link-role">'+lang.imageAttributes.linkRole+'</label></dt>'+ 400 '<dd><input type="text" id="note-image-attributes-link-role" class="note-image-attributes-link-role form-control"></dd>'; 401 } 402 body += '</dl>'; 403 }else{ 404 var body='<div class="form-group">'; 405 if (options.displayFields.imageBasic) { 406 body += '<label for="note-image-attributes-title" class="control-label col-xs-2">'+lang.imageAttributes.title+'</label>'+ 407 '<div class="input-group col-xs-10">'+ 408 '<input type="text" id="note-image-attributes-title" class="note-image-attributes-title form-control">'+ 409 '</div>'+ 410 '</div>'+ 411 '<div class="form-group">'+ 412 '<label for="note-image-attributes-src" class="control-label col-xs-2">'+lang.imageAttributes.src+'</label>'+ 413 '<div class="input-group col-xs-10">'+ 414 '<input type="text" id="note-image-attributes-src" class="note-image-attributes-src form-control">'+ 415 '</div>'+ 416 '</div>'+ 417 '<div class="form-group note-group-select-from-files">'+ 418 '<label class="control-label col-xs-2"></label>'+ 419 '<div class="input-group col-xs-10">'+ 420 '<input class="note-image-input form-control" type="file" name="file" accept="image/*" />'+imageLimitation+ 421 '<small class="help-block">'+lang.imageAttributes.srcHelp+'</small>'+ 422 '</div>'+ 423 '</div>'+ 424 '<div class="form-group">'+ 425 '<label for="note-image-attributes-alt" class="control-label col-xs-2">'+lang.imageAttributes.alt+'</label>'+ 426 '<div class="input-group col-xs-10">'+ 427 '<input type="text" id="note-image-attributes-alt" class="note-image-attributes-alt form-control">'+ 428 '</div>'+ 429 '</div>'; 430 } 431 if (options.displayFields.imageExtra) { 432 body += '<div class="form-group">'+ 433 '<label for="note-image-attributes-class" class="control-label col-xs-2">'+lang.imageAttributes.class+'</label>'+ 434 '<div class="input-group col-xs-10">'+ 435 '<input type="text" id="note-image-attributes-class" class="note-image-attributes-class form-control">'+ 436 '</div>'+ 437 '</div>'+ 438 '<div class="form-group">'+ 439 '<label for="note-image-attributes-style" class="control-label col-xs-2">'+lang.imageAttributes.style+'</label>'+ 440 '<div class="input-group col-xs-10">'+ 441 '<input type="text" id="note-image-attributes-style" class="note-image-attributes-style form-control">'+ 442 '</div>'+ 443 '</div>'+ 444 '<div class="form-group">'+ 445 '<label for="note-image-attributes-role" class="control-label col-xs-2">'+lang.imageAttributes.role+'</label>'+ 446 '<div class="input-group col-xs-10">'+ 447 '<input type="text" id="note-image-attributes-role" class="note-image-attributes-role form-control">'+ 448 '</div>'+ 449 '</div>'; 450 } 451 if (options.displayFields.linkBasic || options.displayFields.linkExtra) { 452 body += '<h4>'+lang.imageAttributes.pluginLinkTitle+'</h4>'+ 453 '<hr>'; 454 } 455 if (options.displayFields.linkBasic) { 456 body += '<div class="form-group">'+ 457 '<label for="note-image-attributes-link-href" class="control-label col-xs-2">'+lang.imageAttributes.href+'</label>'+ 458 '<div class="input-group col-xs-10">'+ 459 '<input type="text" id="note-image-attributes-link-href" class="note-image-attributes-href form-control">'+ 460 '</div>'+ 461 '</div>'+ 462 '<div class="form-group">'+ 463 '<label for="note-image-attributes-link-target" class="control-label col-xs-2">'+lang.imageAttributes.target+'</label>'+ 464 '<div class="input-group col-xs-10">'+ 465 '<select id="note-image-attributes-link-target" class="note-image-attributes-target form-control">'+ 466 '<option value="_self">Self</option>'+ 467 '<option value="_blank">Blank</option>'+ 468 '<option value="_top">Top</option>'+ 469 '<option value="_parent">Parent</option>'+ 470 '</select>'+ 471 '</div>'+ 472 '</div>'; 473 } 474 if (options.displayFields.linkExtra) { 475 body += '<div class="form-group">'+ 476 '<label for="note-image-attributes-link-class" class="control-label col-xs-2">'+lang.imageAttributes.linkClass+'</label>'+ 477 '<div class="input-group col-xs-10">'+ 478 '<input type="text" id="note-image-attributes-link-class" class="note-image-attributes-link-class form-control">'+ 479 '</div>'+ 480 '</div>'+ 481 '<div class="form-group">'+ 482 '<label for="note-image-attributes-link-rel" class="control-label col-xs-2">'+lang.imageAttributes.rel+'</label>'+ 483 '<div class="input-group col-xs-10">'+ 484 '<select id="note-image-attributes-link-rel" class="note-image-attributes-link-rel form-control">'+ 485 '<option value="">'+lang.imageAttributes.relBlank+'</option>'+ 486 '<option value="alternate">'+lang.imageAttributes.relAlternate+'</option>'+ 487 '<option value="author">'+lang.imageAttributes.relAuthor+'</option>'+ 488 '<option value="bookmark">'+lang.imageAttributes.relBookmark+'</option>'+ 489 '<option value="help">'+lang.imageAttributes.relHelp+'</option>'+ 490 '<option value="license">'+lang.imageAttributes.relLicense+'</option>'+ 491 '<option value="next">'+lang.imageAttributes.relNext+'</option>'+ 492 '<option value="nofollow">'+lang.imageAttributes.relNofollow+'</option>'+ 493 '<option value="noreferrer">'+lang.imageAttributes.relNoreferrer+'</option>'+ 494 '<option value="prefetch">'+lang.imageAttributes.relPrefetch+'</option>'+ 495 '<option value="prev">'+lang.imageAttributes.relPrev+'</option>'+ 496 '<option value="search">'+lang.imageAttributes.relSearch+'</option>'+ 497 '<option value="tag">'+lang.imageAttributes.relTag+'</option>'+ 498 '</select>'+ 499 '</div>'+ 500 '</div>'+ 501 '<div class="form-group">'+ 502 '<label for="note-image-attributes-link-role" class="control-label col-xs-2">'+lang.imageAttributes.linkRole+'</label>'+ 503 '<div class="input-group col-xs-10">'+ 504 '<input type="text" id="note-image-attributes-link-role" class="note-image-attributes-link-role form-control">'+ 505 '</div>'+ 506 '</div>'; 507 } 508 } 509 this.$dialog=ui.dialog({ 510 title:lang.imageAttributes.dialogTitle, 511 body:body, 512 footer:'<button href="#" class="btn btn-primary note-image-attributes-btn">OK</button>' 513 }).render().appendTo($container); 514 }; 515 this.destroy=function(){ 516 ui.hideDialog(this.$dialog); 517 this.$dialog.remove(); 518 }; 519 this.bindEnterKey=function($input,$btn){ 520 $input.on('keypress',function(event){ 521 if(event.keyCode===13)$btn.trigger('click'); 522 }); 523 }; 524 this.bindLabels=function(){ 525 self.$dialog.find('.form-control:first').focus().select(); 526 self.$dialog.find('label').on('click',function(){ 527 $(this).parent().find('.form-control:first').focus(); 528 }); 529 }; 530 this.show=function(){ 531 var $img=$($editable.data('target')); 532 var imgInfo={ 533 imgDom:$img, 534 title:$img.attr('title'), 535 src:$img.attr('src'), 536 alt:$img.attr('alt'), 537 role:$img.attr('role'), 538 class:$img.attr('class'), 539 style:$img.attr('style'), 540 imgLink:$($img.context).parent().is("a")?$($img.context).parent():null 541 }; 542 this.showLinkDialog(imgInfo) 543 .then(function(imgInfo){ 544 ui.hideDialog(self.$dialog); 545 var $img=imgInfo.imgDom; 546 if(options.imageAttributes.removeEmpty){ 547 if(imgInfo.alt)$img.attr('alt',imgInfo.alt);else $img.removeAttr('alt'); 548 if(imgInfo.title)$img.attr('title',imgInfo.title);else $img.removeAttr('title'); 549 if(imgInfo.src)$img.attr('src',imgInfo.src);else $img.attr('src', '#'); 550 if(imgInfo.class)$img.attr('class',imgInfo.class);else $img.removeAttr('class'); 551 if(imgInfo.style)$img.attr('style',imgInfo.style);else $img.removeAttr('style'); 552 if(imgInfo.role)$img.attr('role',imgInfo.role);else $img.removeAttr('role'); 553 }else{ 554 $img.attr('alt',imgInfo.alt); 555 $img.attr('title',imgInfo.title); 556 $img.attr('class',imgInfo.class); 557 $img.attr('style',imgInfo.style); 558 $img.attr('role',imgInfo.role); 559 } 560 if($img.parent().is("a"))$img.unwrap(); 561 var hrefRegex=new RegExp(/(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi); 562 if(imgInfo.href.match(hrefRegex)){ 563 var lnktxt='<a'; 564 if(imgInfo.linkClass)lnktxt+=' class="'+imgInfo.linkClass+'"'; 565 lnktxt+=' href="'+imgInfo.href+'" target="'+imgInfo.target+'"'; 566 if(imgInfo.linkRel)lnktxt+=' rel="'+imgInfo.linkRel+'"'; 567 if(imgInfo.linkRole)lnktxt+=' role="'+imgInfo.linkRole+'"'; 568 lnktxt+='></a>'; 569 $img.wrap(lnktxt); 570 } 571 $note.val(context.invoke('code')); 572 $note.change(); 573 }); 574 }; 575 this.showLinkDialog=function(imgInfo){ 576 return $.Deferred(function(deferred){ 577 var $imageTitle=self.$dialog.find('.note-image-attributes-title'), 578 $imageInput=self.$dialog.find('.note-image-input'), 579 $imageSrc=self.$dialog.find('.note-image-attributes-src'), 580 $imageAlt=self.$dialog.find('.note-image-attributes-alt'), 581 $imageClass=self.$dialog.find('.note-image-attributes-class'), 582 $imageStyle=self.$dialog.find('.note-image-attributes-style'), 583 $imageRole=self.$dialog.find('.note-image-attributes-role'), 584 $linkHref=self.$dialog.find('.note-image-attributes-href'), 585 $linkTarget=self.$dialog.find('.note-image-attributes-target'), 586 $linkClass=self.$dialog.find('.note-image-attributes-link-class'), 587 $linkRel=self.$dialog.find('.note-image-attributes-link-rel'), 588 $linkRole=self.$dialog.find('.note-image-attributes-link-role'), 589 $editBtn=self.$dialog.find('.note-image-attributes-btn'); 590 if(imgInfo.imgLink){ 591 $linkHref.val(imgInfo.imgLink.attr('href')); 592 $linkClass.val(imgInfo.imgLink.attr('class')); 593 $linkRole.val(imgInfo.imgLink.attr('role')); 594 $linkTarget.find('option').each(function(){ 595 if($(this).val()==imgInfo.imgLink.attr('target'))$(this).attr('selected','selected'); 596 }); 597 $linkRel.find('option').each(function(){ 598 if($(this).val()==imgInfo.imgLink.attr('rel'))$(this).attr('selected','selected'); 599 }); 600 } 601 ui.onDialogShown(self.$dialog,function(){ 602 context.triggerEvent('dialog.shown'); 603 $imageInput.replaceWith( 604 $imageInput.clone() 605 .on('change',function(){ 606 var callbacks=options.callbacks; 607 if(callbacks.onImageUpload){ 608 context.triggerEvent('image.upload',this.files[0]); 609 }else{ 610 readFileAsDataURL(this.files[0]).then(function(dataURL){ 611 $imageSrc.val(dataURL) 612 }).fail(function(){ 613 context.triggerEvent('image.upload.error'); 614 }); 615 } 616 }).val('') 617 ); 618 $editBtn.click(function(e){ 619 e.preventDefault(); 620 deferred.resolve({ 621 imgDom:imgInfo.imgDom, 622 title:$imageTitle.val(), 623 src:$imageSrc.val(), 624 alt:$imageAlt.val(), 625 class:$imageClass.val(), 626 style:$imageStyle.val(), 627 role:$imageRole.val(), 628 href:$linkHref.val(), 629 target:$linkTarget.val(), 630 linkClass:$linkClass.val(), 631 linkRel:$linkRel.val(), 632 linkRole:$linkRole.val() 633 }); 634 }); 635 $imageTitle.val(imgInfo.title).focus; 636 $imageSrc.val(imgInfo.src) 637 $imageAlt.val(imgInfo.alt); 638 $imageClass.val(imgInfo.class); 639 $imageStyle.val(imgInfo.style); 640 $imageRole.val(imgInfo.role); 641 self.bindEnterKey($editBtn); 642 self.bindLabels(); 643 }); 644 ui.onDialogHidden(self.$dialog,function(){ 645 $editBtn.off('click'); 646 if(deferred.state()==='pending')deferred.reject(); 647 }); 648 ui.showDialog(self.$dialog); 649 }); 650 }; 651 } 652 }); 653 }));