2

我使用了 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"  
          />

我在以下链接中找到了一种方法，但我无法添加表项。

4

2 回答 2

3

此解决方案将“插入表格按钮”添加到 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/

于 2014-02-24T02:13:23.560 回答
1

您可以使用外部按钮在 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();" />
于 2014-02-20T12:36:48.803 回答