asp.net - AjaxToolkit Html Editor でテーブル項目を追加するには?

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"  
          />

次のリンクでアプローチを見つけましたが、テーブルアイテムを追加できません。

score 3 · Accepted Answer

このソリューションは、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/からダウンロードできます。

score 1 · Accepted Answer

外部ボタンを使用して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();" />

asp.net - AjaxToolkit Html Editor でテーブル項目を追加するには?

2 に答える 2

Related

Reference