We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Color box (padding and custom width ) in RTE

Thread ID:

Created:

Updated:

Platform:

Replies:

128756 Feb 9,2017 09:07 AM Feb 14,2017 06:37 AM JavaScript 5
loading
Tags: ejRTE
Milos
Asked On February 9, 2017 09:07 AM

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 [Syncfusion]
Replied On February 10, 2017 01:09 AM

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
Replied On February 11, 2017 06:25 PM

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 [Syncfusion]
Replied On February 13, 2017 04:07 AM

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
Replied On February 14, 2017 06:02 AM

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 [Syncfusion]
Replied On February 14, 2017 06:37 AM

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;