Author: sbavencoff Date: 2014-04-14 11:55:25 +0200 (Mon, 14 Apr 2014) New Revision: 1883 Url: http://forge.codelutin.com/projects/wao/repository/revisions/1883 Log: refs #4553 : add edito wysiwyg Modified: trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/edit-news-input.jsp trunk/wao-web/src/main/webapp/wao.css Modified: trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/edit-news-input.jsp =================================================================== --- trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/edit-news-input.jsp 2014-04-14 08:47:03 UTC (rev 1882) +++ trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/edit-news-input.jsp 2014-04-14 09:55:25 UTC (rev 1883) @@ -23,16 +23,153 @@ <html> <head> + <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet"> + <script type="text/javascript" src="<s:url value='/js/jquery.hotkeys/jquery.hotkeys.js' />"></script> + <script type="text/javascript" src="<s:url value='/js/bootstrap-wysiwyg/bootstrap-wysiwyg.js' />"></script> + <script> + + + function initToolbarBootstrapBindings() { + var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', + 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times', + 'Times New Roman', 'Verdana'], + fontTarget = $('#fontMenu').siblings('.dropdown-menu'); + $.each(fonts, function (idx, fontName) { + fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>')); + }); + + $('a[title]').tooltip({container:'body'}); + $('.dropdown-menu input').click(function() {return false;}) + .change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');}) + .keydown('esc', function () {this.value='';$(this).change();}); + + $('[data-role=magic-overlay]').each(function () { + var overlay = $(this), target = $(overlay.data('target')); + overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight()); + }); + }; + + $(document).ready(function () { + initToolbarBootstrapBindings(); + $("#editor").wysiwyg(); + }); + + function save () { + var content = $('#editor').cleanHtml() + $('#edit-news_news_content').val(content); + } + + </script> </head> - <s:form> + <s:form onsubmit="save();"> <s:hidden name="newsId" value="%{newsId}" /> <s:textfield name="news.title" label="%{getText('wao.ui.news.title')}" cssClass="input-xxlarge" /> - <s:textarea name="news.content" label="%{getText('wao.ui.news.content')}" /> + <div class="control-group "> + <label class="control-label" for="editor"><s:property value="%{getText('wao.ui.news.content')}" /></label> + <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"> + <div class="btn-group"> + <a class="btn dropdown-toggle" + data-toggle="dropdown" + data-original-title="Font" + id="fontMenu" + title="Polices"><i class="icon-font"></i><b class="caret"></b></a> + <ul class="dropdown-menu"> + </ul> + </div> + + <div class="btn-group"> + <a class="btn dropdown-toggle" + data-toggle="dropdown" + data-original-title="Font Size" + title="Tailles"><i class="icon-text-height"></i> <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a data-edit="fontSize 5"><font size="5">Grand</font></a></li> + <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li> + <li><a data-edit="fontSize 1"><font size="1">Petit</font></a></li> + </ul> + </div> + + <div class="btn-group"> + <a class="btn dropdown-toggle" + data-toggle="dropdown" + data-original-title="Color" + title="Couleur"><i class="icon-tint"></i> <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li> + <a data-edit="foreColor #000000"> <font color="#000000" >Noir</font></a> + </li> + <li> + <a data-edit="foreColor #c0c0c0"> <font color="#c0c0c0" >Gris</font></a> + </li> + <li> + <a data-edit="foreColor #ff0000"> <font color="#ff0000" >Rouge</font></a> + </li> + <li> + <a data-edit="foreColor #00ff00"> <font color="#00ff00" >Vert</font></a> + </li> + <li> + <a data-edit="foreColor #0000ff"> <font color="#0000ff" >Bleu</font></a> + </li> + <li> + <a data-edit="foreColor #ffff00"> <font color="#ffff00" >Jaune</font></a> + </li> + <li> + <a data-edit="foreColor #00ffff"> <font color="#00ffff" >Cyan </font></a> + </li> + <li> + <a data-edit="foreColor #ff00ff"> <font color="#ff00ff" >Magenta</font></a> + </li> + <li> + </ul> + </div> + + <div class="btn-group"> + <a class="btn" data-edit="bold" title="Gras (Ctrl + B)"><i class="icon-bold"></i></a> + <a class="btn" data-edit="italic" title="Italic (Ctrl + I)"><i class="icon-italic"></i></a> + <a class="btn" data-edit="strikethrough" title="Barré"><i class="icon-strikethrough"></i></a> + <a class="btn" data-edit="underline" title="sous-ligné (Ctrl + U)"><i class="icon-underline"></i></a> + </div> + <div class="btn-group"> + <a class="btn" data-edit="insertunorderedlist" title="Puces"><i class="icon-list-ul"></i></a> + <a class="btn" data-edit="insertorderedlist" title="Numérotation"><i class="icon-list-ol"></i></a> + <a class="btn" data-edit="outdent" title="Réduire de retrait (Maj + Tab)"><i class="icon-indent-left"></i></a> + <a class="btn" data-edit="indent" title="Augmenter le retrait (Tab)"><i class="icon-indent-right"></i></a> + </div> + <div class="btn-group"> + <a class="btn" data-edit="justifyleft" title="Aligner à gauche (Ctrl + L)"><i class="icon-align-left"></i></a> + <a class="btn" data-edit="justifycenter" title="Centré (Ctrl + E)"><i class="icon-align-center"></i></a> + <a class="btn" data-edit="justifyright" title="Aligner à droite (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a> + <a class="btn" data-edit="justifyfull" title="Justifié (Ctrl + J)"><i class="icon-align-justify"></i></a> + </div> + <div class="btn-group"> + <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlien"><i class="icon-link"></i></a> + <div class="dropdown-menu input-append"> + <input class="span2" placeholder="URL" type="text" data-edit="createLink"/> + <button class="btn" type="button">Add</button> + </div> + <a class="btn" data-edit="unlink" title="Supprimer l'hyperlien"><i class="icon-cut"></i></a> + </div> + + <div class="btn-group"> + <a class="btn" data-edit="undo" title="Annuler (Ctrl + Z)"><i class="icon-undo"></i></a> + <a class="btn" data-edit="redo" title="Rétablir (Ctrl + Y)"><i class="icon-repeat"></i></a> + </div> + </div> + + <div class="controls"> + <div id="editor"> + <s:property value="news.content" escapeHtml="false"/> + </div> + </div> + </div> + + <s:hidden name="news.content"/> + <div class="form-actions"> <s:url action="news" id="newsUrl" /> <s:a href="%{newsUrl}" cssClass="btn"> Modified: trunk/wao-web/src/main/webapp/wao.css =================================================================== --- trunk/wao-web/src/main/webapp/wao.css 2014-04-14 08:47:03 UTC (rev 1882) +++ trunk/wao-web/src/main/webapp/wao.css 2014-04-14 09:55:25 UTC (rev 1883) @@ -298,3 +298,18 @@ /*max-width: 35%;*/ flex: 1; } +#editor { + max-height: 250px; + height: 250px; + background-color: white; + border-collapse: separate; + border: 1px solid rgb(204, 204, 204); + padding: 4px; + box-sizing: content-box; + box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset; + border-top-right-radius: 3px; border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; border-top-left-radius: 3px; + overflow: scroll; + outline: none; +} +