选择后如何将提及包裹在特殊的 span 标签中?喜欢 Facebook 或 Stackoverflow 标签
How to wrap the mention in a special span tag after selecting it? Like Facebook or Stackoverflow tags
我正在使用 ment.io 允许使用提及的 AngularJS 插件。
但我无法找到如何更改所选提及项的外观。
例如在计算器中
例如在Facebook
我意识到关键是
我必须有以下指令:
.directive('contenteditable', ['$sce', function($sce) {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function(scope, element, attrs, ngModel) {
function read() {
var html = element.html();
// When we clear the content editable the browser
// leaves a <br> behind
// If strip-br attribute is provided then we strip this out
if (attrs.stripBr && html === '<br>') {
html = '';
}
ngModel.$setViewValue(html);
}
if(!ngModel) return; // do nothing if no ng-model
// Specify how UI should be updated
ngModel.$render = function() {
if (ngModel.$viewValue !== element.html()) {
element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
}
};
// Listen for change events to enable binding
element.on('blur keyup change', function() {
scope.$apply(read);
});
read(); // initialize
}
};
}])
我需要将看起来像文本区域或输入文本的 div 标记为 contenteditable
无论我想做什么奇怪的跨度,我都需要相应地改变这个功能
$scope.getPeopleText = function(item) {
// note item.label is sent when the typedText wasn't found
return '<span class="menu-highlighted">' + (item.name || item.label) + '</span>';
};
我正在使用 ment.io 允许使用提及的 AngularJS 插件。
但我无法找到如何更改所选提及项的外观。
例如在计算器中
例如在Facebook
我意识到关键是
我必须有以下指令:
.directive('contenteditable', ['$sce', function($sce) { return { restrict: 'A', // only activate on element attribute require: '?ngModel', // get a hold of NgModelController link: function(scope, element, attrs, ngModel) { function read() { var html = element.html(); // When we clear the content editable the browser // leaves a <br> behind // If strip-br attribute is provided then we strip this out if (attrs.stripBr && html === '<br>') { html = ''; } ngModel.$setViewValue(html); } if(!ngModel) return; // do nothing if no ng-model // Specify how UI should be updated ngModel.$render = function() { if (ngModel.$viewValue !== element.html()) { element.html($sce.getTrustedHtml(ngModel.$viewValue || '')); } }; // Listen for change events to enable binding element.on('blur keyup change', function() { scope.$apply(read); }); read(); // initialize } }; }])
我需要将看起来像文本区域或输入文本的 div 标记为 contenteditable
无论我想做什么奇怪的跨度,我都需要相应地改变这个功能
$scope.getPeopleText = function(item) { // note item.label is sent when the typedText wasn't found return '<span class="menu-highlighted">' + (item.name || item.label) + '</span>'; };