Focus tinyMCE

[Ansrala]

I have a textarea (tinyMCE) that i need to focus when it is loaded but i cannot figure out how to do that. am i just missing something?

[deeg]

You should be able to do this by adding a setup function on the options:

scope.tinymceOptions = {
                        setup: function(editor) {
                            $timeout(function(){ editor.focus(); })
                        }
                    };

The timeout may be needed to make sure the editor is rendered on the page before trying to focus.

[Ansrala]

Thanks! Will try that out a bit later

[Ansrala]

okay so this is my option code

$scope.tinyMceOptions = { setup: function(editor) { console.log('test1'); $timeout(function () { console.log('test2'); editor.focus(); }) }, statusbar: false, menubar: false, resize: false, toolbar: 'formatselect | bold italic underline | bullist numlist | undo redo ' };

this is my html

<textarea ui-tinymce="{{tinyMceOptions}}" name="body" class="message-body-input" ng-model="message.content"></textarea>

It works but the setup function doesn't run (no logs) and it doesn't focus. Any ideas?

edit: i guess i don't know how to get it to format so sorry for that

[deeg]

As a side note you can get it to format by using markdown. Wrap your code with ``` on either side.

Are the rest of the options working as they are supposed to? I know there is an issue listed here that sometimes supplying the options from the scope does not work.

If the other options are working, but setup is not being called, then I'm not sure with the information you have provided.

Can you make the HTML show up by using formatting. That might give me some better info.

[Ansrala]

The other options are working as intended. I have modified the ui-tinymce demo and i am getting the same issue

I will try it put it all in a plunkr or something tomorrow.

[deeg]

What version of the library are you using?

[deeg]

My setup function is running, but I'm also having trouble getting the editor to focus. I will report back when I have figured it out.

[Ansrala]

for tinymce.min.js 4.2.6 (2015-09-28) for ui.tinymce its whatever was on master a week ago.

Thanks for the help btw.

[deeg]

So everything is working for me with the latest release (v0.0.10) with the code I posted above.

Can you try again after updating and let me know if you are still having issues?

If you are can you please post a Plunker with your example so I can take a look at what is going on.

As a side note: Even after you get focus working like I did above, TinyMCE for some reason still puts the cursor at the beginning of all the content. I think the better place for it is at the end of the content. I opened this bug on their page, and I hope to get a PR into them soon. You can see the fiddle attached to that page for the issue I am seeing. Please upvote it if you would like to see a fix too! In the mean time you can use the suggestion at this post on how to get the cursor to the end of the content. This is what worked for me:

$timeout(function() {
    editor.selection.select(editor.getBody(), true);
    editor.selection.collapse(false);
    editor.focus();
 });

This would go in your setup function.

[Ansrala]

Still not firing the setup function I tried making a plunk... but never done that before and it isn't going so well. So what I have done instead is updated everything and did the the bower install and modified the demo code and will now just post it here.

in the demo.html I replaced ui-tinymce="{trusted: true}" with ui-tinymce="{{tinyMceOptions}}"

and my entire demo.js

  .controller('DemoCtrl',['$scope', '$sce', '$timeout', function($scope,$sce,$timeout) {
    var ctrl = this;
    $scope.tinyMceOptions = {
                        setup: function(editor) {
                            console.log('test1');
                            $timeout(function () {
                                console.log('test2');
                                editor.focus();
                            })
                        },
                        statusbar: false,
                        menubar: false,
                        resize: false,
                        toolbar: 'formatselect | bold italic underline | bullist numlist | undo redo '

                    };
    this.updateHtml = function() {
      ctrl.tinymceHtml = $sce.trustAsHtml(ctrl.tinymce);
    };
  }]);```

[deeg]

Are you sure you saw the other options working?

You need to use the directive with options like this ui-tinymce="tinyMceOptions"

Here is a working Plunker which demonstrates the focus and options working with the latest release.

I don't like to have to use a timeout, especially of that length, and I'm still looking into fixing that. I however see that more of a TinyMCE issue since their setup function is supposed to run once the editor is ready for use.

[Ansrala]

well good news removing the curylies and adding actual time to the $timeout made it work. But yeah I am sure I saw the other options working. no idea why they worked but setup didn't.

Thanks for the help. I only got it working in the demo and will try it again sometime tomorrow on the actual app i care about.

[deeg]

I am going to close this issue. If you have any more bugs please feel free to open a new issue with an attached Plunker demonstrating.

[rootux]

I was looking for a way to do that. you should add this to the documentation - that users can pass a setup function to the 'options'

setup: function(editor) { $timeout(function(){ editor.focus(); }) }

[deeg]

@rootux, thanks for the suggestion. I will add something to the documentation.