Render HTML in editor select list

peterbrowne

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

rf1234

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.

peterbrowne

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.

rf1234

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;
        }
    }          
});

peterbrowne

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();