Render HTML in editor select list

Render HTML in editor select list

peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0

I have options in an editor select list which contain HTML. Is there a way to render the HTML instead of displaying tags?

This question has an accepted answers - jump to answer

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited March 2020

    Here is an example from my own coding. The user can select from a select list or create new options herself. These newly created options are rendered using HTML.

    fields: [ {
            label: lang === 'de' ? 'Kontrahent:' : 'Counterparty:',
            name:  "contract.gov_manual_creditor_id", //render creditor name
            type: "selectize", 
            opts: {
                create: true,
                createFilter: function(val) {
                  return ( isNaN(val) || val.indexOf('.') > -1 ) ? val : false;
                },
                maxItems: 1,
                openOnFocus: false,
                allowEmptyOption: false,
                placeholder: lang === 'de' ? 
                    "Bitte Kontrahenten wählen oder hinzufügen" : 
                    "Please select a Counterparty or add one",                
                render: {
                    option_create: function(data, escape) {
                        var add = lang === 'de' ? "Neu: " : "Add ";      
                        return '<div class="create">' + add + '<strong>'
                               + escape(data.input) + '</strong>&hellip;</div>';
                    }
                  }
                },
        },
    
    1. Before starting: The user sees the placeholder

    2. The user starts typing and sees available options

    3. The user creates a new option herself. The new option is being rendered using HTML

    Found this on stack overflow: https://stackoverflow.com/questions/23206574/selectize-js-custom-rendering-with-static-html

    You'll probably find a lot more on this.

  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0

    Thanks rf1234. Actually that is a bit more than I need. The select list options are already in HTML, as they were created by ckeditor which wraps text inside para tags. I just want to render the HTML para tags, or else strip them from the select list which would be OK without affecting the list options in database.

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    Answer ✓

    You could use PHP strip_tags for example: https://www.php.net/manual/en/function.strip-tags.php

    Or you could do something similar client side. Here is an example that does both:
    a) render the options server side (you can use this to strip the tags)
    b) make them unique client side (because you can't do this on the server) (you can manipulate the options in any way you like)

    Field::inst( 'contract.kandler_investor_id' )
        ->setFormatter( 'Format::nullEmpty' )
        ->options( Options::inst()
            ->table('kandler_investor')
            ->value( 'id' )
            ->label( array('name', 'city') )    
            ->render( function ( $row ) { 
                return $row['name'].', '.$row['city'];
            } )
            ->order( 'name, city asc' )
        ),
    
    .on('xhr', function( e, settings, json, xhr ) {
        if ( json != null ) {
            if ( typeof json.options !== 'undefined' ) {
                var ol = json.options["contract.kandler_investor_id"];
                var i = 1;
                while ( ol[i] ) { //make the ordered labels unique (name, city)!!
                    if ( ol[i-1].label.replace(/\s+/g, '') === ol[i].label.replace(/\s+/g, '') ) {
                        ol.splice(i, 1);
                    } else {
                        i++;
                    }
                }
                json.options["contract.kandler_investor_id"] = ol;
            }
        }          
    });
    
  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0

    Thanks! I used the server side option:

     ->join(
            Mjoin::inst( 'program_outcome' )
                ->link( 'unit_outcome.unit_outcome_pk', 'program_outcome_unit_outcome_lookup.unit_outcome_fk' )
                ->link( 'program_outcome.program_outcome_pk', 'program_outcome_unit_outcome_lookup.program_outcome_fk' )
                ->order( 'program_outcome.program_outcome asc' )
                ->fields(
                    Field::inst( 'program_outcome_pk' )
                        ->options( Options::inst()
                            ->table( 'program_outcome' )
                            ->value( 'program_outcome_pk' )
                            ->label( 'program_outcome' )
                            ->render( function ( $row ) {
                return strip_tags($row['program_outcome']);
            } )
                        ),
                    Field::inst( 'program_outcome' )
                )
        )
        ->process($_POST)
        ->json();
    
This discussion has been closed.