diff --git a/README.rst b/README.rst index 905139713..5091e32d3 100644 --- a/README.rst +++ b/README.rst @@ -178,6 +178,7 @@ OpenSlides uses the following projects or parts of them: * `angular-bootstrap `_, License: MIT * `angular-bootstrap-colorpicker `_, License: MIT * `angular-chosen-localytics `_, License: MIT + * `angular-ckeditor `_, License: MIT * `angular-csv-import `_, License: MIT * `angular-formly `_, License: MIT * `angular-formly-templates-bootstrap `_, License: MIT @@ -189,13 +190,13 @@ OpenSlides uses the following projects or parts of them: * `angular-sanitize `_, License: MIT * `angular-scroll-glue `_, License: MIT * `angular-ui-router `_, License: MIT - * `angular-ui-tinymce `_, License: MIT * `angular-ui-tree `_, License: MIT * `angular-xeditable `_, License: MIT * `api-check `_, License: MIT * `bootstrap `_, License: MIT * `bootstrap-ui-datetime-picker `_, License: MIT * `chosen `_, License: MIT + * `ckeditor `_, License: For licensing, see LICENSE.md or http://ckeditor.com/license. * `font-awesome-bower `_, License: MIT * `jquery `_, License: MIT * `jquery.cookie `_, License: MIT diff --git a/bower.json b/bower.json index 0d69134e1..1414be272 100644 --- a/bower.json +++ b/bower.json @@ -8,6 +8,7 @@ "angular-bootstrap": "~2.1.3", "angular-bootstrap-colorpicker": "~3.0.25", "angular-chosen-localytics": "~1.5.0", + "angular-ckeditor": "~1.0.3", "angular-csv-import": "0.0.36", "angular-file-saver": "~1.1.2", "angular-formly": "~8.4.0", @@ -19,11 +20,11 @@ "angular-sanitize": "~1.5.8", "angular-scroll-glue": "~2.0.7", "angular-ui-router": "~0.3.1", - "angular-ui-tinymce": "~0.0.17", "angular-ui-tree": "~2.22.0", "angular-xeditable": "~0.5.0", "bootstrap-css-only": "~3.3.6", "bootstrap-ui-datetime-picker": "~2.4.0", + "ckeditor": "~4.6.1", "docxtemplater": "~2.1.5", "font-awesome-bower": "~4.5.0", "jquery.cookie": "~1.4.1", @@ -35,9 +36,7 @@ "ngstorage": "~0.3.11", "ngBootbox": "~0.1.3", "pdfmake": "bpampuch/pdfmake#214ec161c11fadb8f02c08f2e3bea0576ac4c9fb", - "roboto-fontface": "~0.6.0", - "tinymce": "~4.4.3", - "tinymce-i18n": "OpenSlides/tinymce-i18n#a186ad61e0aa30fdf657e88f405f966d790f0805" + "roboto-fontface": "~0.6.0" }, "overrides": { "pdfmake": { @@ -57,11 +56,28 @@ "fonts/Roboto-Condensed/Roboto-Condensed-Light.woff" ] }, - "tinymce": { + "ckeditor": { "main": [ - "tinymce.js", - "themes/modern/theme.js", - "plugins/*/plugin.js" + "ckeditor.js", + "skins/moono-lisa/*", + "lang/en.js", + "lang/de.js", + "lang/pt.js", + "lang/es.js", + "lang/fr.js", + "lang/cs.js", + "plugins/about/*", + "plugins/clipboard/*", + "plugins/dialog/*", + "plugins/find/*", + "plugins/image/*", + "plugins/justify/*", + "plugins/liststyle/*", + "plugins/magicline/*", + "plugins/pastefromword/*", + "plugins/showblocks/*", + "plugins/table/*", + "plugins/tabletools/*" ] } }, diff --git a/gulpfile.js b/gulpfile.js index a051fc789..f8b82e3e0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -108,37 +108,12 @@ gulp.task('angular-chosen-img', function () { .pipe(gulp.dest(path.join(output_directory, 'css'))); }); -// Catches all skins files for TinyMCE editor. -gulp.task('tinymce-skins', function () { - return gulp.src(path.join('bower_components', 'tinymce', 'skins', '**')) - .pipe(gulp.dest(path.join(output_directory, 'tinymce', 'skins'))); +// Extra task only for CKEditor +gulp.task('ckeditor', function () { + return gulp.src(path.join('bower_components', 'ckeditor', '**')) + .pipe(gulp.dest(path.join(output_directory, 'ckeditor'))); }); -// Catches all required i18n files for TinyMCE editor. -gulp.task('tinymce-i18n', function () { - return gulp.src([ - 'bower_components/tinymce-i18n/langs/en_GB.js', - 'bower_components/tinymce-i18n/langs/cs.js', - 'bower_components/tinymce-i18n/langs/de.js', - 'bower_components/tinymce-i18n/langs/es.js', - 'bower_components/tinymce-i18n/langs/fr_FR.js', - 'bower_components/tinymce-i18n/langs/pt_PT.js', - ]) - .pipe(rename(function (path) { - if (path.basename === 'en_GB') { - path.basename = 'en'; - } else if (path.basename === 'fr_FR') { - path.basename = 'fr'; - } else if (path.basename === 'pt_PT') { - path.basename = 'pt'; - } - })) - .pipe(gulpif(argv.production, uglify())) - .pipe(gulp.dest(path.join(output_directory, 'tinymce', 'i18n'))); -}); - -// Combines all TinyMCE related tasks. -gulp.task('tinymce', ['tinymce-skins', 'tinymce-i18n'], function () {}); // Compiles translation files (*.po) to *.json and saves them in the directory // openslides/static/i18n/. @@ -151,7 +126,7 @@ gulp.task('translations', function () { }); // Gulp default task. Runs all other tasks before. -gulp.task('default', ['js', 'js-libs', 'templates', 'css-libs', 'fonts-libs', 'tinymce', 'angular-chosen-img', 'translations'], function () {}); +gulp.task('default', ['js', 'js-libs', 'templates', 'css-libs', 'fonts-libs', 'ckeditor', 'angular-chosen-img', 'translations'], function () {}); /** diff --git a/openslides/core/static/js/core/base.js b/openslides/core/static/js/core/base.js index 89bcf616f..466fe2475 100644 --- a/openslides/core/static/js/core/base.js +++ b/openslides/core/static/js/core/base.js @@ -548,33 +548,96 @@ angular.module('OpenSlidesApp.core', [ } ]) -// Options for TinyMCE editor used in various create and edit views. -// Required in core/base.js because MotionComment factory which used this -// factory has to placed in motions/base.js. +// Options for CKEditor used in various create and edit views. .factory('Editor', [ 'gettextCatalog', - function (gettextCatalog) { + function(gettextCatalog) { return { - getOptions: function (images, inlineMode) { - if (inlineMode === undefined) { - inlineMode = false; - } + getOptions: function (images) { return { - language_url: '/static/tinymce/i18n/' + gettextCatalog.getCurrentLanguage() + '.js', - theme_url: '/static/js/openslides-libs.js', - skin_url: '/static/tinymce/skins/lightgray/', - inline: inlineMode, - browser_spellcheck: true, - image_advtab: true, - image_list: images, - plugins: [ - 'lists link autolink charmap preview searchreplace code fullscreen', - 'paste textcolor colorpicker image imagetools wordcount' - ], - menubar: '', - toolbar: 'undo redo searchreplace | styleselect | bold italic underline strikethrough ' + - 'forecolor backcolor removeformat | bullist numlist | outdent indent | ' + - 'link image charmap table | code preview fullscreen' + on: { + instanceReady: function() { + // add a listener to ckeditor that parses the clipboard content and, after the regular filter, + // additionally strips out all empty

paragraphs + // TODO: check all kind of clipboard html content if "isEmpty" is a reliable property + this.on('paste', function(evt) { + if (evt.data.type == 'html') { + var fragment = CKEDITOR.htmlParser.fragment.fromHtml(evt.data.dataValue); + var writer = new CKEDITOR.htmlParser.basicWriter(); + // html content will now be in a dom-like structure inside 'fragment'. + this.filter.applyTo(fragment); + if (fragment.children) { + var new_content_children = []; + for (var i = 0; i < fragment.children.length; i++) { + var empty = true; + if (fragment.children[i].children){ + for (var j = 0; j < fragment.children[i].children.length; j++) { + var child = fragment.children[i].children[j]; + if (child.name != 'p' && child.name != 'br') { + empty = false; + } else if (child.isEmpty !== true) { + empty = false; + } + } + if (empty === false) { + new_content_children.push(fragment.children[i]); + } + } else { + if (fragment.children[i].name != 'p' && fragment.children[i].name != 'br' && + fragment.children[i].isEmpty !== true){ + new_content_children.push(fragment.children[i]); + } + } + } + fragment.children = new_content_children; + } + fragment.writeHtml(writer); + evt.data.dataValue = writer.getHtml(); + } + }); + } + }, + customConfig: '', + disableNativeSpellChecker: false, + language_list: [ + 'fr:français', + 'es:español', + 'pt:português', + 'en:english', + 'de:deutsch', + 'cs:čeština'], + language: gettextCatalog.getCurrentLanguage(), + allowedContent: + 'h1 h2 h3 b i u strike sup sub strong em;' + + 'blockquote p pre table' + + '(text-align-left,text-align-center,text-align-right,text-align-justify){text-align};' + + 'a[!href];' + + 'img[!src,alt]{width,height,float};' + + 'tr th td caption;' + + 'li; ol[start]{list-style-type};' + + 'ul{list-style};' + + 'span[data-line-number,contenteditable]{color,background-color}(os-line-number,line-number-*);' + + 'br(os-line-break);', + + // there seems to be an error in CKeditor that parses spaces in extraPlugins as part of the plugin name. + extraPlugins: 'colorbutton,find,liststyle,sourcedialog,justify,showblocks', + removePlugins: 'wsc,scayt,a11yhelp,filebrowser,sourcearea', + removeButtons: 'Scayt,Anchor,Styles,HorizontalRule', + toolbarGroups: [ + { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, + { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, + { name: 'links', groups: [ 'links' ] }, + { name: 'insert', groups: [ 'insert' ] }, + { name: 'tools', groups: [ 'tools' ] }, + { name: 'document', groups: [ 'mode' ] }, + '/', + { name: 'styles', groups: [ 'styles' ] }, + { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, + { name: 'colors', groups: [ 'colors' ] }, + { name: 'paragraph', groups: [ 'list', 'indent' ] }, + { name: 'align'}, + { name: 'paragraph', groups: [ 'blocks' ] } + ] }; } }; diff --git a/openslides/core/static/js/core/site.js b/openslides/core/static/js/core/site.js index 307b9d2ff..ff8763ca3 100644 --- a/openslides/core/static/js/core/site.js +++ b/openslides/core/static/js/core/site.js @@ -18,7 +18,7 @@ angular.module('OpenSlidesApp.core.site', [ 'ngMessages', 'ngCsvImport', 'ngStorage', - 'ui.tinymce', + 'ckeditor', 'luegg.directives', 'xeditable', ]) diff --git a/openslides/core/static/templates/core/editor.html b/openslides/core/static/templates/core/editor.html index b634bd64e..13fd511d8 100644 --- a/openslides/core/static/templates/core/editor.html +++ b/openslides/core/static/templates/core/editor.html @@ -1,2 +1,2 @@ - - + + \ No newline at end of file diff --git a/openslides/core/static/templates/index.html b/openslides/core/static/templates/index.html index 6688a741d..16724eee6 100644 --- a/openslides/core/static/templates/index.html +++ b/openslides/core/static/templates/index.html @@ -10,10 +10,19 @@ + + + - + + +

diff --git a/openslides/motions/static/js/motions/base.js b/openslides/motions/static/js/motions/base.js index 4677e9df5..84e79e5bf 100644 --- a/openslides/motions/static/js/motions/base.js +++ b/openslides/motions/static/js/motions/base.js @@ -546,7 +546,7 @@ angular.module('OpenSlidesApp.motions', [ label: field.name, }, data: { - tinymceOption: Editor.getOptions() + ckeditorOptions: Editor.getOptions() }, hide: !operator.hasPerms("motions.can_see_and_manage_comments") }; diff --git a/openslides/motions/static/js/motions/motion-services.js b/openslides/motions/static/js/motions/motion-services.js index ce96638c1..7b6059b63 100644 --- a/openslides/motions/static/js/motions/motion-services.js +++ b/openslides/motions/static/js/motions/motion-services.js @@ -61,13 +61,12 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions', 'Motion', 'Config', '$timeout', - function (Editor, Motion, Config, $timeout) { + 'gettextCatalog', + function (Editor, Motion, Config, $timeout, gettextCatalog) { var obj = { active: false, changed: false, trivialChange: false, - editor: null, - lineBrokenText: null, originalHtml: null }; @@ -76,62 +75,77 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions', obj.init = function (_scope, _motion) { $scope = _scope; motion = _motion; - obj.lineBrokenText = motion.getTextWithLineBreaks($scope.version); - obj.originalHtml = obj.lineBrokenText; - }; - - - obj.tinymceOptions = Editor.getOptions(null, true); - obj.tinymceOptions.readonly = 1; - obj.tinymceOptions.setup = function (editor) { - obj.editor = editor; - editor.on('init', function () { - obj.lineBrokenText = motion.getTextWithLineBreaks($scope.version); - obj.editor.setContent(obj.lineBrokenText); - obj.originalHtml = obj.editor.getContent(); - obj.changed = false; - }); - editor.on('change', function () { - obj.changed = (editor.getContent() != obj.originalHtml); - }); - editor.on('undo', function () { - obj.changed = (editor.getContent() != obj.originalHtml); - }); + obj.ckeditorOptions = Editor.getOptions(); + obj.ckeditorOptions.readOnly = true; + obj.isEditable = false; + obj.changed = false; }; obj.setVersion = function (_motion, versionId) { motion = _motion; // If this is not updated, - obj.lineBrokenText = motion.getTextWithLineBreaks(versionId); + obj.originalHtml = motion.getTextWithLineBreaks(versionId); obj.changed = false; - obj.active = false; + obj.editor.setReadOnly(true); if (obj.editor) { - obj.editor.setContent(obj.lineBrokenText); - obj.editor.setMode('readonly'); - obj.originalHtml = obj.editor.getContent(); - } else { - obj.originalHtml = obj.lineBrokenText; + obj.editor.setData(obj.originalHtml); } }; obj.enable = function () { - obj.editor.setMode('design'); - obj.active = true; - obj.changed = false; - - obj.lineBrokenText = motion.getTextWithLineBreaks($scope.version); - obj.editor.setContent(obj.lineBrokenText); - obj.originalHtml = obj.editor.getContent(); - $timeout(function () { - obj.editor.focus(); - }, 100); + if (motion.isAllowed('update')) { + obj.active = true; + obj.isEditable = true; + obj.ckeditorOptions.language = gettextCatalog.getCurrentLanguage(); + obj.editor = CKEDITOR.inline('view-original-inline-editor', obj.ckeditorOptions); + obj.editor.on('change', function () { + $timeout(function() { + if (obj.editor.getData() != obj.originalHtml) { + obj.changed = true; + } else { + obj.changed = false; + } + }); + }); + obj.revert(); + } else { + obj.disable(); + } }; obj.disable = function () { - obj.editor.setMode('readonly'); - obj.active = false; - obj.changed = false; - obj.lineBrokenText = obj.originalHtml; - obj.editor.setContent(obj.originalHtml); + if (obj.editor) { + obj.editor.setReadOnly(true); + obj.editor.setData(obj.originalHtml, { + callback: function() { + obj.editor.destroy(); + } + }); + } + $timeout(function() { + obj.active = false; + obj.changed = false; + obj.isEditable = false; + }); + }; + + // sets editor content to the initial motion state + obj.revert = function() { + if (obj.editor) { + obj.originalHtml = motion.getTextWithLineBreaks($scope.version); + obj.editor.setData( + motion.getTextWithLineBreaks($scope.version), { + callback: function() { + obj.originalHtml = obj.editor.getData(); + obj.editor.setReadOnly(false); + $timeout(function() { + obj.changed = false; + }); + $timeout(function () { + obj.editor.focus(); + }, 100); + } + }); + } }; obj.save = function () { @@ -139,7 +153,7 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions', throw 'No permission to update motion'; } - motion.setTextStrippingLineBreaks(obj.editor.getContent()); + motion.setTextStrippingLineBreaks(obj.editor.getData()); motion.disable_versioning = (obj.trivialChange && Config.get('motions_allow_disable_versioning').value); Motion.inject(motion); @@ -147,11 +161,13 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions', Motion.save(motion, {method: 'PATCH'}).then( function (success) { $scope.showVersion(motion.getVersion(-1)); + obj.revert(); }, function (error) { // save error: revert all changes by restore // (refresh) original motion object from server Motion.refresh(motion); + obj.revert(); var message = ''; for (var e in error.data) { message += e + ': ' + error.data[e] + ' '; diff --git a/openslides/motions/static/js/motions/site.js b/openslides/motions/static/js/motions/site.js index 5b9f0b612..18908441e 100644 --- a/openslides/motions/static/js/motions/site.js +++ b/openslides/motions/static/js/motions/site.js @@ -397,7 +397,7 @@ angular.module('OpenSlidesApp.motions.site', [ required: false }, data: { - tinymceOption: Editor.getOptions() + ckeditorOptions: Editor.getOptions() } } ]; @@ -492,7 +492,7 @@ angular.module('OpenSlidesApp.motions.site', [ required: true }, data: { - tinymceOption: Editor.getOptions(images) + ckeditorOptions: Editor.getOptions(images) } }, { @@ -502,7 +502,7 @@ angular.module('OpenSlidesApp.motions.site', [ label: gettextCatalog.getString('Reason'), }, data: { - tinymceOption: Editor.getOptions(images) + ckeditorOptions: Editor.getOptions(images) } }, { diff --git a/openslides/motions/static/templates/motions/motion-detail/view-original.html b/openslides/motions/static/templates/motions/motion-detail/view-original.html index 7c33cba43..790a8fc84 100644 --- a/openslides/motions/static/templates/motions/motion-detail/view-original.html +++ b/openslides/motions/static/templates/motions/motion-detail/view-original.html @@ -1,30 +1,23 @@ - -
-
-
+ +
+
-
-
The text has been changed.
+
- - -
-
-
-
    diff --git a/openslides/topics/static/js/topics/site.js b/openslides/topics/static/js/topics/site.js index d17e32d72..ba4621364 100644 --- a/openslides/topics/static/js/topics/site.js +++ b/openslides/topics/static/js/topics/site.js @@ -118,7 +118,7 @@ angular.module('OpenSlidesApp.topics.site', ['OpenSlidesApp.topics']) label: gettextCatalog.getString('Text') }, data: { - tinymceOption: Editor.getOptions(images) + ckeditorOptions: Editor.getOptions(images) } }]; // attachments diff --git a/openslides/users/static/js/users/site.js b/openslides/users/static/js/users/site.js index 6868f9217..dd10e3ea8 100644 --- a/openslides/users/static/js/users/site.js +++ b/openslides/users/static/js/users/site.js @@ -446,7 +446,7 @@ angular.module('OpenSlidesApp.users.site', [ label: gettextCatalog.getString('About me'), }, data: { - tinymceOption: Editor.getOptions(images) + ckeditorOptions: Editor.getOptions(images) }, hideExpression: '!model.more' } @@ -801,7 +801,7 @@ angular.module('OpenSlidesApp.users.site', [ 'user', function($scope, $state, Editor, User, user) { $scope.user = user; // autoupdate is not activated - $scope.tinymceOption = Editor.getOptions(); + $scope.ckeditorOptions = Editor.getOptions(); $scope.save = function (user) { User.save(user).then( function(success) { diff --git a/openslides/users/static/templates/users/user-detail-profile.html b/openslides/users/static/templates/users/user-detail-profile.html index 159e93fca..0df2341b5 100644 --- a/openslides/users/static/templates/users/user-detail-profile.html +++ b/openslides/users/static/templates/users/user-detail-profile.html @@ -37,7 +37,7 @@
-