Comments (17)
If anyone reaches here in search for @mentions for Angular 2+ with support for HTML in [contenteditable]
, I've created ngx-tribute, an Angular 2+ wrapper for @mentions library written in pure JS - Tribute
from angular-mentions.
@dmacfarlane I've created PR resolving this issue: #50
from angular-mentions.
Can I apply CSS to element selected using mentionSelect
from angular-mentions.
@gurpreet2-kaur I don't see a reason why you couldn't
from angular-mentions.
I am using function [mentionConfig]="{maxItems:2,mentionSelect:modifyvalue}
modifyvalue(input){
return 'input.label';
}
This value is returned as is and the color is not applied . I want to apply color to the selected item/
Please suggest
from angular-mentions.
@agarbund hi..
Is it formatting supposed to work like this:
onMentionSelect(selection): string {
return '<b>' + selection.label + '</b>';
}
Because the result in my textarea
is just "<b>Text</b>" instead of "Text" .. any idea?
<textarea matInput [rows]="4" style="resize: none;"
type="text" [mention]="mentions"
[mentionConfig]="{mentionSelect: onMentionSelect}">
</textarea>
from angular-mentions.
@silentsnooc you can't have a formatted text in textarea
. You need to use [contenteditable]
attribute if you need formatting.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
from angular-mentions.
@agarbund Could you provide an example? This is not working for me:
<div [mention]="mentions" [mentionConfig]="mentionConfig" contenteditable
style="padding-bottom: 24px;">
</div>
I am still getting " <b>Text</b>".
from angular-mentions.
@silentsnooc can I see the issue somewhere? jsbin or sth like that
from angular-mentions.
@agarbund I created a stackblitz example: https://stackblitz.com/edit/angular-389kgl
from angular-mentions.
@silentsnooc an example you've attached is using a version of angular-mentions
from npm. Feature of supporting formatted text was never merged, so it's not available in the npm package. If you want to use it, you'd need to install my fork directly from a git repo: npm i https://github.com/agarbund/angular2-mentions
.
I couldn't import a package directly from git on stackblitz demo, but if you want to see a working example of formatting a selected item, then clone my fork, run npm i && npm start
, and check example with contenteditable.
If you prefer to stick with packages from NPM you might also check a package I've published recently.
from angular-mentions.
I am still getting
"<b>Text</b>"
.
I know this issue is quite old but this happens to me as well in a tinymce using iframe..
@dmacfarlane any plans on this? or am I missing something?
thanks!
from angular-mentions.
@agarbund I created a stackblitz example: https://stackblitz.com/edit/angular-389kgl
hi @silentsnooc Is it working now?
from angular-mentions.
@tanmayrajani, my work-around for that is to return a blank string, wait a tick with setTimeout so the search term gets cleared out, then insert the html manually using tinymce's API.
from angular-mentions.
@agarbund Could you provide an example? This is not working for me:
<div [mention]="mentions" [mentionConfig]="mentionConfig" contenteditable style="padding-bottom: 24px;"> </div>
I am still getting " Text".
Still, I am facing the same issue,
from angular-mentions.
Closing in favor of #170.
from angular-mentions.
@tanmayrajani, my work-around for that is to return a blank string, wait a tick with setTimeout so the search term gets cleared out, then insert the html manually using tinymce's API.
Can you please explain the exact solution or a stackblitz if possible.
from angular-mentions.
Related Issues (20)
- Need an event when removed after mension item
- Build error after update version 1.5 HOT 3
- How to use the directive with async API results? HOT 3
- Support for angular 13 HOT 4
- How to show list mention after select mention item ?
- Is this project dead?
- Angular 11 Error: ./node_modules/angular-mentions/fesm2015/angular-mentions.mjs 1075:12-24 Can't import the named export 'CommonModule' from non EcmaScript module (only default export is available) HOT 1
- having multiple text areas with mentions configured in a div and if div has scroll then mentions dropdown is not showing in correct postion HOT 1
- Angular 14 Support? HOT 2
- How can we highlight or bold selected(Mention) words HOT 1
- Incorrect peer dependency range
- Angular 15 issues? HOT 2
- No records matched / found message HOT 1
- How can I remove the mentioned user from mentioned items list once I have already mentioned it?
- I have mentioned the same user again then the font is not bold and the same user is a third-time stack in the mentioned list
- Version 1.4 is throwing this error. This application depends upon a library published using Angular version 14.0.6 HOT 3
- We need to remove mention user list event. HOT 1
- @Output itemSelected doesn't emit on contentEditable after selecting text and triggering with '@' HOT 2
- Dropdown displaying issue HOT 3
- mouse click not working when used with angular-editor HOT 1
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 angular-mentions.