[Solved] Elements replaced instead added

[Sébastien]

Hi,

I put an "Insert Groupbox" item in the toolbar and I wrote a function for it like this:

      <script type="text/javascript">
        Telerik.Web.UI.Editor.CommandList["InsertGroupbox"] = function(commandName, editor, args) {
          var selElem = editor.getSelection().getParentElement();
          if (selElem.tagName != "FIELDSET") {
            editor.pasteHtml('<fieldset style="left: 20px; top: 20px; width: 200px; position: absolute; height: 80px;">Place your text here... </fieldset>');
          }
        };
      </script>

It's working nice while the cursor is in the body text of the editor.
But when an existing Element is selected (groupbox, image, etc.), the element is removed and the groupbox is inserted.

How to create an exception to avoid this replacement only when inserting groupboxes ?

Thanks,
Sébastien

[Rumen]

Hi Sébastien,

The process of element replacement, when pasting content over it, is a normal browser behavior. That is why I changed your code a bit so it inserts the selection into the FIELDSET:

Telerik.Web.UI.Editor.CommandList["InsertGroupbox"] = function(commandName, editor, args) {
     var selElem = editor.getSelection().getParentElement();
     var selElemInnerHtml = editor.getSelectionHtml(); //getting current selection
     if (selElem.tagName != "FIELDSET") {
          if (selElemInnerHtml == "") { //if no selection places the sample text into the FIELDSET
          selElemInnerHtml = "Place your text here... ";
     }
     editor.pasteHtml('<fieldset style="left: 20px; top: 20px; width: 200px; position: absolute; height: 80px;">' + selElemInnerHtml + '</fieldset>');
     }
}

I would suggest however a different approach, which is to create the DOM element first and then to apply some logic how and where to insert the element.

Here is a simple example of adding FIELDSET in a table cell (or after the table) in case a table cell is selected:

Telerik.Web.UI.Editor.CommandList["InsertGroupbox"] = function(commandName, editor, args) {

    //create the new DOM FIELDSET element
    var newGrpBox = document.createElement('fieldset');
    newGrpBox.setAttribute('style', 'left: 20px; top: 20px; width: 200px; position: absolute; height: 80px;');
    var selElem = editor.getSelection().getParentElement();
    var currentSelectionInnerHtml = editor.getSelectionHtml();

    //get the selection and set it as innerHTML to the new element
    if (currentSelectionInnerHtml == "" || !confirm('Do you want to insert selection in the Group Box'))
        newGrpBox.innerHTML = "Place your text here... ";
    else newGrpBox.innerHTML = currentSelectionInnerHtml;


    switch (selElem.tagName) {
        case "TD": //If you are in a table cell
            if (confirm('Do you want to place the group box inside the table cell?')) {
                selElem.appendChild(newGrpBox);
            } else {
                var table = null;
                while (selElem.parentNode.tagName != "TABLE") {
                    selElem = selElem.parentNode;
                    table = selElem.parentNode;
                }
                table.parentNode.insertBefore(newGrpBox, table.nextSibling);
            }
            break;
        case "TR": //if you are in a table row
            //some custom code goes here
            break;
        case "IMG": //if the selection is an image
            //some custom code goes here
            break;
        default:
            //some custom code goes here
            break;
    }
};

 

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.