Make each word in text-box clickable by surrounding them with <span>

0
Hi fellow Mendixers!   In my app, users will read Chinese articles to study the language. For the greatest convenience, each word of the article should be clickable, triggering a microflow that provides a translation for the word.   I used Repl.it to successfully test a HTML/Jquery script doing this by manually putting <span> around each word (see below). Then I copied the Jquery part into an HTML snippet. Then I made a microflow that parses an article strings and puts <span> around each word (see example below). What I think should be the final step is to put the spanned text in a textbox. However, a regular textbox will display <span> as text (see picture below), rather than reading it as an HTML element. What would be a good approach to display the textbox as intended with clickable words function working? Do I need a custom widget for that and is such a widget available?     Big thumps up for the lady or gent with the magic solution.   Cheers, Paul   Picture of result with regular text-box   Example of working microflow Original article text: 担心自己的东西在安检时候被偷？一女子跟着自己的包进了安检机。 Article text after microflow: <span>担心</span> <span>自己</span> <span>的</span> <span>东西</span> <span>在</span> <span>安检</span> <span>时候</span> <span>被</span> <span>偷</span> ？<span>一</span> <span>女子</span> <span>跟着</span> <span>自己</span> <span>的</span> <span>包</span> <span>进</span> <span>了</span> <span>安检</span> <span>机</span> 。     Repl.it code <!DOCTYPE html> <html>   <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width">   <title>repl.it</title>   <link href="index.css" rel="stylesheet" type="text/css" /> <style> div.mx-name-textArea2 div label span{ font-size: 30px;   } </style> </head>   <body>   <div class="mx-name-textArea2">     <div>       <label> <span>word 1</span> <span>word 2</span>   </label>     </div>     </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   <script> jQuery(".mx-name-textArea2 div label span").on("click", function () { //We extract the text from the element clicked - Works for <p> elements, to be tested on <span> var microflowInputString = jQuery(this).text(); //console.log($(this).attr('class')); console.log(microflowInputString)   }); </script>   </body>   </html>  
asked
2 answers
1

Did not test this but it might work to use the CKEditor widget from the appstore.

This widget will display html correctly.

Give it a try: https://appstore.home.mendix.com/link/app/1715/Mendix/CKEditor-For-Mendix

answered
0

Thank you Erwin, the CKEditor viewer works exactly liked needed.

 

Now I'm just struggling with the interaction between the CKEditor viewer widget and the HTML snippet.

Can anybody see why it's not working?

 

CKEditor viewer

Name: cKEditorViewerForMendix1

Output as shown by Chrome inspector:

 

HTML snippet

 

HTML snippet full code

jQuery(".mx-name-cKEditorViewerForMendix1 div label span").on("click", function () {

  //We extract the text from the element clicked - Works for <p> elements, to be tested on <span>

  var microflowInputString = jQuery(this).text();

  //We create a new object of a new entity because the Mendix client API doesn't have an interface for strings being given as an input into microflows

  mx.data.create({

    entity: '<Data_Import>.<LookupValue>',

    callback: function (obj) {

      //We set the word from the form as an attribute part of your new entity, I used "Word" as an example, make sure this matches your new entity

      obj.set('Value', microflowInputString);

      mx.data.action({

        params: {

          applyto: "selection",

          actionname: "<Breakdown>.<ACT_LookupWord>",

          guids: [obj.getGuid()],

          origin: this.mxform

        },

        error: function (error) {

          alert(error.description);

        }

      });

    },

    error: function (e) {

      console.log('an error occured: ' + e);

    }

  });

});

 

Other info

ACT_LookupWord: Microflow to  translate a word. Triggered by clicking a word in the text. 

Breakdown: Module containing ACT_Lookupword microflow

Value: input paramater for the ACT_LookupWord microflow

LookupValue: Entity containing Value attribute

Data_import: module containing lookupvalue entity

 

 

answered