sachinchoolur / angular-trix Goto Github PK

Hello,

I hope you guys are doing great. I was wondering if I am missing out on this or does this feature need enabling or something, but is there any way to align text to center or right hand side?

Is it possible to edit the tool bar and add/remove features from it? I'm very sorry if its an obvious question, I googled and couldn't find any help and searched "issues" for "align" and it didn't get any response.

Any help in this regard will be highly appreciated.

Thank you all in advance.

I launch a modal (bootstrap) but the binding does not work.

If I put the binding in a div, I can see it is passed into modal however for the angular-trix component it does not appear.

My code is:

     $scope.editCommentDialog = function (comment) {
        var modalInstance = $modal.open({
            templateUrl: 'editCommentDialog.html',
            windowClass : 'edit-comment-modal-dialog',
            controller: function ($scope, $modalInstance, editedComment) {
                $scope.editedComment = editedComment;

                $scope.ok = function () {
                    $modalInstance.close(editedComment);
                };

                $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                };
            },
            resolve: {
                editedComment: function () {
                   return { id : comment.id,  text : comment.text};
                }
            }
        });

        modalInstance.result.then(function (editedComment) {
            $scope.editedComment = editedComment;
            $scope.updateComment();
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

and

<script type="text/ng-template" id="editCommentDialog.html">
<div class="modal-header">
    <h3>Edit</h3>
</div>
<div class="modal-body">
    <trix-editor angular-trix ng-model="editedComment.text" class="trix-content editable-trix-editor"></trix-editor>
   </div>
   <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>

How can I add table option in editor? because there is no option for table.

In IE11, deleting the last character does not update the model. You can try in your demo plunker.
Add the model to the plunker such as {{trix}}. This will print the model.
Enter a couple chars in textbox. Delete all but one character. Model will be one character. Delete last character, and the model does not update. element.on('trix-change).... does not fire for last char.

It's not working in IE 10 or Less, t's continuously showing following error.

Unable to set property 'trixMutable' of undefined or null reference

Here is demo, open it in IE 10 or Less to see issue.

I'm using angular-trix in one of my projects and recently I faced an weird problem where angular-trix doesn't work.

The problem is: I have an array of objects variable that is print in an template inside an ng-repeat, this ng-repeat calls an custom directive, that then calls trix-editor. For some reason, only if I put that custom directive in an ng-repeat logic the trix-editor is loaded, but it's content is not shown.

You can see the problem live in: http://plnkr.co/edit/sOk5GrFJuOwMNUQf8E7V?p=preview

if you just remove < directive-text > from the ng-repeat logic and replace member="member" to member="members[0]" the directive works!

#19

Had troubles rendering trix-content with target="_blank" for links and responsive images. This fixed it for me.

scope.$watch('content', function(html) {
                element.html(scope.content);
                $compile(element.contents())(scope);
                _.forEach(element.find('a'), function(el) {
                    el.target = '_blank';
                });
                _.forEach(element.find('img'), function(el) {
                    el.className = 'img-responsive';
                });
            }, true);

in a link function of a directive, where content is the html string from database:

<example-directive content="trix-html-content"></example-directive>

Hi

When I tried to install trix and run. I have error.
npm install [email protected] --save-dev
npm WARN saveError Problems were encountered
npm WARN saveError Please correct and try again.
npm WARN saveError invalid: have [email protected] (expected: latest) node_modules/angular-trix/node_modules/trix
npm WARN saveError extraneous: [email protected] node_modules/angular-trix/node_modules/trix
/Users/project/***

I checked dependancy in angular-trix is lastest.
It seem we need to fix trix version instead of lastest?

There is a way to set target="_blank" for links?

cannot work selection of text area .Right mouse pointer not worked.

Hello,

I'm want to use this impressive angular editor. So I installed angular-trix (with npm), included css and js files, and placed in my code, and finally loaded angularTrix module.

<trix-editor angular-trix ng-model="article.text"></trix-editor>

The problem is that I got this :

Through the inspector I got this :
<trix-editor angular-trix="" ng-model="article.text" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"></trix-editor>

Did I miss something to initialize ?

Thanks for considering my problem, and sorry for grammar mistakes if there are.

Yoann

i am trying to place a trix-editor in a bootstrap modal but for some reason the modal does not see it as part of the body and will render it in the footer not sure how to fix this

Do you know how support i18n for trix with angular? Thanks.

I want the editor to initialize as a bulleted list, but am having the following issue:
(note: I have the toolbar hidden since it takes up too much space for my uses)

1. Inserting a ul

$scope.trixInitialize = function(e, editor) {
  editor.setSelectedRange([0,0]);
  editor.insertHTML('<ul><li></li></ul>');
}

results in a list followed by an empty div:
<ul><li><!--block--><br></li></ul><div><!--block--><br></div>

1. I would expect the list to be inserted inside the div like insertString:

$scope.trixInitialize = function(e, editor) {
  editor.setSelectedRange([0,0]);
  editor.insertString('Hello World');
}

<div><!--block-->Hello World</div>

Am I missing something?

I would like to drag and drop (predetermined) text at the cursor location (not at the beginning) in the editor. This will be useful in creating templates using the editor. Is it possible?

All the examples, I saw use trixInitialize or other registered events but I did not see something like this in anyother text editor other than https://github.com/froala/angular-froala, which is subscription based.

I'm missing the H1 H2 buttons. They are in the newer version of Trix 1.3.1

Will there be an update?

I have the following directive code and the ng-model does not work. I understand trix-change is not fired for this element. I tried ng-if, the model is now there but it has empty value and does not change.

<div class="chapter-title">
	 <trix-editor style="width:100%;" angular-trix placeholder="write here" ng-model="mydata" ng-model-options="{debounce: 1000}">
	 </trix-editor>
	<div>mydata:{{mydata}}</div>
</div>

Without ng-if, I see the following error:

angular.js:13920 TypeError: Cannot set property 'nodeValue' of undefined
at interpolateFnWatchAction (angular.js:9741)
at interpolateFnWatcher (angular.js:12426)
at watchGroupAction (angular.js:17190)
at Scope.$digest (angular.js:17524)
at Scope.$apply (angular.js:17790)
at done (angular.js:11831)
at completeRequest (angular.js:12033)
at XMLHttpRequest.requestLoaded (angular.js:11966)

Hey Sachin

This looks really great!
Still, I have to ask:

What are the pros and cons of this "module" compared to Textangular and/or CKeditor?

Or what was the main motivation behind making a new one?

Don't get me wrong, it really looks promising and I will try it out. Since I use Textangular & CKeditor. Just would love to hear the author's voice ;)

Can i input only alphabet? how about other character like korean, japanese, chinese

Everything working perfect except text format of copied text from a word document or like is missing in IE11. Please have a workaround for this.

I couldn't find any information (here or at original trix documentation) about making editor disabled or read-only state.
So i implemented like this:
angular.element(editor.element).prop('contenteditable', false); angular.element(editor.element.toolbarElement).remove();

Any better implementation idea or any information about doing this right way?

Like this:

<div data-ng-if="showTrix">
    <trix-editor angular-trix ng-model="someModel"></trix-editor>
</div>

"someModel" is not show as content at all. I tried adding ng-if="true" to trix-editor but no luck there!

Any idea?

The library currently takes the HTML of the editor and binds it to the Angular variable. This results in some internal Trix HTML comments being added to the HTML (<!--block--> - see below). A better way is to use Trix to serialize the editor state into HTML:

Replace: ngModel.$setViewValue(element.html()); with ngModel.$setViewValue(Trix.serializeToContentType(element[0], "text/html"))

The HTML output changes from this:

<div><!--block-->Test<br><br>Now works correctly!<br><br><strong>Bold</strong> and <em>great</em> once again.<br><br><strong><br></strong><br></div>

to the nicer:

<div>Test<br><br>Now works correctly!<br><br><strong>Bold</strong> and <em>great</em> once again.<br><br><strong><br></strong><br></div>

to retrieve the text from the trix-editor the following is used
$scope.trixInitialize = function(e, editor) { editor.getDocument() // is a Trix.Document instance }
this returns the string of editor's content...
i would like to know to return the html string content of the editor
thanks

I want to make it so that if the user presses the enter key without shift, it will not add a newline, but will instead call a submit kind of function on my controller. I have previously been using textangular, but they don't have events or really anything to make this easy for me, and there i was encountering a race condition with reading the content. to test angular-trix, i made a small fork of the plunkr, see: http://plnkr.co/edit/2qC9DZEI8eOxNW74pS7J?p=preview
(the plunkr is such that it will log $scope.trix after 5 seconds)
so to test: i have the console open on the side and refresh the plunkr. immediately start typing real words. while watching for the console. you will see it log at 5 seconds, and in my tests, this had only the beginning contents of the model. How would i get the current typed text?

I am new using to angular trix. I am having some trouble in retrieving the data from the database. When I save the content from the editor to database it is saving fine but when I retrieve instead of the data what I saved, HTML tags are applying.

For example: in the editor if save Sample content as bold and when I reload the page after saving it is displayed as < div >< strong>Sample content< /strong>< /div> but I just need Sample content in bold. Please help me in fixing this issue.

Observing an extremely odd behavior while using angular-trix inside an ui.bootstrap modal. Inside modal html template if "trix-editor" element is wrapped inside a div then ng-model binding doesn't work, having said that it seems to be working fine if there is no parent div. Please take a look at plunker link for the same: http://plnkr.co/edit/C4BTOHLoXV55lXDJ1tKh?p=preview.

After putting debugger in angular-trix.js i could observe that inside following code blob:

ngModel.$render = function() {   
     if (element[0].editor) {
          element[0].editor.loadHTML(ngModel.$modelValue);
     }
....

value of element[0]:

1. trix-editor when there is no parent div.
2. trix-toolbar when there is parent div.

Probably this is the reason ng-model is not working inside div, not sure why element[0] would return different result inside bootstrap modal.

Is there a possibility to disable the input field?
I want to use it to avoid spam inputs (disable for a certain time).

How can set the initial value inside a directive?

I'm returning angular-trix editor from a directive that's constructing the content dynamically.

Thanks

Is there any option to focus on the editor ?

Angular is 2.0 RC.

I tried to base on your code but seemed not easy to integrate to 2.0RC. Could you help me?

It doesn't work. Like, at all.

I've installed trix and angular-trix using bower. Works.
Then I included the scripts using requirejs. Works too.
Then I required the angularTrix requirejs-module. Works as well.
Then I required the angularTrix angular module. Still works fine.
Then I added this to my page:

<trix-editor angular-trix ng-model=foo></trix-editor>

Which doesn't do anything. It just renders in the DOM as:

<trix-editor angular-trix="" ng-model="foo" class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope ng-empty"></trix-editor>

So not much at all.

I get no errors in the console. No network errors. No security errors. Nothing.

Angular 1.6.4, Requirejs 2.3.3, Firefox 52 & Chrome 57.

Hi, perhaps I'm not understanding something. I don't see a direct way that I would be able drag and drop a file over to the editor, for it to fire off the attachment-add method but not actually add the attachment in the document of the editor (inline). Is this possible?

Hello,

I am using angular-trix for my project and i found that, when i am on internet explorer and select code from toolbar and press enter. The functionality doesn't work as expected.

I tried replicating it here and i was able to replicate.

Kindly help asap.

How to set maxlength on trix-editor tag?

Hii,

What i am trying to do is establish a maximum size for the attachements and block files that are bigger than the value chosen. Is there a way of stop the addition of the attachement or remove them?

how to ignore the images in the editor?

Thanks for your hard work on this great implementation. When I show the text editor I need it to auto focus. How can I achieve this? Thanks.

We need to show Heading attribute in editor, I am unable to get a way to add it in Angular Trix.

Hello. I'd like to suggest one feature: When i highlight some text could be fun if i can change the color selection.

When we create multiple instances, in a ng-repeat for example, the first one does work, but the others instances aren't working properly : we can't format text (eg. bold, italic, etc)

Tested with Angular 1.5.3

Is it possible to customize the attachment HTML? Instead of an image it could be an image icon like this:

<label class="attach" contenteditable="false"> <a class="blob icon-camera" href="" target="blank"> </a> </label>

As title.

Everything is ok but when i want to get stored text to edit with trix it doesn't working.
how can i get present text in editor mode?

When using angular-trix as an input for a from, I want to be able to put a required attribute so I can use the build-in form validation from HTML5 browsers.

Any idea how to implement this? I am happy to do it, but I cannot think of a neat and simple solution right now (checking if the ng-model is set could be a solution before submitting, but this seams not very solid.)