Rich Text Editor Autocomplete

[Mohamed Salah]

Is there Anyway that I can use autocomplete with rich text editor using a pre-defined list ?

Thnx in advance.

[Keerthana Rajendran]

Hi Mohamed, 

 

Thank you for contacting Syncfusion Support.  

 

Yes, you can render AutoComplete inside RichTextEditor by loading stylesheet through externalCSS property and load scripts into iframe through create event of RTE as shown below. Render input element as AutoComplete by navigating from iframe id.  

   

<textarea id="rteSample" rows="10" cols="30" style="width: 740px; height: 440px"> 

                   AutoComplete:  

                          <div id="control"> 

                              <input type='text' id='selectState'/> 

                          </div> 

                         

                        

                    </textarea> 

$(function () { 

           

          $("#rteSample").ejRTE({width:"100%", minWidth:"100px",isResponsive:true,create:"oncreate",externalCSS:"https://cdn.syncfusion.com/16.1.0.24/js/web/flat-azure/ej.web.all.min.css"}); 

       

        }); 

      function oncreate(args) 

      { 

          

        var iframeDoc = this.getDocument(); 

          var jQuery = document.createElement("script"); 

        jQuery.type = "text/javascript"; 

        jQuery.src = "https://cdn.syncfusion.com/js/assets/external/jquery-1.11.3.min.js"; 

        iframeDoc.head.appendChild(jQuery); 

        var scriptTag = document.createElement("script"); 

        scriptTag.type = "text/javascript"; 

        scriptTag.src = "https://cdn.syncfusion.com/16.1.0.24/js/web/ej.web.all.min.js"; 

         iframeDoc.head.appendChild(scriptTag);         

        $('#rteSample_Iframe').contents().find("#selectState").ejAutocomplete({ 

                dataSource: states, 

                fields: { key: "index", text: "countryName" }, 

                watermarkText: "Select a state", 

                width: "300" 

             

            }); 

          

      } 

    </script>      

  <style> 

#selectState_suggestion 

     

    { 

     top:126px!important; 

      left:35px!important; 

    }  

 

</style> 

 

As popup position will be calculated based on window top and left value, we suggest you to mention top, left values for popup in style section to render it in correct position. Please refer to the below sample 

 

https://jsplayground.syncfusion.com/u2kwk3vo 

 

If we have misunderstood, kindly revert us with clear details on your requirement so that we can proceed further. 

 

Regards, 

Keerthana.