tinymce fails to render the tinymce model in the textarea after changing the order of the list that tinymce is in

[leonzinger]

I have a list of items, one of the items can be a tinymce editor. this list can change the order of the items in it. once i change the order of the items, my tinymce stops working.

here is a demo of my code(haml):

%li{:"ng-repeat"=>"item in items | toArray | orderBy:'position'",:class=>"item",:"ng-class"=>"{in_edit:item.in_edit}"}
.edit{:"ng-show"=>"item.in_edit"}
.close_item{:"ng-click"=>"remove(item)"}
.save_item{:"ng-click"=>"save(item)"}
.include{:"ng-include"=>"",:src=>"item.type"}

%script{:type=>"text/ng-template", :id=>"text"}
%textarea{:"ui-tinymce"=>"",:"ng-model"=>"item.body"}

[ProLoser]

Can you create a standalone plunker or fiddle that reproduces this to help us debug the issue?

P.S.
I hate HAML. I don't get how angular-syntax in HAML is considered more elegant than HTML
/rant

[leonzinger]

I have already found a workaround. because that the textfield of tynimce is rendered in ng-include, what i did is remove the included DOM and put it back again, just by this peace of code:

$scope.afterChange = (items) ->
_.each items,(item) ->
if item.type == 'text'
$timeout (->
item.type = ''
),0
$timeout (->
item.type = 'text'
),0

I will try to put something to play with for debugging as well.

[grobmeier]

I believe I am running into the same issue, but really can't read this HAML.

I am creating a list of TinyMCE editors:

<script type="text/ng-template" id="ParagraphRenderer"> <textarea class="tinymce-container" ui-tinymce ng-model="paragraphs[element.params.id]"></textarea> </script>

Please note: I am actually having a list of elements which call the paragraph renderers, but the model is used from a different place. I know this causes sceptics but it makes perfect sense in my environment.

When I am deleting an element from the list and the matching pargraph model, the DOM part actually disappears.
Unfortunately all following TinyMCE instances are "gray" and not longer usable.

For example, in a list of 10 TinyMCEs I delete number 5, and 6 - 10 are damaged. 1- 4 work.

[vijay04]

Any update on this issue ?? I am also facing this issue.

[wesleycho]

Can someone try reproducing this issue with the latest release?

[nobitagit]

I've recreated the issue in a jsBin:

http://jsbin.com/tixoyu/7/edit?js,output

This is an example with ui-sortable.

Some things to notice here:

1. at the beginning editor works as expected.
2. if you drag and change the order of the list items after the dragging ends the editor won't show the text anymore
3. if you press some buttons (for example 'bold text'), you will see that the link with the original model is not lost as the changes will be reflected in the sample text above the editor, which is the very same property of the same model.
4. if you inspect the editor you will see that the body in the iframe is just empty.
5. if you press the 'toggle' button I provided it will force a refresh of the directive (with a short evaluation of ng-if) which will get back the editor to work again.

If anyone is in need of a quick and dirty solution a possibility is to hook into the 'end' event of the sorting and refresh the directive, but definitely there must be a better way to handle this case, which unfortunately I am still unaware of.

I will post back if I'll find any proper way to solve this issue.

[wesleycho]

Just noting here, I have a simpler plunker that reproduces the issue here.

I believe I am close to a fix that creates support for a new $scope event to programmatically trigger refreshing of the directive, and hope to have one pushed up today.

[atodicebear]

Is this Solved?
Im still facing this Problem

Just nothing here, I have a simpler plunker that reproduces the issue here.

Its still the same as mentioned from @wesleycho
I have a Table with Editors with Pagination.
Sorting this Table works fine as long there are more than >1 Pages.
As soon through Search,Filter, Deleting and so on only 1 Page lasts the Sort destroys the Editors.
As before mentioned still holding the Content but Whiteblocking the Editor -> No Edits and Functions Possible.

Is this the Solution to implement every Time we work with Manipulating the Order of the Editors
PR
Or will there come something Inhouse solution in UI-Tiny?
With this Workaround it is working fine now if there is only one Page.
As soon there is more than 1 Page it is 'cloning' the Editors and I have the Same Editors twice in a Row
Could be a Problem with the new Method of ID Creating? DuplicateIdFix
It is going to fast for the 'tinymce:refresh' to check IDs so it is creating new Editors with new ID in the same Row.
Increasing the Time of the $timeout is doing the Trick atm or just going without Timeout

      // $timeout is so the re-ordering occurs before refresh triggers
      $timeout(function() {
        $scope.$broadcast('$tinymce:refresh');
      }, 500);
         /* or just
          $scope.$broadcast('$tinymce:refresh');
        */

[prasadchaugule]

@atodicebear You saved my day. Worked like charm. Thanks!