Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Brian Rush 25 posts 95 karma points
    Aug 30, 2017 @ 19:26
    Brian Rush
    0

    TinyMCE to allow for Angular tags in markup

    Hi I am using Umbraco version 7.6.5. I am trying to allow for angular tags in my markup that I enter using the tinyMCE editor

    Here is an example

    <div ng-controller="HelpController" id="ng-app" block-ui="main" ng-cloak>
    </div>
    

    What happens though is the ng-controller tag gets stripped out.

    I edited the validElements of the tinyMCEConfig.config

    and added +div[*]

    I also tried

      <validElements><![CDATA[*[*]]]></validElements>
    

    But upon saving it is always stripping out my angular tags.

    Any suggestions?

    Thanks

  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 01, 2017 @ 10:13
    Alex Skrypnyk
    0

    Hi Brian

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

    Thanks,

    Alex

  • Brian Rush 25 posts 95 karma points
    Sep 01, 2017 @ 12:01
    Brian Rush
    0

    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.

  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 01, 2017 @ 13:46
    Alex Skrypnyk
    0

    TinyMCE is for content, not for markup.

    I wanted to say that you can't control editors.

  • Brian Rush 25 posts 95 karma points
    Sep 01, 2017 @ 14:13
    Brian Rush
    0

    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.

  • Anthony Chudley 50 posts 197 karma points
    Sep 01, 2017 @ 15:44
    Anthony Chudley
    1

    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?

  • Brian Rush 25 posts 95 karma points
    Sep 01, 2017 @ 15:56
    Brian Rush
    0

    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

  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 04, 2017 @ 10:07
    Alex Skrypnyk
    0

    Hi Brian

    Did you solve the issue? Can you share with our community how did you decide to deal with it?

    Thanks,

    Alex

  • Anthony Chudley 50 posts 197 karma points
    Sep 01, 2017 @ 16:04
    Anthony Chudley
    0

    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.

  • Marcio Goularte 374 posts 1346 karma points
    Sep 01, 2017 @ 16:35
    Marcio Goularte
    0

    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

  • Alex Skrypnyk 6132 posts 23951 karma points MVP 7x admin c-trib
    Sep 01, 2017 @ 16:37
    Alex Skrypnyk
    0

    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 :)

Please Sign in or register to post replies

Write your reply to:

Draft