Sommeone please tell on how to get get cursor position in lightning input rich text in lightning web component.
I am using the following code but getting undefined:
let element = this.template.querySelector("lightning-input-rich-text");
console.log(element.selectionStart, element.selectionEnd);
I wouldn't call it a complete solution.
Use "window.getSelection()" to get the selection indexes, however you might want to ensure the rich text was in focus when selection occurred.
the specified method will return a Selection object, anchorOffset & extentOffset properties will contain the start and end indexes.
Related
I'm researching an easy way to make a free text input that can also contain multiple replaceable tags to create templates. As on this picture example
In that picture, the information witch player (tag) made the goal would be stored.
Later I would reuse that template and replacing the tag by a value.
Like: Goal of Iniesta, Goal of Rivaldo, ...
I couldn't find a lib that would do the job. The few attempts that I made to try to resolve it lead to extremely complex inputs with redefining selects (onClick, onKeydown, onSelect, maintaining current select) as the user can't edit the tag by hand (they are trigger by clicking buttons).
Does somebody already had to handle this kind of input?
Edit: As my question seems to be not clear, I will add a few details.
In fact, the input should work as it is a free text input but should also allow adding tags/chips that are provided by external triggers (onClick buttons)
Example: I will make [activity] on [day]
First I type "I will make " then I click the button "activity" that will add a "activity" tag/chip to the input. I continue with typing " on " and finaly click the button "day" to add the tag "day".
Then I will store this as template and reuse it in several scenarios by replacing the tags. Like:
I will make sandwiches on Monday
I will make sport on Friday
If somebody else have the same issue. I finally found the right lib Tagify. It has a mixed mode (text + tag)
I am working on an input form using ADF. I have an input field in which I want to show a list from which the user can select the value and also require a type option in case the value user want is not in the list.
I use the JDeveloper 12.2.1.3 for development. I have tried using ADF ComboBox component based on a static list. The component gives a list a expected. But I cannot type in a new value in case the value I wanted is not in the list. I can only type whatever is in the list already.
I am looking for something similar to the HTML input-datalist combination which gives a list and allows type if the intended value is not in the list.
The InputListOfValues and other LOV components only allow you to enter data which is present in the list. That is the way these components are designed. It would not make sense to allow other input as you normally use such components in places where you want to make sure the user can only input reference data defined in other data.
Anyway, it's easy to create some kind of component which allows you exactly what you want. I wrote a blog n this here https://tompeez.wordpress.com/2013/02/03/jdeveloper-11-1-1-6-0-afinputtext-with-self-made-look-up-not-using-lov/
From this page you can download and run the ADF Faces Rich Client Demo, which shows all components and what they do.
I need to convert some datawindow text columns (PB 11.5.1 - SQL Server 2008R2 - datatype Text) to RTF.
I have 2 issues:
New data are displayed fine but the existing data do not display at
all
The RTF format popup has very limited height so the icons are half
displayed
For the first issue I did find a work around but it is far from elegant!
I append this:
{\rtf1\ansi\ansicpg1253\uc1\deff0{\fonttbl {\f0\fswiss\fcharset161\fprq2 Arial;} {\f1\fswiss\fcharset0\fprq2 Tahoma;} {\f2\froman\fcharset2\fprq2 Symbol;}} {\colortbl;\red0\green0\blue0;\red255\green255\blue255;} {\stylesheet{\s0\itap0\nowidctlpar\f0\fs24 [Normal];}{\*\cs10\additive Default Paragraph Font;}} {\*\generator TX_RTF32 13.0.501.502;} \deftab1134\paperw3240\paperh16838\margl0\margt0\margr0\margb0\widowctrl {\*\background{\shp{\*\shpinst\shpleft0\shptop0\shpright0\shpbottom0\shpfhdr0\shpbxmargin\shpbxignore\shpbymargin\shpbyignore\shpwr0\shpwrk0\shpfblwtxt1\shplid1025{\sp{\sn shapeType}{\sv 1}}{\sp{\sn fFlipH}{\sv 0}}{\sp{\sn fFlipV}{\sv 0}}{\sp{\sn fillColor}{\sv 12506623}}{\sp{\sn fFilled}{\sv 1}}{\sp{\sn lineWidth}{\sv 0}}{\sp{\sn fLine}{\sv 0}}{\sp{\sn fBackground}{\sv 1}}{\sp{\sn fLayoutInCell}{\sv 1}}}}}\pard\itap0\nowidctlpar\plain\f1\fs20
before the text and add a } in the end.
I hope there is another way that does not include changing the actual data!
Any help appreciated
It might be a little cleaner to use the PasteRTF PowerBuilder function for existing data. Technically this doesn't solve your concern about changing data as the function probably adds the RTF tags much like you are doing manually.
As another method that might work is to try using a separate RichTextEdit control and the DataSource function. The DataSource function allows a RichTextEdit control to share data with a DataWindow and display the data in its input fields. If there are input fields in the RichTextEdit control that match the names of columns in the DataWindow, the data in the DataWindow is assigned to those input fields. I'd look at the InputFieldNamesVisible property also because it affects what is displayed.
This example from the Help File establishes the DataWindow control dw_1 as the data source for the RichTextEdit rte_1. Using a template document might be a way around your challenge of displaying data, but not actually changing it- not sure I have not used this myself.
rte_1.DataSource(dw_1)
This example inserts a document called LETTER.RTF into the RichTextEdit rte_letter (the names of the document's input fields match the columns in a DataWindow object d_emp), creates a DataStore, associates it with d_emp, and retrieves data. Then it inserts the document in rte_letter and sets up the DataStore as the data source for rte_1:
DataStore ds_empinfo
ds_empinfo = CREATE DataStore
ds_empinfo.DataObject = "d_emp"
ds_empinfo.SetTransObject(SQLCA)
ds_empinfo.Retrieve()
rte_letter.InsertDocument("LETTER.RTF", TRUE)
rte_letter.DataSource(ds_empinfo)
As far as the icon question - I am not aware of a solution for that.
At the moment I have an input field with the following directive:
ng-model="event.location"
I also have the input field attached to a Google Maps auto complete script. By way of example, if my user types "apa", the Google auto complete list will come up and there is the option of clicking "Apartments". However, the String "Apartments" does not bind to my variable and the "location" variable only contains the String "apa". How can I get AngularJS to bind to the full location once the user selects an option from Google Maps?
Update: It's just a one liner for Google Maps
new google.maps.places.Autocomplete(document.getElementById('location-text'));
Although I'm sure a lot more is happening behind the scenes
Followed the simple tutorial from here
Settings of Bespin embedded?
But cannot figure a way to add a 'save' button that would trigger an ajax event or whatever so i can process it and save the content to a file.
Any clues ?
What you'd want to to go here is get a handle to the text value of the editor in javascript and post that server side to save either as a file or in a db.
You can get the editor text value this way:
var editor = env.editor;
var value = editor.value;
One easy trick would be to copy that value to a hidden field so you could process it like you might any other form field.