Use ckeditor to edit projector messages

CHANGELOG

@@ -31,6 +31,7 @@ Core:
 - Added template hook system for plugins.
 - Made a lot of code clean up, improvements and bug fixes in client and
   backend.
+- Use CKEditor for editin projector messages.
 
 Motions:
 - Added adjustable line numbering mode (outside, inside, none) for each

openslides/core/static/js/core/site.js

@@ -381,6 +381,43 @@ angular.module('OpenSlidesApp.core.site', [
     }
 ])
 
+.factory('ProjectorMessageForm', [
+    'Editor',
+    'gettextCatalog',
+    function (Editor, gettextCatalog) {
+        return {
+            getDialog: function (message) {
+                return {
+                    template: 'static/templates/core/projector-message-form.html',
+                    controller: 'ProjectorMessageEditCtrl',
+                    className: 'ngdialog-theme-default wide-form',
+                    closeByEscape: false,
+                    closeByDocument: false,
+                    resolve: {
+                        projectorMessage: function () {
+                            return message;
+                        }
+                    },
+                };
+            },
+            getFormFields: function () {
+                return [
+                    {
+                        key: 'message',
+                        type: 'editor',
+                        templateOptions: {
+                            label: gettextCatalog.getString('Message'),
+                        },
+                        data: {
+                            ckeditorOptions: Editor.getOptions()
+                        }
+                    },
+                ];
+            },
+        };
+    }
+])
+
 /* This factory handles the filtering of the OS-data-tables. It contains
  * all logic needed for the table header filtering. Things to configure:
  * - multiselectFilters: A dict associating the filter name to a list (empty per default). E.g.
@@ -992,8 +1029,11 @@ angular.module('OpenSlidesApp.core.site', [
     'ProjectorMessage',
     'Countdown',
     'gettextCatalog',
+    'ngDialog',
+    'ProjectorMessageForm',
     function($scope, $http, $interval, $state, $q, Config, Projector, CurrentListOfSpeakersItem,
-        ListOfSpeakersOverlay, ProjectionDefault, ProjectorMessage, Countdown, gettextCatalog) {
+        ListOfSpeakersOverlay, ProjectionDefault, ProjectorMessage, Countdown, gettextCatalog,
+        ngDialog, ProjectorMessageForm) {
         ProjectorMessage.bindAll({}, $scope, 'messages');
 
         var intervals = [];
@@ -1106,8 +1146,7 @@ angular.module('OpenSlidesApp.core.site', [
 
         // *** message functions ***
         $scope.editMessage = function (message) {
-            message.editFlag = false;
-            ProjectorMessage.save(message);
+            ngDialog.open(ProjectorMessageForm.getDialog(message));
         };
         $scope.addMessage = function () {
             var message = {message: ''};
@@ -1130,6 +1169,23 @@ angular.module('OpenSlidesApp.core.site', [
     }
 ])
 
+.controller('ProjectorMessageEditCtrl', [
+    '$scope',
+    'projectorMessage',
+    'ProjectorMessage',
+    'ProjectorMessageForm',
+    function ($scope, projectorMessage, ProjectorMessage, ProjectorMessageForm) {
+        $scope.formFields = ProjectorMessageForm.getFormFields();
+        $scope.model = angular.copy(projectorMessage);
+
+        $scope.save = function (message) {
+            ProjectorMessage.inject(message);
+            ProjectorMessage.save(message);
+            $scope.closeThisDialog();
+        };
+    }
+])
+
 .controller('ManageProjectorsCtrl', [
     '$scope',
     '$http',

openslides/core/static/templates/core/projector-controls.html

@@ -239,7 +239,7 @@
               <i class="fa fa-times"></i>
             </button>
             <button type="button" class="close editicon"
-              ng-click="message.editFlag=true"
+              ng-click="editMessage(message)"
               title="{{ 'Edit message' | translate}}">
               <i class="fa fa-pencil"></i>
             </button>
@@ -249,18 +249,7 @@
               ng-class="{ 'projected': isProjected(message).length }">
             <projector-button model="message" default-projector-id="messageDefaultProjectorId"></projector-button>
             &nbsp;&nbsp;
-            <div class="innermessage" ng-bind-html="message.message"> </div>
-
-            <div class="panel-input">
-              <div ng-if="message.editFlag" class="input-group">
-                <input ng-model="message.message" type="text" class="form-control input-sm">
-                <a ng-click="editMessage(message)"
-                  title="{{ 'Save' | translate}}"
-                  class="btn btn-sm btn-primary input-group-addon">
-                  <i class="fa fa-check"></i>
-                </a>
-              </div>
-            </div>
+            <div class="innermessage" ng-bind-html="message.message | trusted"></div>
           </div>
         </div>
         <!-- Add message button -->

openslides/core/static/templates/core/projector-message-form.html

@@ -0,0 +1,12 @@
+<h1 translate>Edit message</h1>
+
+<form name="messageForm" ng-submit="save(model)" novalidate>
+  <formly-form model="model" fields="formFields">
+    <button type="submit" ng-disabled="motionForm.$invalid" class="btn btn-primary" translate>
+      Save
+    </button>
+    <button type="button" ng-click="closeThisDialog()" class="btn btn-default" translate>
+      Cancel
+    </button>
+  </formly-form>
+</form>

openslides/core/static/templates/core/slide_message.html

@@ -1,4 +1,4 @@
 <div ng-controller="SlideMessageCtrl">
   <div class="message_background"></div>
-  <div class="message well" ng-class="{'identify': element.identify}" ng-bind-html="element.identify ? identifyMessage : message.message"></div>
+  <div class="message well" ng-class="{'identify': element.identify}" ng-bind-html="(element.identify ? identifyMessage : message.message) | trusted"></div>
 </div>