We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36805
    • 354 Posts
    Hello everyone,

    A graphics designing colleague supplied me with some ’elements’ consisting of a css file with some class definitions, some images and an example html file showing its use.
    Basically these elements just put some graphics around some text (like prices etc.) that is placed inside the innermost div. The graphics themselves are styled by class definitions that apply to the outer divs.

    I’ve been asked to add some form of support to TinyMCE for adding these elements i.e. applying them to certain text entered in the content.
    The problem is however that I don’t know if and how I can configure TinyMCE to support custom HTML code insertion. At least not without using the code editor and do it manually which is not an option for us to use.

    Below I’ve included an example of the html I want to help my users produce:

    	<div class="outer">
    		<div class="container">
    			<div class="text">877,89</div>
    		</div>
    	</div>
    


    I had a look at adding css selectors but they don’t seem to be very configurable at all. They use only spans (i’d prefer divs but this is not a big problem) and can only add a class reference to it. It doesn’t provide help for adding arbitrary tags wrapping the text that has been selected in the editor which would be what I need.

    Any help would be greatly appreciated! Thanks in advance.
      • 25969
      • 118 Posts
      Semi-complex HTML structures are obviously best kept as abstracted(?) from the content fields of documents as possible. If at all possible, standardized fields can obviously be handled by TVs used in templates with their relevent HTML structures marked up there. It would be great if basic structures could be "widgetised" in the TVs settings.

      That said, TinyMCE could easily handle marking this up with a couple of clicks here and, with the relevent classes defined in the Configuration, application of a class to a DIV.
        • 36805
        • 354 Posts
        Quote from: sal at Dec 04, 2007, 09:00 PM

        Semi-complex HTML structures are obviously best kept as abstracted(?) from the content fields of documents as possible. If at all possible, standardized fields can obviously be handled by TVs used in templates with their relevent HTML structures marked up there. It would be great if basic structures could be "widgetised" in the TVs settings.
        I don’t see how TV’s would solve the described case. Also I don’t quite get what you mean by "widgetised". Could you please elobarate on this a little further?
        Quote from: sal at Dec 04, 2007, 09:00 PM

        That said, TinyMCE could easily handle marking this up with a couple of clicks here and, with the relevent classes defined in the Configuration, application of a class to a DIV.
        This is one of the issues I encountered like described in my first post. The classes, as it seems, are not applyable to arbitrary things (like a DIV) but adds this ugly unconfigurable code : <span class="your_class_selector">the text you selected to apply it to</span>.
          • 25969
          • 118 Posts
          What I mean by "widgetised" is that when you set up a TV, you’re able to apply a "widget" or basic formatting to the TVs output. For example, say you want to make a banner image of your website a TV. What you’d do is make a new TV called banner, make the Input Type "image" and then lower down, change the Widget value to image. You can set the properties with values like [*longtitle*], etc. Whenever this TV is referenced in a template, an <img /> element will be output instead of just the image path. There is provision for a single element wrapper of the TV’s value but not custom structures.

          Also, for semi complex HTML structures, you’d need to select the text you want wrapped and then select a block element (like "div") from the relevant input field of TinyMCE. Nesting is made slightly easier using the DOM path in the "status bar" of TinyMCE.
          • Here is an excellent way to extend the existing TV "widget" selection:
            http://wiki.modxcms.com/index.php/Adding_TV_Widgets_without_hacking_the_core
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org