vitalets / angular-xeditable

Edit in place for AngularJS
http://vitalets.github.io/angular-xeditable
MIT License
1.91k stars 403 forks source link

e-ta-max-text to count html tags #571

Closed bmickoski closed 7 years ago

bmickoski commented 7 years ago

I am using editable-text-angular for rich editor. I am using e-ta-max-text attribute for counting max characters. This is working fine. However I was curious if I can somehow change this e-ta-max-text to count also html tags, for example:

asd

to count 10 characters and not 3. For text-angular part i added one more charcountall with taRegisterTool: ` taRegisterTool('charcountall', {` `display: '
Characters with markup:
',` ` disabled: true,`, ` charcountall: 0,`, ` activeState: function () { // this fires on keyup`, `var editor = this.$editor();`, `var html = editor.html;`, ` var noOfChars = html.length;`, `this.charcountall = noOfChars;`, `editor.charcountall = noOfChars;`, `return false;` `}` I am using this editable-text-angular in this way: ``
ckosloski commented 7 years ago

I don't understand what your question is for xeditable? Counting is an issue for text-angular and not xeditable.

bmickoski commented 7 years ago

@ckosloski you are right I should have add this question to textAngular github cause this ta-max-text is from that directive... Sorry for this.

ckosloski commented 7 years ago

NP, please close this issue.

bmickoski commented 7 years ago

Hey @ckosloski sorry for reopening this again, but I have one question. Can I use ng-maxlength for editable-text-angular? I was using e-ta-max-text but it is not counting html tags so my idea is to use ng-maxlength and to disable save button if we have maxalenth form error. Something like this:

<form editable-form name="editableTitleForm"> <div> <a class="clickable" editable-text-angular="reviewvm.findingOrObservationTitle" e-name="title" ng-maxlength="5" ng-click="editableTitleForm.$show(); edit = true" ng-show="!editableTitleForm.$visible"> <div ng-if="reviewvm.findingOrObservationTitle" data-ng-bind-html="reviewvm.findingOrObservationTitle"></div> </a> </div> <span ng-show="editableTitleForm.$visible"> <button type="submit" class="btn btn-primary" ng-disabled="editableTitleForm.$waiting || editableTitleForm.title.$error.maxlength"> Save </button> </span> </form>

ckosloski commented 7 years ago

You would have to use e-ng-maxlength="5"

bmickoski commented 7 years ago

hm... I tried also with e-ng-maxlength but it is not working. I tried in in this way:

<a class="clickable" editable-text-angular="reviewvm.findingOrObservationAddBac" e-name="background" e-ng-maxlength="5" ng-click="editableBackgroundForm.$show(); edit = true" ng-show="!editableBackgroundForm.$visible">

<button type="submit" class="btn btn-primary" ng-disabled="editableBackgroundForm.$waiting || editableBackgroundForm.background.$error.maxlength"> Save </button>

And when I reach 5 characters button is not getting disabled.

ckosloski commented 7 years ago

Is the ng-maxlength being placed on the input created by text-angular directive?

bmickoski commented 7 years ago

hm...I was somehow thinking that this e-ng-maxlength can also work on a href tag on which we have this editable-text-angular. I suppose I cannot do that so will close this issue. Also I tried to somehow get this charcount from text-angular with textAngularManger.retireveEditor('title').charcount but it is not working with combination with angular-xeditable....

ckosloski commented 7 years ago

The only other thing you could try is maybe add a e-ng-change="countMethod($data)" which calls a method to see the length of the current input and displays an error.

bmickoski commented 7 years ago

Well that can be a good solution I will give a try, but I also just implement it in this way:

I am using onbeforesave function on href tag and I am checking if characters together with html tags are more that max return string message that will be showin before reach text editor.

<a class="clickable" editable-text-angular="reviewvm.findingOrObservationTitle" e-name="title" e-form="editableTitleForm" onbeforesave="reviewvm.checkCharacterLength($data, editableTitleForm)"

function checkCharacterLength (data, form) { var length = data.length; switch (form.$name) { case 'titleForm': if (length > 1000){ return 'character length exceeded' } } }