Color box (padding and custom width ) in RTE

[Milos]

Hi,

Is it possible to add color box in RTE.   Something similar like my attachment image.

Good functionality is that I can color text background. But I need to put padding around the text and to expend that colored background to the end of RTE.

If there is any better suggestion how i can provide that functionality to the user I will be glad to hear.

Regards,

Milos

Attachment: Capture_b94e6f78.zip

[Karthikeyan Viswanathan]

Hi Milos,    

   

Thanks for contacting Syncfusion Support.   

   

Yes, you can customize the background color applied to tags using execute event. You can also add padding and other CSS in this event. Please find the code snippet below:   

   

<code>   

$("#rteSample").ejRTE({   

              execute: function(args)   

              {    

                if(args.commandName == "backColor") {   

                                var rteeObj  = $("#rteSample").data("ejRTE");   

                              if($(rteeObj.getSelectedHtml())[0].tagName.toLowerCase() =="span")    

                                      rteeObj.executeCommand("insertHtml",$(rteeObj.getSelectedHtml()).css("padding","5px")[0].outerHTML)   

                             else if($(rteeObj.getSelectedHtml()).find("span").length > 0 )       

                                  rteeObj.executeCommand("insertHtml",$(rteeObj.getSelectedHtml()).find("span").css("padding","5px").parent($(rteeObj.getSelectedHtml()))[0].outerHTML)             

                    }    

              }   

            });   

</code>   

  

   

   

JS Playground sample link: http://jsplayground.syncfusion.com/3vszhamc    

   

Regards               

Karthikeyan V.   

 

[Milos]

Hi Karthikeyan,

Thank for your swift response.

This approach solve the problem with padding, but padding is always the same.

Whole problem could be solved with one custom input in menu bar where user can put padding in pixels.

Is it possible ?

Regards,

Milos

[Karthikeyan Viswanathan]

Hi Milos,       

      

Thanks for your reply.   

   

Yes, you can add input field in RTE toolbar for padding pixels and you can achieve different padding sizes for background color to applied text. Please find the code snippet:     

     

<code>   

   

<input value="5px" type="text" style="color:black;" id="RTEPixel" />   

   

<script>   

var paddingPixel = "5px";   

            $("#rteSample").ejRTE({   

                tools: {   

                         customTools: [{ name: "pixelInsert",tooltip:"Pixel" }]   

                },   

               create: function(args){   

                         var btn = $("#pixelInsert");   

                         $("#pixelInsert").find("div").remove();   

                        var btntarget = $("#RTEPixel");   

                        btn.append(btntarget);   

                        $("#RTEPixel").mouseup(function(args){   

                         return false;   

                        }).change(function(args){   

                         paddingPixel = this.value;   

                        })   

            },   

              execute: function(args)   

              {    

                if(args.commandName == "backColor") {   

                       var rteeObj  = $("#rteSample").data("ejRTE");   

                if($(rteeObj.getSelectedHtml())[0].tagName.toLowerCase() =="span")    

                     rteeObj.executeCommand("insertHtml",$(rteeObj.getSelectedHtml()).css("padding",paddingPixel)[0].outerHTML)   

                else if($(rteeObj.getSelectedHtml()).find("span").length > 0 )                                                                            rteeObj.executeCommand("insertHtml",$(rteeObj.getSelectedHtml()).find("span").css("padding",paddingPixel).parent($(rteeObj.getSelectedHtml()))[0].outerHTML)             

                                        }          

              }   

            });   

</script>   

   

</code>   

  

   

   

JS Playground sample link: http://jsplayground.syncfusion.com/2abu43td    

  

Regards,   

Karthikeyan V.  

[Milos]

Hi Karthikeyan,

Thanks for you example.

That is exactly I wanted.

On the same way I can do other customization processes I need. It gives me idea.

The right way is probably:

    1) put custom command, providing user input field to enter value

    2) in execute event take user input value and put in html result on the way you need.

Regards,

Milos

[Karthikeyan Viswanathan]

Hi Milos,   

 

Thanks for the update.  

 

We are glad the suggestion helped you to achieve your requirement.  

 

Please let us know if you need further assistance.  

 

Regards,   

Karthikeyan V.