Comments (3)
@mayur9293 try to set the caret at the end with the following snippet:
const el = this.editor.ngxWigEditable.nativeElement;
setTimeout(() => {
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
});
from ngx-wig.
I tried using @HostListener
over the ngx-wig to get the selectionStart
or the cursor's position. Which works absolutely fine on TextArea. But it returns undefined
for ngx-wig.
The sample code looks something like this
@Directive({
selector: '[TagGenerator][ngModel]'
})
export class TagGeneratorDirective {
@Output() ngModelChange: EventEmitter<any> = new EventEmitter();
constructor(private el: ElementRef, private render: Renderer) { }
@HostListener('keyup', ['$event']) onInputChange(event) {
// get position
let pos = this.el.nativeElement.selectionStart;
let val = this.el.nativeElement.value;
if (SomeLogic) {
// Change ngModel here
this.render.setElementProperty(this.el.nativeElement, 'value', val);
this.ngModelChange.emit(val);
// set the cursor position to old place
setTimeout(() => {
this.el.nativeElement.selectionStart = pos;
this.el.nativeElement.selectionEnd = pos;
});
}
}
Where I am using this directive something like this
<ngx-wig [(ngModel)]="value" TagGenerator [buttons]="'bold,italic'" >loading</ngx-wig>
Am I doing something wrong? Any help would be appreciated.
from ngx-wig.
@mayur9293 try to set the caret at the end with the following snippet:
const el = this.editor.ngxWigEditable.nativeElement; setTimeout(() => { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); });
This worked like magic.
Is there a way to set the caret in between or towards the previous position??
from ngx-wig.
Related Issues (20)
- [idea] CI to publish on npm HOT 2
- bubble editor
- Erroneous behavior trying to delete text from the editor HOT 4
- Custom Buttons for version 11.0.0.
- Event on blur HOT 1
- Use with validators HOT 1
- hide toolbar and change styles HOT 4
- configure it uses only tags I decide HOT 4
- Where is version 12 of the npm package? HOT 3
- Angular 13 support HOT 4
- Custom dropdown
- Remove legacy code HOT 1
- <br> tag left after textarea clear HOT 5
- Improve documentation about custom buttons. HOT 5
- Application error when custom button does not set `styleClass`
- Angular 14 support HOT 3
- Migrate to ESLint HOT 7
- npm package public version is still 13.2.6 HOT 1
- Angular 15 support HOT 7
- Angular 18 Update HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-wig.