Hi Brian

I would recommend you do not insert angular markup with TinyMCE, it's very dangerous. Use TinyMCE only for content.

Thanks,

Alex

Thanks for the reply. I disagree though. That’s like saying angular markup in html tags is dangerous. I am not adding actually javascript but tags that my javascript knows how to interpret. That’s like saying HTML5 tags are dangerous.

These angular tags are just html markup content.

Example

<div ng-bind=”someproperty”></div>

That is just markup. what happens is the ng-bind gets stripped out.

Fair enough but you do realize all that editor is doing is creating the underlying html markup. that is what the code menu option is all about. You can see the markup for the content.

I think what Alex was pointing at is that something more complex like angular bindings are better placed in the templates/partials, or as macros to insert.

I always tend to remove the code option from all of our RTEs. The editor shouldn't need to change the code, and if they did would be too likely to lead to a mistake.

Is there a particular reason they need to be added in via the RTE? Are you purely using the RTE, or is it part of a Grid or Nested Content/Archetype etc?

That is fair enough but what if I want my users to be able to edit some content that is co mingled with angular markup. Having them have to go to a partial to edit that content in my opinion is much worse then being able to just type in RTE the verbiage they want to change.

Example

<div class="cbos-faq-section">
    <div class="container">
        <h2 class="cbos-section-heading cbos-heading-overline cbos-heading-overline--center">FAQs</h2>
        <h3 class="cbos-accordion-title">New To Open Sky</h3>
        <div class="accordion cbos-accordion" id="accordion1">
            <div class="panel-group">
                <div ng-repeat="item in newItems">
                    <div class="panel question{{item.Index}}" ng-if="item.IsPage == false">
                        <div class="panel-heading">
                            <p class="cbos-accordion-panel-heading">
                                <a data-toggle="collapse" data-parent="#" class="collapsed question{{item.Index}} question" id="#question{{item.Index}}" aria-expanded="false" href="#question{{item.Index}}" ng-bind="item.Question">

                                </a>
                            </p>
                        </div>

                        <div id="question{{item.Index}}" class="panel-collapse collapse" ng-if="item.IsPage == false">
                            <div class="panel-body" ng-bind-html="item.Answer | trust">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h3 class="cbos-accordion-title">Have you submitted an application?</h3>
        <div class="accordion cbos-accordion" id="accordion2">
            <div class="panel-group">
                <div ng-repeat="item in alreadySubmitted">
                    <div class="panel question{{item.Index}}" ng-if="item.IsPage == false">
                        <div class="panel-heading">
                            <p class="cbos-accordion-panel-heading">
                                <a data-toggle="collapse" data-parent="#" class="collapsed question{{item.Index}} question" id="#question{{item.Index}}" aria-expanded="false" href="#question{{item.Index}}" ng-bind="item.Question">

                                </a>
                            </p>
                        </div>

                        <div id="question{{item.Index}}" class="panel-collapse collapse" ng-if="item.IsPage == false">

                            <div class="panel-body" ng-bind-html="item.Answer | trust">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

What if I want my users to be able to change the content in those h3 tags?

I understand I could build a partial for each ng-repeat but that seems like partial overkill. It would be much cleaner if the tinyMCE did not strip out ng- tags

In that sort of situation I would probably use a repeating content (Nested Content/Archetype).

That would allow users to just add each repeating section, filling in just the required variables i.e

• Heading
• Ng-repeat type

You could then loop through each of those and render using one view, filling in the the blanks from that editor. Would remove some of the chance for error.

Afraid I can't help any more with the config for TinyMCE as it's not something I have really played with, as I tend to avoid advanced markup in it.

It is not ideal to place markup in the tinyMCE editor. As the Anthony already suggested ideal is to use Nested Content or Archetype. I also want to suggest the Stacked Content is pretty good too.

https://github.com/umco/umbraco-stacked-content

I didn't understand why you need Angular markup in TinyMCE also.

Classic repeated content, you can implement as you want, Archetype, Nested Content even child nodes :)

is working on a reply...