maxlength 不适用于 ckeditor angularjs 指令的 textarea [英] maxlength not working in textarea for ckeditor angularjs directive

查看：27 发布时间：2021/11/9 22:30:13 javascript angularjs angularjs-directive ckeditor maxlength

本文介绍了maxlength 不适用于 ckeditor angularjs 指令的 textarea的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用 ckeditor 插件在 angularjs 中创建了一个应用程序，我为 ckeditor 创建了一个指令，该应用程序工作正常，但问题是我需要将最大字符长度设置为 50，所以我把 maxlength="50"，但它不起作用，

谁能告诉我一些解决方案

html


<h3>CKEditor 4.2:</h3><div ng-repeat="ckEditors 中的编辑器"><textarea data-ng-model="editor.value" maxlength="50" data-ck-editor></textarea><br/>
<button ng-click="addEditor()">新编辑器</button>

脚本

var app = angular.module('app', []);app.directive('ckEditor', [function () {返回 {要求:'?ngModel',链接:函数($scope，elm，attr，ngModel){var ck = CKEDITOR.replace(elm[0]);ck.on('pasteState', function () {$scope.$apply(function () {ngModel.$setViewValue(ck.getData());});});ngModel.$render = 函数(值){ck.setData(ngModel.$modelValue);};}};}])函数 myCtrl($scope){$scope.ckEditors = [{value: ''}];}

解决方案

您需要将 id 添加到您的 textarea 中，如下所示:

</textarea></code></pre><p>你需要处理<code>CKEDITOR</code>的关键事件:</p><pre><code>window.onload = function() {CKEDITOR.instances.mytext.on('key', function() {var str = CKEDITOR.instances.mytext.getData();如果(字符串长度> 50){CKEDITOR.instances.mytext.setData(str.substring(0, 50));}});};</code></pre><p>这有效，但是请注意，内容也包含 html 标签，您可能希望保留它们，</p><p>I have created an application in angularjs with ckeditor plugin, I have created a directive for ckeditor, The application is working fine but the issue is that i need to set a max character length to be 50, so i put <code>maxlength="50"</code>, but its not working,</p>

<p>Can anyone please tell me some solution for this</p>

<p><strong><a href="http://jsfiddle.net/Lpqc4xhy/" rel="nofollow">JSFiddle</a></strong></p>

<p><strong>html</strong></p><pre><code><div data-ng-app="app" data-ng-controller="myCtrl">

<h3>CKEditor 4.2:</h3>
    <div ng-repeat="editor in ckEditors">
    <textarea data-ng-model="editor.value" maxlength="50" data-ck-editor></textarea>
    <br />
    </div>
    <button ng-click="addEditor()">New Editor</button>
</div>
</code></pre><p><strong>script</strong></p><pre><code>var app = angular.module('app', []);

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = CKEDITOR.replace(elm[0]);

            ck.on('pasteState', function () {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };
        }
    };
}])

function myCtrl($scope){
    $scope.ckEditors = [{value: ''}];
}
</code></pre><p>
</p><div class="h2_lin"> 解决方案 </div><p>You need to add an <code>id</code> to your <code>textarea</code>, like this:</p><pre><code><textarea data-ng-model="editor.value" maxlength="50" id="mytext" data-ck-editor></textarea>
</code></pre><p>You need to handle the key events for <code>CKEDITOR</code>:</p><pre><code>window.onload = function() {
    CKEDITOR.instances.mytext.on( 'key', function() {
        var str = CKEDITOR.instances.mytext.getData();
        if (str.length > 50) {
            CKEDITOR.instances.mytext.setData(str.substring(0, 50));
        }
    } );
};
</code></pre><p>This works, however, note, that the content contains html tags as well, you might want to keep them,</p>

                        <p>这篇关于maxlength 不适用于 ckeditor angularjs 指令的 textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2525037');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="maxlength不工作在textarea的ckeditor angularjs指令" href="/510244.html">
                            maxlength不工作在textarea的ckeditor angularjs指令;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Google地图不适用于AngularJS指令" href="/825459.html">
                            Google地图不适用于AngularJS指令;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="QuillJS不适用于textarea" href="/2048230.html">
                            QuillJS不适用于textarea;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="QuillJS 不适用于 textarea" href="/2761538.html">
                            QuillJS 不适用于 textarea;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="输入 maxlength 不适用于 Android -Ionic" href="/2523949.html">
                            输入 maxlength 不适用于 Android -Ionic;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="JQuery：.val（）不适用于textarea" href="/1019058.html">
                            JQuery：.val（）不适用于textarea;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title=""execCommand"不适用于AngularJS" href="/1798311.html">
                            "execCommand"不适用于AngularJS;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="CKEditor链接输入不适用于模式" href="/1493238.html">
                            CKEditor链接输入不适用于模式;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="关键事件不适用于多个ckeditor" href="/1490997.html">
                            关键事件不适用于多个ckeditor;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Angularjs 指令隔离范围 + 单向数据绑定不适用于对象?" href="/2525356.html">
                            Angularjs 指令隔离范围 + 单向数据绑定不适用于对象?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Angularjs指令隔离范围+单向数据绑定不适用于对象？" href="/603595.html">
                            Angularjs指令隔离范围+单向数据绑定不适用于对象？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="指令不适用于IE8" href="/911789.html">
                            指令不适用于IE8;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Nginx别名指令不适用于php" href="/1680935.html">
                            Nginx别名指令不适用于php;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="AngularJS:指令上的 ng-controller 不适用于指令中的嵌入元素" href="/2525128.html">
                            AngularJS:指令上的 ng-controller 不适用于指令中的嵌入元素;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="UI5不适用于AngularJS" href="/2179140.html">
                            UI5不适用于AngularJS;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery 单击事件不适用于 AngularJS" href="/2523938.html">
                            jQuery 单击事件不适用于 AngularJS;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="删除功能不适用于angularJS" href="/2179157.html">
                            删除功能不适用于angularJS;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="AngularJS不适用于无显示样式" href="/2179018.html">
                            AngularJS不适用于无显示样式;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="AngularJs 数据绑定不适用于离子" href="/2532731.html">
                            AngularJs 数据绑定不适用于离子;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="twitter bootstrap popover 不适用于 angularjs" href="/2523653.html">
                            twitter bootstrap popover 不适用于 angularjs;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="AngularJs数据绑定不适用于离子" href="/913979.html">
                            AngularJs数据绑定不适用于离子;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="window.setInterval 不适用于 angularjs" href="/2523903.html">
                            window.setInterval 不适用于 angularjs;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何设置TextArea的maxLength以使其适用于所有浏览器？" href="/911248.html">
                            如何设置TextArea的maxLength以使其适用于所有浏览器？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Dockerfile:$HOME 不适用于 ADD/COPY 指令" href="/2817661.html">
                            Dockerfile:$HOME 不适用于 ADD/COPY 指令;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Angular [ngClass]指令不适用于滚动事件" href="/1924972.html">
                            Angular [ngClass]指令不适用于滚动事件;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>前端开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html">
                            为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html">
                            错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html">
                            如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html">
                            如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html">
                            警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html">
                            如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html">
                            此请求已被阻止;内容必须通过HTTPS提供;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html">
                            资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html">
                            通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html">
                            拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = 'maxlength,不适,用于,ckeditor,angularjs,指令,的,textarea'; var cat = 'cc';';//qianduan</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>