diff --git a/client/angular.json b/client/angular.json index e45d51651..dee0fe99b 100644 --- a/client/angular.json +++ b/client/angular.json @@ -24,7 +24,23 @@ "tsConfig": "src/tsconfig.app.json", "assets": ["src/favicon.ico", "src/assets"], "styles": ["src/styles.scss", "node_modules/material-design-icons/iconfont/material-icons.css"], - "scripts": [] + "scripts": [ + "node_modules/tinymce/tinymce.min.js", + "node_modules/tinymce/themes/modern/theme.js", + "node_modules/tinymce/plugins/autolink/plugin.js", + "node_modules/tinymce/plugins/charmap/plugin.js", + "node_modules/tinymce/plugins/code/plugin.js", + "node_modules/tinymce/plugins/colorpicker/plugin.js", + "node_modules/tinymce/plugins/fullscreen/plugin.js", + "node_modules/tinymce/plugins/image/plugin.js", + "node_modules/tinymce/plugins/imagetools/plugin.js", + "node_modules/tinymce/plugins/lists/plugin.js", + "node_modules/tinymce/plugins/link/plugin.js", + "node_modules/tinymce/plugins/paste/plugin.js", + "node_modules/tinymce/plugins/preview/plugin.js", + "node_modules/tinymce/plugins/searchreplace/plugin.js", + "node_modules/tinymce/plugins/textcolor/plugin.js" + ] }, "configurations": { "production": { @@ -71,7 +87,9 @@ "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": ["src/styles.scss"], - "scripts": [], + "scripts": [ + "node_modules/tinymce/tinymce.min.js" + ], "assets": ["src/favicon.ico", "src/assets"] } }, diff --git a/client/package.json b/client/package.json index 980fc2fb4..d9bf99a33 100644 --- a/client/package.json +++ b/client/package.json @@ -30,6 +30,7 @@ "@ngx-pwa/local-storage": "^7.0.0", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", + "@tinymce/tinymce-angular": "^2.3.1", "core-js": "^2.5.4", "file-saver": "^2.0.0-rc.3", "material-design-icons": "^3.0.1", @@ -38,6 +39,7 @@ "po2json": "^1.0.0-alpha", "roboto-fontface": "^0.10.0", "rxjs": "^6.3.3", + "tinymce": "^4.8.5", "uuid": "^3.3.2", "zone.js": "^0.8.26" }, diff --git a/client/src/app/base.component.ts b/client/src/app/base.component.ts index 6f8746fca..f80f882ed 100644 --- a/client/src/app/base.component.ts +++ b/client/src/app/base.component.ts @@ -17,6 +17,27 @@ export abstract class BaseComponent extends OpenSlidesComponent { */ private titleSuffix = ' - OpenSlides 3'; + /** + * Settings for the TinyMCE editor selector + */ + public tinyMceSettings = { + // TODO: language_url: '/static/tinymce/i18n/' + gettextCatalog.getCurrentLanguage() + '.js', + // TODO: theme_url: '/static/js/openslides-libs.js', + skin_url: '/assets/tinymce/skins/lightgray', + inline: false, + statusbar: false, + browser_spellcheck: true, + image_advtab: true, + height: 320, + // TODO: image_list: images, + plugins: `autolink charmap code colorpicker fullscreen image imagetools + lists link paste preview searchreplace textcolor`, + menubar: '', + toolbar: `undo redo searchreplace | styleselect | bold italic underline strikethrough + | forecolor backcolor removeformat | bullist numlist | outdent indent | + link image charmap table | code preview fullscreen` + }; + /** * Child constructor that implements the titleServices and calls Super from OpenSlidesComponent */ diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 9496526ef..529ad2168 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -23,7 +23,7 @@ import { DateAdapter, MatIconModule, MatButtonToggleModule, - MatBadgeModule, + MatBadgeModule } from '@angular/material'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatChipsModule } from '@angular/material'; @@ -43,6 +43,9 @@ import { TranslateModule } from '@ngx-translate/core'; // ngx-file-drop import { FileDropModule } from 'ngx-file-drop'; +// TinyMCE +import { EditorModule } from '@tinymce/tinymce-angular'; + // directives import { PermsDirective } from './directives/perms.directive'; import { DomChangeDirective } from './directives/dom-change.directive'; @@ -107,7 +110,8 @@ import { SpeakerListComponent } from 'app/site/agenda/components/speaker-list/sp TranslateModule.forChild(), RouterModule, NgxMatSelectSearchModule, - FileDropModule + FileDropModule, + EditorModule ], exports: [ FormsModule, @@ -151,7 +155,8 @@ import { SpeakerListComponent } from 'app/site/agenda/components/speaker-list/sp LegalNoticeContentComponent, PrivacyPolicyContentComponent, PromptDialogComponent, - SortingListComponent + SortingListComponent, + EditorModule ], declarations: [ PermsDirective, diff --git a/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html b/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html index 335a82491..f50589c54 100644 --- a/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html +++ b/client/src/app/site/agenda/components/topic-detail/topic-detail.component.html @@ -32,7 +32,7 @@ - {{ topic.text }} + No description provided. @@ -58,11 +58,8 @@ A name is required - - - - - + + diff --git a/client/src/app/site/agenda/components/topic-detail/topic-detail.component.ts b/client/src/app/site/agenda/components/topic-detail/topic-detail.component.ts index c9c123711..827e37524 100644 --- a/client/src/app/site/agenda/components/topic-detail/topic-detail.component.ts +++ b/client/src/app/site/agenda/components/topic-detail/topic-detail.component.ts @@ -2,9 +2,12 @@ import { Component } from '@angular/core'; import { Location } from '@angular/common'; import { FormGroup, Validators, FormBuilder } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; +import { Title } from '@angular/platform-browser'; +import { MatSnackBar } from '@angular/material'; import { TranslateService } from '@ngx-translate/core'; +import { BaseViewComponent } from 'app/site/base/base-view'; import { PromptService } from 'app/core/services/prompt.service'; import { TopicRepositoryService } from '../../services/topic-repository.service'; import { ViewTopic } from '../../models/view-topic'; @@ -17,7 +20,7 @@ import { ViewTopic } from '../../models/view-topic'; templateUrl: './topic-detail.component.html', styleUrls: ['./topic-detail.component.scss'] }) -export class TopicDetailComponent { +export class TopicDetailComponent extends BaseViewComponent { /** * Determine if the topic is in edit mode */ @@ -40,24 +43,28 @@ export class TopicDetailComponent { /** * Constructor for the topic detail page. - * + * @param title Setting the browsers title + * @param matSnackBar display errors and other messages + * @param translate Handles translations * @param route Angulars ActivatedRoute * @param router Angulars Router * @param location Enables to navigate back * @param formBuilder Angulars FormBuilder - * @param translate Handles translations * @param repo The topic repository * @param promptService Allows warning before deletion attempts */ public constructor( + title: Title, + matSnackBar: MatSnackBar, + protected translate: TranslateService, private route: ActivatedRoute, private router: Router, private location: Location, private formBuilder: FormBuilder, - private translate: TranslateService, private repo: TopicRepositoryService, private promptService: PromptService ) { + super(title, translate, matSnackBar); this.getTopicByUrl(); this.createForm(); } diff --git a/client/src/app/site/config/components/config-field/config-field.component.html b/client/src/app/site/config/components/config-field/config-field.component.html index 662b69ebb..2e236996e 100644 --- a/client/src/app/site/config/components/config-field/config-field.component.html +++ b/client/src/app/site/config/components/config-field/config-field.component.html @@ -1,6 +1,7 @@ -
- - - - Required - - -