mirror of
https://github.com/flarum/framework.git
synced 2024-12-12 14:13:37 +08:00
Add methods for doing stuff in text editor
Used by the mentions extension
This commit is contained in:
parent
a2049feddf
commit
a8ad5a1ac8
|
@ -20,10 +20,10 @@ export default class TextEditor extends Component {
|
||||||
return m('div.text-editor', {config: this.element}, [
|
return m('div.text-editor', {config: this.element}, [
|
||||||
m('textarea.form-control.flexible-height', {
|
m('textarea.form-control.flexible-height', {
|
||||||
config: this.configTextarea.bind(this),
|
config: this.configTextarea.bind(this),
|
||||||
onkeyup: m.withAttr('value', this.onkeyup.bind(this)),
|
oninput: m.withAttr('value', this.oninput.bind(this)),
|
||||||
placeholder: this.props.placeholder || '',
|
placeholder: this.props.placeholder || '',
|
||||||
disabled: !!this.props.disabled,
|
disabled: !!this.props.disabled,
|
||||||
value: this.props.value || ''
|
value: this.value()
|
||||||
}),
|
}),
|
||||||
m('ul.text-editor-controls.fade', listItems(this.controlItems().toArray()))
|
m('ul.text-editor-controls.fade', listItems(this.controlItems().toArray()))
|
||||||
]);
|
]);
|
||||||
|
@ -51,7 +51,29 @@ export default class TextEditor extends Component {
|
||||||
return items;
|
return items;
|
||||||
}
|
}
|
||||||
|
|
||||||
onkeyup(value) {
|
setContent(content) {
|
||||||
|
this.value(content);
|
||||||
|
this.$('textarea').val(content).trigger('input');
|
||||||
|
}
|
||||||
|
|
||||||
|
setSelectionRange(start, end) {
|
||||||
|
var $textarea = this.$('textarea');
|
||||||
|
$textarea[0].setSelectionRange(start, end);
|
||||||
|
$textarea.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
insertAtCursor(insert) {
|
||||||
|
var textarea = this.$('textarea')[0];
|
||||||
|
var content = this.value();
|
||||||
|
var index = textarea ? textarea.selectionStart : content.length;
|
||||||
|
this.setContent(content.slice(0, index)+insert+content.slice(index));
|
||||||
|
if (textarea) {
|
||||||
|
var pos = index + insert.length;
|
||||||
|
this.setSelectionRange(pos, pos);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
oninput(value) {
|
||||||
this.value(value);
|
this.value(value);
|
||||||
this.props.onchange(this.value());
|
this.props.onchange(this.value());
|
||||||
this.$('.text-editor-controls').toggleClass('in', !!value);
|
this.$('.text-editor-controls').toggleClass('in', !!value);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user