如何启用TinyMCE的文本/禁用按钮的onkeyup或的onkeydown [英] How to Enable/Disable button on TinyMCE textbox onkeyup or onkeydown

问题描述

一个ASCX页上我有一个TinyMCE的编辑器和一个按钮

 ＆LT; ASP：文本框ID =改为txtName=服务器WIDTH =100％＆GT;＆LT; / ASP：文本框＆GT;
＆lt;试验：tinymceextender =服务器ID =TinyMceExtender的TargetControlID =改为txtName主题=全＆GT; ＆LT; /测试：tinymceextender＆GT;＆LT; ASP：按钮的ID =btnSave文本=保存启用=假=服务器/＆GT;
 

我要检查，文本框为空，则btnsave应禁用，如果文本框不为空它应该是启用的第一次其工作（因为我检查它的Page_Load），因为我进入了一些文本，并使用退格键删除BTN文本仅在激活模式。我想它的onkeyup办，安其preSS但其工作TinyMCE的工作

2，这些JS我使用，但它不工作

  $（文件）。就绪（函数（）{
    的document.getElementById（'＆LT;％= btnSave.ClientID％GT;'）。禁用= TRUE;
    VAR my_editor = tinymce.get（'＆LT;％= txtName.ClientID％GT;'）;
    如果（$（my_editor.getBody（））。文本（）==''）{
        $（＃＆LT;％= btnSave.ClientID％GT;）。ATTR（禁用，已禁用）;
    }
    否则，如果（$（my_editor.getBody（））。文本（）！=''）{
        $（＃＆LT;％= btnSave.ClientID％GT;）。removeAttr（'禁用'）;
    }
}）;
 

---

 的window.onload =函数（）{
    的document.getElementById（'＆LT;％= btnSave.ClientID％GT;'）。禁用= TRUE;
}
功能ENABLE_BTN（）{
    变种EN = tinymce.get（'＆LT;％= txtName.ClientID％GT;'）;
    如果（EN ==''）{
        的document.getElementById（'＆LT;％= btnSave.ClientID％GT;'）。禁用= TRUE;
    }其他{
        的document.getElementById（'＆LT;％= btnSave.ClientID％GT;'）。禁用= FALSE;
    }
}
 

调用的onkeydown上txtName的=ENABLE_BTN（）

在F12：我的文本框code正在寻找这样的事情...

 ＆LT;＆字段集GT;  ＆LT;输入ID =BasePage_txtName类型=文本的风格=宽度：100％;显示：无; NAME =$的BasePage改为txtNameARIA隐藏=真＆GT;
  ＆LT;跨度ID =BasePage_txtName_parent级=mceEditor defaultSkin角色=应用程序ARIA-labelledby =BasePage_txtName_voice＆GT;
  ＆LT;跨度ID =BasePage_txtName_voice级=mceVoiceLabel的风格=显示：无;＆GT;丰富的文本区＆LT; / SPAN＆GT;
  ＆LT;表ID =BasePage_txtName_tbl级=mceLayoutCELLSPACING =0的cellpadding =0的角色=presentation的风格=宽度：100％;高度：100像素;＆GT;
  ＆LT;＆TBODY GT;
  ＆LT; TR类=mceFirst角色=presentation＆GT;
  ＆所述; TR类=mceLast＆GT;
 ＆LT; / TBODY＆GT;
   ＆LT; /表＆gt;
  ＆LT; / SPAN＆GT;
  ＆LT; /字段集＆GT;
 

解决方案

我会使用 KEYUP 事件来检查的内容是空的这个样子。编辑：更新为使用TinyMCE的的怪异事件处理方法

  $（函数（）{  tinyMCE.init（{
    //相应调整
    模式：精确，
    主题：简单，
    元素：改为txtName
    设置：功能（ED）{
               ed.onInit.add（函数（ED）{
                     bindKeyUp（ED）;
           }）;}
             }）;
}）;功能bindKeyUp（ED）{
 如果（tinyMCE.activeEditor）{
    ed.onKeyUp.add（函数（）{
      $（'＃btnSave'）ATTR（禁用，（textBoxEmpty（））！）。
    }）;
 }
}功能textBoxEmpty（）{
 。VAR CONTENTLENGTH = tinyMCE.get（'＃改为txtName）的getContent（）;
    如果（contentLength.length）{
      返回true;
    }
 返回false;
}
 

on a ascx page I have a tinymce editor and a button

<asp:TextBox ID="txtName" runat="server" Width="100%" ></asp:TextBox>
<test:tinymceextender runat="server" ID="TinyMceExtender" TargetControlID="txtName" Theme="Full"> </test:tinymceextender>

<asp:Button ID="btnSave" Text="Save" Enabled="false" runat="server" />

I want to check if, textbox is null, then btnsave should be disable, if textbox is not null its should be enable, for the first time its working(because i am checking it on Page_Load), as I am entering some text and deleting that text using backspace btn is in enable mode only. I tried it to do with onKeyUp, onKeyPress but its working working for TinyMCE

these 2 js I used but its not working

$(document).ready(function () {
    document.getElementById('<%=btnSave.ClientID %>').disabled = true;
    var my_editor = tinymce.get('<%=txtName.ClientID %>');
    if ($(my_editor.getBody()).text() == '') {
        $("#<%=btnSave.ClientID %>").attr('disabled', 'disabled');
    }
    else if ($(my_editor.getBody()).text() != '') {
        $("#<%=btnSave.ClientID %>").removeAttr('disabled');
    }
});

---

window.onload = function () {
    document.getElementById('<%=btnSave.ClientID %>').disabled = true;
}
function ENABLE_BTN() {
    var EN = tinymce.get('<%=txtName.ClientID %>');
    if (EN == '') {
        document.getElementById('<%=btnSave.ClientID %>').disabled = true;
    } else {
        document.getElementById('<%=btnSave.ClientID %>').disabled = false;
    }
}

calling onkeydown="ENABLE_BTN() on txtName

on F12: my textbox code is looking something like this...

  <fieldset>

  <input id="BasePage_txtName" type="text" style="width: 100%; display: none;"  name="BasePage$txtName" aria-hidden="true">
  <span id="BasePage_txtName_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="BasePage_txtName_voice">
  <span id="BasePage_txtName_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span>
  <table id="BasePage_txtName_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 100px;">
  <tbody>
  <tr class="mceFirst" role="presentation">
  <tr class="mceLast">
 </tbody>
   </table>
  </span>
  </fieldset>

解决方案

I would use the keyup event to check if the contents are empty like this. Edit: updated to use TinyMCE's weird eventhandler methods.

$(function () {

  tinyMCE.init({
    // adapt accordingly
    mode : "exact",
    theme : "simple",
    elements : "txtName", 
    setup : function(ed) {
               ed.onInit.add(function(ed) {
                     bindKeyUp(ed);
           });}
             });
});

function bindKeyUp(ed) {
 if (tinyMCE.activeEditor) {
    ed.onKeyUp.add(function() { 
      $('#btnSave').attr('disabled', !(textBoxEmpty()));
    });
 }
}

function textBoxEmpty() {
 var contentLength = tinyMCE.get('#txtName').getContent();
    if (contentLength.length) {
      return true;
    }
 return false;
}

这篇关于如何启用TinyMCE的文本/禁用按钮的onkeyup或的onkeydown的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！