r1883 - in trunk/wao-web/src/main/webapp: . WEB-INF/content/obsmer - Wao-commits

14 Apr 2014

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;
+}
+

    

r1883 - in trunk/wao-web/src/main/webapp: . WEB-INF/content/obsmer

sbavencoff＠users.forge.codelutin.com

tags

participants (1)