Question

我使用过AjaxToolkit HtmlEditor并想要添加功能添加表。如何在工具栏中添加表项？

%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit.HTMLEditor" TagPrefix="cc1" %>

 <cc1:Editor runat="server" Width="700px" Style="margin: 0px auto; direction: rtl;" ID="Editor" Height="500px" CssClass="ajax__htmleditor_editor_container"  
          />

I have found an approach in following link但我无法添加表格项目。

Answer 1

此解决方案在AjaxControlToolKit的“编辑器”控件中添加了“插入表按钮”（功能已建模，类似于Microsoft Word中的功能）。

现在，我不是说这是一个很好的解决方案（或代码），因为我只是快速地将它一起鞭打 - 但它应该为您提供您想要的解决方案，具有坚实的基础重构等

使用以下步骤完成此操作：

1.）在App_Code文件夹中创建一个新的类文件（Extended_AjaxToolkitHtmlEditor.cs）（如果该文件夹不存在，请创建它）并将以下代码粘贴到其中：

using System;
using System.Text;
using System.Web.UI.WebControls;
using AjaxControlToolkit.HTMLEditor;
using AjaxControlToolkit.HTMLEditor.ToolbarButton;

namespace Extended_AjaxToolkitHtmlEditor
{
  public class Extended_AjaxToolkitHtmlEditor : Editor
  {
    protected override void FillTopToolbar()
    {
      base.FillTopToolbar();
      TopToolbar.Buttons.Add(new AddHtmlTable_HtmlEditorToolbarButton());
    }
  }


  public class AddHtmlTable_HtmlEditorToolbarButton : MethodButton
  {
      private const string _strHtmlTableBase64Image = @"iVBORw0KGgoAAAANSUhEUgAAABYAAAAUCAYAAACJfM0wAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAABMSURBVDhPY0xISPjPQAPABKWpDoaewQygMMYFNm/eDGVhAnxyIDOHXlCAk1twcDCUSx2wdu3a0TBGgNEwhoPRMAaDIRzGUDYVAQMDADlBXF6jlWZpAAAAAElFTkSuQmCC";
      private string _strJavaScript;

      protected override void OnLoad(EventArgs e)
      {
        base.OnLoad(e);
        CssClass += " HtmlEditorAddTable";
        Attributes.Add("onclick", @"Extended_AjaxToolKitEditorControl.ShowTablePopUp();");
        _strJavaScript = @"<script>
var Extended_AjaxToolKitEditorControl = {
  hasBeenInitialized : false,
  divMainTable : {},
  divMainTable_ChildElements : [],


  Initialize_Elements : function(){
    Extended_AjaxToolKitEditorControl.hasBeenInitialized = true;
    var imgTableButtonElement = document.getElementById('" + ClientID + @"');
    var imgTableButtonElement_boundingRectangle = imgTableButtonElement.getBoundingClientRect();
    var divChildTableElement_toClone = document.createElement('div');
    var divSpacerElement = {};

    Extended_AjaxToolKitEditorControl.divMainTable = document.createElement('div');
    Extended_AjaxToolKitEditorControl.divMainTable.id = 'divAjaxToolKit_editorControlExtended_mainTable';
    Extended_AjaxToolKitEditorControl.divMainTable.style.background = 'white';
    Extended_AjaxToolKitEditorControl.divMainTable.style.border = '1px solid black';
    Extended_AjaxToolKitEditorControl.divMainTable.style.position = 'absolute';
    Extended_AjaxToolKitEditorControl.divMainTable.style.visibility = 'hidden';
    Extended_AjaxToolKitEditorControl.divMainTable.style.width = '220px';
    Extended_AjaxToolKitEditorControl.divMainTable.style.height = '185px';
    Extended_AjaxToolKitEditorControl.divMainTable.style.top = (imgTableButtonElement_boundingRectangle.bottom + window.pageYOffset) + 'px';
    Extended_AjaxToolKitEditorControl.divMainTable.style.left = (imgTableButtonElement_boundingRectangle.left + window.pageXOffset) + 'px';
    Extended_AjaxToolKitEditorControl.divMainTable.style.right = (imgTableButtonElement_boundingRectangle.right + window.pageXOffset) + 'px';
    Extended_AjaxToolKitEditorControl.divMainTable.onmouseleave = function() { Extended_AjaxToolKitEditorControl.HideTablePopUp(); };

    divChildTableElement_toClone.style.width = '10px';
    divChildTableElement_toClone.style.height = '10px';
    divChildTableElement_toClone.style.background = 'white';
    divChildTableElement_toClone.style.border = '1px solid black';
    divChildTableElement_toClone.style.marginRight = '5px';
    divChildTableElement_toClone.style.marginLeft = '5px';
    divChildTableElement_toClone.style.marginTop = '5px';
    divChildTableElement_toClone.style.marginBottom = '5px';
    divChildTableElement_toClone.style.display = 'inline-block';

    for (var i = 0; i < 8; i++){ Extended_AjaxToolKitEditorControl.divMainTable_ChildElements.push([divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true), divChildTableElement_toClone.cloneNode(true)]); }
    for (var rowCounter in Extended_AjaxToolKitEditorControl.divMainTable_ChildElements){
      for (var columnCounter in Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[rowCounter]){
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[rowCounter][columnCounter].id = 'newDArr_' + rowCounter + '_' + columnCounter;
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[rowCounter][columnCounter].setAttribute('data-rowCounter', rowCounter);
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[rowCounter][columnCounter].setAttribute('data-columnCounter', columnCounter);
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[rowCounter][columnCounter].onclick = function(){ Extended_AjaxToolKitEditorControl.InsertHtmlTable(this.id); };
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[rowCounter][columnCounter].onmouseover = function(){ Extended_AjaxToolKitEditorControl.SelectElementsInPopup(this.id); };
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[rowCounter][columnCounter].onmouseout = function(){ Extended_AjaxToolKitEditorControl.UnSelectElementsInPopup(this.id); };
        Extended_AjaxToolKitEditorControl.divMainTable.appendChild(Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[rowCounter][columnCounter]);
      }
      divSpacerElement = document.createElement('div');
      divSpacerElement.style.display = 'block';
      divSpacerElement.style.height = '1px';
      Extended_AjaxToolKitEditorControl.divMainTable.appendChild(divSpacerElement);
    }
    imgTableButtonElement.parentNode.appendChild(Extended_AjaxToolKitEditorControl.divMainTable);
  },


  SelectElementsInPopup : function(paramDivId){
    var divParameter = document.getElementById(paramDivId);
    var divAttributeParamRowCount = divParameter.getAttribute('data-rowCounter');
    var divAttributeParamColumnCount = divParameter.getAttribute('data-columnCounter');
    for (var i = 0; i <= divAttributeParamRowCount; i++){
      for (var j = 0; j <= divAttributeParamColumnCount; j++){
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[i][j].style.background = 'yellow';
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[i][j].style.border = '1px solid black';
      }
    }
  },


  UnSelectElementsInPopup : function(paramDivId){
    var divParameter = document.getElementById(paramDivId);
    var divAttributeParamRowCount = divParameter.getAttribute('data-rowCounter');
    var divAttributeParamColumnCount = divParameter.getAttribute('data-columnCounter');
    for (var i = 0; i <= divAttributeParamRowCount; i++){
      for (var j = 0; j <= divAttributeParamColumnCount; j++){
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[i][j].style.background = 'white';
        Extended_AjaxToolKitEditorControl.divMainTable_ChildElements[i][j].style.border = '1px solid black';
      }
    }
  },


  InsertHtmlTable : function(paramDivId){
    var tableElement = document.createElement('table');
    tableElement.style.width = '250px';
    tableElement.style.height = '200px';
    tableElement.border = '1';
    var tableRowElement = {};
    var tableColumnElement = {};
    var divParameter = document.getElementById(paramDivId);
    var divAttributeParamRowCount = divParameter.getAttribute('data-rowCounter');
    var divAttributeParamColumnCount = divParameter.getAttribute('data-columnCounter');
    for (var i = 0; i <= divAttributeParamRowCount; i++){
      tableRowElement = tableElement.insertRow(i);
      for (var j = 0; j <= divAttributeParamColumnCount; j++){ tableColumnElement = tableRowElement.insertCell(j); }
    }
    var editPanelElement = document.getElementById('" + this.Parent.Parent.Parent.Parent.Parent.ClientID + @"').control.get_editPanel().get_modePanels()[0].insertHTML(tableElement.outerHTML);
  },


  HideTablePopUp : function(){
    var divMainTableElement = document.getElementById('divAjaxToolKit_editorControlExtended_mainTable');
    divMainTableElement.style.visibility = 'hidden';
  },


  ShowTablePopUp : function(){
    if (Extended_AjaxToolKitEditorControl.hasBeenInitialized != true){ Extended_AjaxToolKitEditorControl.Initialize_Elements(); }
    var divMainTableElement = document.getElementById('divAjaxToolKit_editorControlExtended_mainTable');
    divMainTableElement.style.visibility = 'visible';
  }
};
</script>";
      }

    protected override void OnPreRender(EventArgs e)
    {
      base.OnPreRender(e);
      var literalNewCSS = new Literal();
      var strbldrStyleElement = new StringBuilder();

      strbldrStyleElement.AppendLine(@"<style>");
      strbldrStyleElement.AppendLine(@".HtmlEditorAddTable");
      strbldrStyleElement.AppendLine(@"{");
      strbldrStyleElement.AppendLine(@"  width:23px !important;");
      strbldrStyleElement.AppendLine(@"  height:21px !important;");
      strbldrStyleElement.AppendLine(@"  margin-left:2px !important;");
      strbldrStyleElement.AppendLine(@"  background-image: url(data:image/png;base64," + _strHtmlTableBase64Image + ");");
      strbldrStyleElement.AppendLine(@"  background-repeat: no-repeat;");
      strbldrStyleElement.AppendLine(@"}");
      strbldrStyleElement.AppendLine(@"</style>");

      literalNewCSS.Text = strbldrStyleElement.ToString();
      Page.Header.Controls.Add(literalNewCSS);
      Page.RegisterClientScriptBlock("Register_Extended_AjaxToolKitEditorControlJS", _strJavaScript);
    }
  }
}

2.）然后在ASPX页面中，您要使用此控件，在文件顶部添加以下内容：

<%@ Register Namespace="Extended_AjaxToolkitHtmlEditor" TagPrefix="extendedEditor" %>

3.）然后最后在表单元素到ASPX页面添加如下所示的控件：

<extendedEditor:Extended_AjaxToolkitHtmlEditor runat="server" />

备注：

1.）注意要添加此控件的页面的“aspx.designer.cs”文件（如果您使用的是） - 当您在此新控件元素上放置ID时，会抛出错误。但是，如果您只是删除添加的条目，它仍然可以工作并删除错误。

2.）此解决方案假设您已下载AjaxControlToolkit并已将其添加到项目/引用中。您可以在http://ajaxcontroltoolkit.codeplex.com/
下载

Answer 2

您可以使用外部按钮在Javascript中执行此操作

<script type="text/JavaScript"> 

function insertTable() {
  var editor = $find("<%= myEditor.ClientID %>");
  var editPanel = editor.get_editPanel();
  var designMode = AjaxControlToolkit.HTMLEditor.ActiveModeType.Design;
  if(editPanel.get_activeMode() == designMode) {
      var designPanel = editPanel.get_modePanels()[designMode];
      designPanel.insertHTML("<table><tr><td></td></tr></table>");
  }
}
</script>

在aspx页面上

<cc1:Editor runat="server" id="myEditor" />
<input type="button" value="Insert html table" onclick="insertTable();" />

如何在AjaxToolkit Html编辑器中添加表项？

2 个答案: