Autocompleter and HTML in drop-down

[offenburger]

Is your feature request related to a problem? Please describe.
Dear All,
I'm an academic user of Tiny, using it for a research management system, and I have a feature request/bug report regarding Tiny 5's Autocomplete feature. I use Tiny in this particular instance to type "@" and lookup citations that I have previously entered into my database (in HTML format). You'll see in the first screenshot that it pulls in the citation data, which is in HTML formatting, but it does not format the HTML itself.

I'm wondering if you can enable HTML formatting in this drop-down. (It DOES paste the correct formatting to the Tiny editor, as seen in this screenshot:

Describe the solution you'd like
I'd like to see one of two solutions, please:
1 - please either have the drop-down render HTML code; or
2 - please develop Autocompleter such that two columns can be passed to the drop-down -- one column to appear in the drop-down, and a second column to be inserted into the WYSIWYG editor. If this were developed, I could strip the HTML from the text, and thereby help with alphabetizing the entries in addition to readability in the drop-down, and then paste the entire original text (with HTML) into the editor.

Why this is important
This is a critical fix because the presence of HTML in the drop-down affects the sort order of the list, nearly making sorting worthless. It also causes a search string to fail like, for example, "hello world" (with italics) because that will be rendered in the box as "hello world."

Thank you!

[lnewson]

@offenburger I'm not sure I understand point 2 please develop Autocompleter such that two columns can be passed to the drop-down as the autocompleter already provides this functionality provided you set columns: 1 when registering the autocompleter, as there's a separate text and value properties. Here's an example: http://fiddle.tinymce.com/aWgaab/1

Nonetheless, this is something we've also had requested in a PR before so I'll label this as a feature request.

[offenburger]

@lnewson Thank you. Glad to hear that HTML in the selector is in the works, or is being considered.

Re: the two columns, I was not aware it could function this way. Admittedly, part of my problem is that I'm a complete novice to JS (as a history professor!). What you've given via fiddle looks like it can work perfectly for our platform. One hitch, though -- we're needing to query a database to construct the "var" field to get the two columns.

Right now I have Tiny querying an external_plugin developed by a friend/contact for only one field:
external_plugins: {
'citations': 'https://sourcenotes.miamioh.edu/plugins/citations/plugin.js'
}

As you can see in the JS link above, the file it's querying is "sourceprovider2.asp," which I have querying the db and returning data via json. (It's presently restricted via a session state.)

Is it possible to have this plugin do two return columns as your current "var" is doing? Alternatively, if the external_plugin route isn't necessary, is there a way to query a db to define "var"?

Apologies in advance for such novice questions. I'm in above my head here and am much better equipped to answer questions about 19th century western history. That said, I do have .asp and HTML programming chops and can implement answers if given a little guidance.

Many thanks!

[lnewson]

No worries at all and sorry that was just meant to be more of a pseudo example, as being a fiddle we don't have a backend to fetch from, so the variable was just a workaround to simulate if the data had been fetched.

To answer your question, yes it's possible. If you look at that plugin you'll see it's currently doing this:

results.push({
    value: result,
    text: result
});

so it's setting the text and value to be the same thing. There's a couple ways you could go about this, the first would be to have the server return both a text and html version and then use that when generating the results. Alternatively, you could instead strip the HTML markup out of the result from the server response and use that for the autocompleter text property.

Here's one simple example:

var tempElement = document.createElement('div');
tempElement.innerHTML = result;

results.push({
    value: result,
    text: tempElement.innerText
});

I should note this doesn't sanitize the HTML returned from the server, before inserting it into the DOM, so if you're concerned about cross-site scripting (XSS) then there are other options but they get a lot more complex.

Here's an updated fiddle that uses the above and more closely resembles the plugin you mentioned: http://fiddle.tinymce.com/aWgaab/5 (I couldn't use the plugin directly on fiddle sorry). Hopefully that helps clear things up, but if not let me know.

As for your question about alternatives to using external_plugin, that is probably the best solution available to you, otherwise you'd need to include the logic in the setup in your configuration which would end up being rather messy.

[offenburger]

@lnewson Thanks so much for this. I have it working well now, and this will be a great temporary fix until (if/when) the Autocompleter can render HTML in its drop-down. I really appreciate your taking time to explain this for me!

[tiny-stale-bot]

This issue is stale because it has been open 365 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 30 days.

[tiny-stale-bot]

This issue was closed because it has been stalled for 30 days with no activity.