EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2508 rte: Don't close keyboard when clicking format button

main
Dani Palou 2018-08-06 10:10:32 +02:00
parent a2614eda26
commit 4f832f1f9b
2 changed files with 25 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/rich-text-editor/core-rich-text-editor.html
View File

@ -5,18 +5,18 @@
<!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
<div #decorate class="core-rte-toolbar">
<div class="core-rte-buttons">
<button data-command="bold"><core-icon name="fa-bold"></core-icon></button>
<button data-command="italic"><core-icon name="fa-italic"></core-icon></button>
<button data-command="underline"><core-icon name="fa-underline"></core-icon></button>
<button data-command="strikeThrough"><core-icon name="fa-strikethrough"></core-icon></button>
<button data-command="formatBlock|<p>"><core-icon name="fa-paragraph"></core-icon></button>
<button data-command="formatBlock|<h1>"><core-icon name="fa-header"></core-icon>1</button>
<button data-command="formatBlock|<h2>"><core-icon name="fa-header"></core-icon>2</button>
<button data-command="formatBlock|<h3>"><core-icon name="fa-header"></core-icon>3</button>
<button data-command="insertUnorderedList"><core-icon name="fa-list-ul"></core-icon></button>
<button data-command="insertOrderedList"><core-icon name="fa-list-ol"></core-icon></button>
<button data-command="removeFormat"><core-icon name="fa-eraser"></core-icon></button>
<button (click)="toggleEditor($event)"><core-icon name="fa-code"></core-icon> {{ 'core.viewcode' | translate }}</button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'bold')"><core-icon name="fa-bold"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'italic')"><core-icon name="fa-italic"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'underline')"><core-icon name="fa-underline"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'strikeThrough')"><core-icon name="fa-strikethrough"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'formatBlock|<p>')"><core-icon name="fa-paragraph"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'formatBlock|<h1>')"><core-icon name="fa-header"></core-icon>1</button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'formatBlock|<h2>')"><core-icon name="fa-header"></core-icon>2</button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'formatBlock|<h3>')"><core-icon name="fa-header"></core-icon>3</button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'insertUnorderedList')"><core-icon name="fa-list-ul"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'insertOrderedList')"><core-icon name="fa-list-ol"></core-icon></button>
<button [core-suppress-events] (onClick)="buttonAction($event, 'removeFormat')"><core-icon name="fa-eraser"></core-icon></button>
<button [core-suppress-events] (onClick)="toggleEditor($event)"><core-icon name="fa-code"></core-icon> {{ 'core.viewcode' | translate }}</button>
</div>
</div>
</div>
@ -25,7 +25,7 @@
<ion-textarea #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)"></ion-textarea>
<div class="core-rte-toolbar" [hidden]="!editorSupported">
<div #decorate class="core-rte-buttons">
<button tappable (click)="toggleEditor($event)"><core-icon name="fa-pencil-square-o"></core-icon> {{ 'core.vieweditor' | translate }}</button>
<button tappable [core-suppress-events] (onClick)="toggleEditor($event)"><core-icon name="fa-pencil-square-o"></core-icon> {{ 'core.vieweditor' | translate }}</button>
</div>
</div>
</div>

53
src/components/rich-text-editor/rich-text-editor.ts
View File

@ -22,7 +22,6 @@ import { CoreUrlUtilsProvider } from '@providers/utils/url';
import { CoreUtilsProvider } from '@providers/utils/utils';
import { CoreEventsProvider } from '@providers/events';
import { FormControl } from '@angular/forms';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs';
/**
@ -69,7 +68,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
rteEnabled = false;
editorSupported = true;
constructor(private domUtils: CoreDomUtilsProvider, private keyboard: Keyboard, private urlUtils: CoreUrlUtilsProvider,
constructor(private domUtils: CoreDomUtilsProvider, private urlUtils: CoreUrlUtilsProvider,
private sitesProvider: CoreSitesProvider, private filepoolProvider: CoreFilepoolProvider,
@Optional() private content: Content, elementRef: ElementRef, private events: CoreEventsProvider,
private utils: CoreUtilsProvider) {
@ -104,28 +103,6 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
this.textarea.value = param;
});
// Setup button actions.
const buttons = (this.decorate.nativeElement as HTMLDivElement).getElementsByTagName('button');
for (let i = 0; i < buttons.length; i++) {
const button = buttons[i];
let command = button.getAttribute('data-command');
if (command) {
if (command.includes('|')) {
const parameter = command.split('|')[1];
command = command.split('|')[0];
button.addEventListener('click', ($event) => {
this.buttonAction($event, command, parameter);
});
} else {
button.addEventListener('click', ($event) => {
this.buttonAction($event, command);
});
}
}
}
// Use paragraph on enter.
document.execCommand('DefaultParagraphSeparator', false, 'p');
@ -397,13 +374,9 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
setTimeout(() => {
if (this.rteEnabled) {
this.editorElement.focus();
this.setCurrentCursorPosition(this.editorElement.firstChild);
} else {
this.textarea.setFocus();
}
setTimeout(() => {
this.keyboard.show();
});
});
}
@ -472,25 +445,23 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
* Execute an action over the selected text.
* API docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
*
* @param {any} $event Event data
* @param {string} command Command to execute.
* @param {any} [parameters] Parameters of the command.
* @param {any} $event Event data
* @param {string} command Command to execute.
*/
protected buttonAction($event: any, command: string, parameters: any = null): void {
protected buttonAction($event: any, command: string): void {
$event.preventDefault();
$event.stopPropagation();
document.execCommand(command, false, parameters);
setTimeout(() => {
if (this.rteEnabled) {
this.editorElement.focus();
if (command) {
if (command.includes('|')) {
const parameters = command.split('|')[1];
command = command.split('|')[0];
document.execCommand(command, false, parameters);
} else {
this.textarea.setFocus();
document.execCommand(command, false);
}
setTimeout(() => {
this.keyboard.show();
});
});
}
}
/**