天道酬勤,学无止境

带有charcount插件的Ckeditor字符限制(Ckeditor character limitation with charcount plugin)

问题

达到最大字符数限制后,如何防止用户输入新字符?

Ckeditor charcount 插件只显示剩余的字符,我希望它停在 0。但它会减去整数。

这是我的 html 代码。

<textarea id="myTextEditor1" name="myTextEditor"></textarea>
<script type="text/javascript">
        CKEDITOR.replace('myTextEditor1', { 
            height: 200, 
            extraPlugins: 'charcount', 
            maxLength: 10, 
            toolbar: 'TinyBare', 
            toolbar_TinyBare: [
                 ['Bold','Italic','Underline'],
                 ['Undo','Redo'],['Cut','Copy','Paste'],
                 ['NumberedList','BulletedList','Table'],['CharCount']
            ] 
        });
</script>

我必须使用onChange 插件吗? 如果我必须如何限制用户输入新字符?

回答1

我为此使用了 ckeditor jQuery 适配器。

<textarea id="myTextEditor1" name="myTextEditor"></textarea>
<script type="text/javascript">
    $(function () {
        var myEditor = $('#myTextEditor1');
        myEditor.ckeditor({ 
        height: 200, 
        extraPlugins: 'charcount', 
        maxLength: 10, 
        toolbar: 'TinyBare', 
        toolbar_TinyBare: [
             ['Bold','Italic','Underline'],
             ['Undo','Redo'],['Cut','Copy','Paste'],
             ['NumberedList','BulletedList','Table'],['CharCount']
        ] 
        }).ckeditor().editor.on('key', function(obj) {
            if (obj.data.keyCode === 8 || obj.data.keyCode === 46) {
                return true;
            }
            if (myEditor.ckeditor().editor.document.getBody().getText().length >= 10) {
                alert('No more characters possible');
                return false;
            }else { return true; }

        });
    });
</script>

keyCode 检查是为了允许退格和删除按键。 要使用 jQuery 适配器,不要忘记插入它:

<script src="/path-to/ckeditor/adapters/jquery.js"></script>

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Ckeditor character limitation with charcount plugin
    How can i prevent users to enter new characters after max character limit is reached ? Ckeditor charcount plugin just shows me the remaining characters, i want it to stop at 0. But it goes minus integers. Here's my html code. <textarea id="myTextEditor1" name="myTextEditor"></textarea> <script type="text/javascript"> CKEDITOR.replace('myTextEditor1', { height: 200, extraPlugins: 'charcount', maxLength: 10, toolbar: 'TinyBare', toolbar_TinyBare: [ ['Bold','Italic','Underline'], ['Undo','Redo'],['Cut','Copy','Paste'], ['NumberedList','BulletedList','Table'],['CharCount'] ] }); </script> Do i
  • CKEditor自定义插件按钮(CKEditor Custom Plugins Button)
    问题 我已经为CKEditor编写了一个自定义插件-在所有方面都取得了成功,目前已保存一个:我一生无法解决如何自定义编辑器工具栏上的按钮上的图像。 我是新用户,因此您必须单击以查看附件的图像; 左上角突出显示的正方形应具有漂亮的图片(与其他大多数工具栏项目一样)。 回答1 我编写了完整的教程,涵盖了CKeditor插件开发的各个方面,包括按钮,上下文菜单,对话框等。 回答2 答案是像这样设置按钮设置的icon属性: editor.ui.addButton('your-plugin', { label: 'Your Plugin Label', command: 'YourPlugin', icon: this.path + 'images/your-plugin.jpg' }); 您的插件目录应在您的按钮应有的“图像”子目录中。 在以上代码段中,将“ your-plugin.jpg”替换为JPG,GIF或PNG图片作为按钮。 当然,此答案假设您知道如何使用某些图像编辑器(如Gimp,Photoshop等)创建按钮图像。 回答3 其他信息则尝试编写CKEditor 3.0的插件。 我从复制plugins / flash的源代码开始,现在有一个带有youtube徽标的按钮...。这是来自plugins / youtube / plugin.js的摘录。 editor.ui
  • 如何在CKeditor 4.2.1中添加带有加载gif的ajax保存按钮。 [正在工作的示例插件](How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin])
    问题 我发布此消息是因为,这对于不知道如何在普通和内联编辑模式下向ckeditor显示保存图标的人可能会有所帮助。 我正在寻找一个简单的保存插件,但找不到与ckeditor 4.2.1一起使用的插件。 我决定自己做。 在我的答案中,您会找到该插件的代码以及一个Google驱动器下载链接。 此下载内容包含“保存”图标以及“加载gif”图标。 该插件将在工具栏上添加一个保存按钮。 单击此按钮将向服务器发送异步发布请求。 在请求过程中,保存按钮将显示一个动画ajax加载器。 回答1 下载有效的插件:https://docs.google.com/file/d/0B0dQ8h7Cze23cUJGb2dJM1h2LWM/edit?pli=1 这个插件使用jquery,但是您可以使用纯JavaScript轻松地重写它! 确保在包含ckeditor之前将jquery包含到页面中 首先在config.js文件中注册插件(只需在config.js文件的末尾添加这些行) config.extraPlugins = 'savebtn';//savebtn is the plugin's name config.saveSubmitURL = 'http://server/link/to/post/';//link to serverside script to handle the post
  • 强制CKEDITOR刷新配置(Force CKEDITOR to refresh config)
    问题 我创建了一个使用CKEDITOR的cms应用程序,当我向CKEDITOR添加一些功能时,我需要刷新一些CKEDITOR .js /.css文件。 但是CKEDITOR强制浏览器缓存它们。 我看到它对所有.js / .css文件使用查询字符串 此查询字符串反映了我猜想的CKEDITOR版本: /Js/ckeditor/config.js?t=CAPD /Js/ckeditor/lang/it.js?t=CAPD /Js/ckeditor/plugins/onchange/plugin.js?t=CAPD 在CKEDITOR中是否有嵌入式方法可以做到这一点? 我在文档中找不到任何内容。 我正在使用CKEDITOR 4 主要问题是,当我上载某些更改时,客户端不会更新这些更改,并且新功能不可用,或者在最坏的情况下CKEDITOR无法正常工作。 回答1 我发现了一种相当优雅的方法: 只需设置: CKEDITOR.timestamp='ABCD'; 在您链接ckeditor.js之后或在ckeditor加载所有文件之前 这是CKEDITOR用来向其动态加载的所有.js .css文件添加时间戳的变量。 因此,每次更改这些文件时,我都会更新该变量,浏览器将重新加载它们。 回答2 我发现了一个更简单的方法,以防万一有人对此感到沮丧。 如果您在浏览器中打开带有时间戳的配置文件URL(例如?t =
  • 如何在angular 2中集成CKEditor(How to integrate CKEditor in angular 2)
    问题 我正在尝试将 CKEditor 集成到我的 angular 项目中。 我遵循了其他类似的解决方案,但只出现了 textarea。 这是我到目前为止所做的。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A Simple Page with CKEditor</title> <!-- Make sure the path to CKEditor is correct. --> <script src="../Email/ckeditor/ckeditor.js"></script> </head> <body> <form> <textarea name="editor1" id="editor1" rows="10" cols="80"> This is my textarea to be replaced with CKEditor. </textarea> <script> // Replace the <textarea id="editor1"> with a CKEditor // instance, using default configuration. CKEDITOR.replace( 'editor1' ); </script> </form> </body> </html
  • 限制uitextview中的字符数(Limit number of characters in uitextview)
    问题 我正在提供文本视图以鸣叫一些字符串。 我正在应用以下方法将字符数限制为140个长度。 - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text{ return [[textView text] length] <= 140; } 该代码运行良好,但第一个条件是退格不起作用。 假设我已经达到了140个字符的限制,因此该方法将给我错误,并且用户无法插入更多字符,但是此后,当我尝试删除一些字符时,文本视图将被禁用。 因此,问题是:“如何从textview.text删除字符或重新启用文本视图?” 回答1 如苹果参考资料所述,您应该寻找一个空字符串 如果用户按下Delete键,则范围的长度为1,并且空字符串对象替换了该单个字符。 我认为您实际要进行的检查类似于[[textView text] length] - range.length + text.length > 140 ,以说明剪切/粘贴操作。 回答2 - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *
  • 带有多个动态文本区域的 CKeditor(CKeditor with multible dynamic textareas)
    问题 我有一个允许提交多个步骤的表单。 当用户单击“添加步骤”时,会出现另一个文本区域。 我正在使用 CKeditor。 它在第一次迭代中效果很好,但在所有后续迭代中,它显示一个标准文本区域。 这是我的代码: <form method="post" action="process_project.php"> <b>Steps for your project:</b> <div> </div> Step 1 <div id="divWho"> <textarea name="projSteps[]" class="steps" id="1" rows="10" cols="60"></textarea> </div> <div> </div> <input type="button" value="Add project step" onClick="addTextArea();"> <input type="submit" name="submit" value="submit" /> </form> <script type="text/javascript"> var counter = 1; var limit = 11; function addTextArea() { if (counter == limit-1) { alert("You have reached
  • 如何配置 CKEditor-4 内联编辑器?(How to config CKEditor-4 inline editors?)
    问题 我有一个标准安装(如样品): <meta charset="utf-8"></meta> <script src="../ckeditor.js"></script> 带有许多<div contenteditable="true">块的 HTML 内容。 我需要通过本地或外部configTypeX.js文件配置每个编辑器, <script> CKEDITOR.on( 'instanceCreated', function( event ) { var editor = event.editor, element = editor.element; if ( element.is( 'h1', 'h2', 'h3' ) ) { editor.on( 'configLoaded', function() { editor.config.toolbar = [ [ 'Source', '-', 'Bold', 'Italic' ] ]; // BUG: about "Source"?? NOT AT INTERFACE! }); } else { // WHERE PUT THIS ITEM? customConfig: 'configType2.js'; } }); </script> 所以,我的问题是 在这种情况下如何做customConfig ? “最好的完整文档”
  • 无法让CKEditor插件在Django中工作(Can't get CKEditor plugins to work in django)
    问题 我正在尝试让CKEditor插件codenippet在django admin中工作,但无法运行。 如果我在settings.py中未定义任何CKEDIT_CONFIGS,则CKEditor可以工作。 如果取出“ extraPlugins”行,它也可以工作(并且成功地将调整CKEDITOR_CONFIGS部分中定义的高度和宽度)。 我按照这里的说明安装了CKEditor:https://github.com/shaunsephton/django-ckeditor CKeditor位于/ static / ckeditor中,而codenippet位于/ static / ckeditor / plugins /中 在我的settings.py中 CKEDITOR_UPLOAD_PATH = 'uploads/' CKEDITOR_JQUERY_URL = '/static/js/jquery-2.1.1.min.js' CKEDITOR_CONFIGS = { 'default': { 'toolbar': 'Full', 'height': 400, 'width': 900, 'removePlugins': 'stylesheetparser', 'extraPlugins': 'codesnippet', }, } 我的管理员 from django.contrib
  • 删除 CKEditor 的图片插件中的 htmlPreview(Remove htmlPreview in CKEditor's image plugin)
    问题 我在 CKEditor 的图像插件中隐藏预览元素时遇到问题。 我需要一个非常简单的图像对话框,其中只有图像源的输入字段和带有图像上传按钮的表单。 所以我使用这些自定义配置设置删除了不必要的元素: CKEDITOR.on( 'dialogDefinition', function( ev ) { var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if ( dialogName == 'image' ){ dialogDefinition.removeContents( 'advanced' ); dialogDefinition.removeContents( 'Link' ); var infoTab = dialogDefinition.getContents( 'info' ); infoTab.remove( 'ratioLock' ); infoTab.remove( 'txtHeight' ); infoTab.remove( 'txtWidth' ); infoTab.remove( 'txtBorder'); infoTab.remove( 'txtHSpace'); infoTab.remove( 'txtVSpace'); infoTab.remove(
  • 外部调用 UI 按钮(Calling UI button externally)
    问题 回答: 结果可以在这里看到:http://apitecture.com/dev/cked/index.2.html 工作代码摘录: $('a.color').on({ click : function() { var self = $(this); var editor = self.data('editor-instance') || CKEDITOR.instances['one']; var button = self.data('editor-button') || editor.ui.create('TextColor'); if (!self.data('editor-instance')) { self.data('editor-instance', editor); } if (!self.data('editor-button')) { button._.id = self.attr('id'); self.data('editor-button', button); } button.click( editor ); } }); 我正在开发基于丰富 GUI 的内容编辑器。 我得出的结论是,在文本样式部分使用 CKEditor,因为它的第 4 版带有很多自定义和配置选项,而且构建得非常好。 我开始将CK中的一些命令实现到我自己的工具栏上,与CK无关。 显然
  • 集成Markdown所见即所得文本编辑器(Integrated Markdown WYSIWYG text editor)
    问题 在为Markdown代码寻找简单的WYSIWYG编辑器时,我找不到与CkEditor,TinyMCE等类似的UI。 具体来说,经常被推荐的Markdown“ WYSIWYG”编辑器(例如这样的帖子)不是纯WYSIWYG编辑器,因为用户要么仍然编写原始Markdown(MarkItUp),要么转到另一种极端的方式,即不进行内联编辑标准控件(哈罗)。 我之间需要一些东西。 我正在寻找一种Markdown编辑器,其外观和功能类似于精简的CkEditor文本框,并且可以接受并输出Markdown。 应该有一个带有最少一组格式设置选项(B,I,U,列表等)的工具栏,并且文本输入区域应显示转换后的Markdown,而不是原始代码。 应该有一个“源”按钮,该按钮将允许用户编辑原始的Markdown,但是这也是可选的。 前任: 我知道Markdown / Wiki等的原因-它提供的安全性。 我不介意像在SE此处那样输入原始代码,但是我的用户不是极客,所以觉得这并不令人愉快。 他们不想看到* * * ___及其文本中混有空格。 它们用于“ Word”样式编辑,并且在该环境中效率最高。 那么-是否有Markdown真正集成的所见即所得编辑器? 我正在用PHP编写,因此可以通过类调用的东西是完美的。 2015年9月23日更新 CKEditor现在有一个Markdown插件可以执行此操作。
  • 如何防止 CKEditor 将标题设置为其 iframe?(How to prevent CKEditor from setting the title to its iframe?)
    问题 我使用 CKEditor 和 jQuery UI 的工具提示插件。 发生的事情是 CKEditor 将 title 属性设置为其 iframe 元素,jQuery 工具提示插件将其转换为工具提示,然后,每当您将鼠标悬停在编辑器的任何部分上时(每次编辑文本时都必须这样做) ,工具提示总是显示,说“富文本编辑器,elementId”。 即使我将工具提示插件的选择器设置为“*:not(iframe)”,它仍然会这样做。 到目前为止,我发现不为 iframe 设置工具提示的唯一方法是从选择器中排除“div”,但随后我也丢失了编辑器的粗体/斜体等选项的工具提示。 而且我在 CKEditor 的 Javascript 中找不到设置 iframe 标题的代码部分,因此我可以将其删除。 我发现的一个部分是语言文件中的实际标题字符串,我可以用空字符串替换“富文本编辑器”,但它仍然将 iframe 的标题设置为“,{elementId}”。 感谢任何帮助,我很想保留这两个插件。 回答1 遇到了完全相同的问题,为另一位不太可能很快需要屏幕阅读器的开发人员开发自定义 CMS。 感谢 mihaisimi 的指点。 通过深入研究 CKEditor 实例属性,我最终编写了下面的 JS 位以从内容区域中删除“富文本编辑器,element_id”标题。 CKEDITOR.on("instanceReady"
  • CKEditor 4中所有工具栏按钮名称和组名称的列表在哪里?(Where the list of all toolbar button names and group names available in CKEditor 4?)
    问题 此问题类似于CKEditor 4中提供哪些工具栏按钮? 并加强了这个旧的。 我在这里补充一些我遇到的看法和个人困难。 CKEditor文档很好,但是对于Java程序员(第一次CKEditor部署程序)来说,它是粉碎的并且是“不完整的”,因为“停在中间” ...示例: 如果需要removeButtons,还需要有效名称列表。 如果需要自定义(通过源代码,更改数组元素),则不仅需要这里的线索和示例,还需要有效名称,语法规则,上下文异常的完整列表,以及“官方插件名称”的列表。 。 问题:是否有一个命令(一个简单的alert(debug) )或所有可能名称的文档列表? (或所有受控和注册的插件名称,组名称等) ... CKEditor4被提升为(即是最好的!)“即插即用”编辑器,但是,对于程序员而言,它是错误的,没有适当的“管理受控名称”支持。 注意:所有config.js需要对有效名称的引用,并且没有文档显示我在config.js数组中config.js更改的所有有效名称的列表。 这是程序员所需的全部,但是今天(2013年8月),我们需要花费大部分时间使用Google来查找有效名称,或者使用浏览器的“元素检查器”来获取有关它的线索。 没有名称,在config array上没有简单的编程任务。 梦想:对于网页设计师,ckeditor.com / download提供了一个很好的
  • 从 DOM 中删除并再次添加时,CKEditor 会丢失内容(CKEditor loses content when removed from DOM and added again)
    问题 语境 CKEditor 是一个富文本编辑器,它使用带有可编辑主体的 iframe。 我有一种情况,我需要从我的页面中临时删除一个包含 CKEditor 实例的元素,然后在任意时间后将其添加回来。 问题 不幸的是,这似乎会导致 iframe 重置。 编辑器最初包含富文本内容和可编辑的正文元素,在将编辑器添加回页面后,iframe 正文为空且不再可编辑。 问题 我希望有人能解释为什么会发生这种情况,以及在将 CKEditor 添加回 DOM 后如何重新初始化它。 我已经搜索了文档,但还没有找到答案。 销毁实例并重新创建是可能的,但这需要对我们的架构进行一些重大更改。 如果可能的话,我宁愿避免这种情况。 (虽然“没有其他选择”是一个可以接受的答案,如果是真的。) 例子 这是我的代码的一个极其简化的版本,它重现了这个问题: CKEDITOR.replace('text'); var wrapper = $("#wrapper"), parent = $("#parent"); // Immediately after creating the CKEditor instance, // it is possible to remove and append the editor hideshow(); // Remove and append some moments after
  • CKEditor-禁用图像拖放(CKEditor - disable image drag and drop)
    问题 问题:将Firefox中的图像拖放到CKEditor窗口中时,图像会自动以base64编码。 现在我要禁用此功能。 我尝试了: config.removePlugins = 'dragdrop'; 但它根本不起作用。 还尝试使用旧的插件(imagepaste),但均无法正常工作... 有没有已知的解决方案? 谢谢! 回答1 起初,我尝试使用config.removePlugins = 'dragdrop,basket';禁用Base64 config.removePlugins = 'dragdrop,basket'; ,但根本没有用。 然后,我找到了此链接,它帮助我解决了这个问题,并编写了一个插件来完成这项工作。 这是带有说明的: 要使用它,你必须创建一个文件夹内./plugins命名dropoff 。 然后创建一个名为plugin.js的文件,内容如下: CKEDITOR.plugins.add('dropoff', { init: function (editor) { function rejectDrop(event) { event.data.preventDefault(true); }; editor.on('contentDom', function() { editor.document.on('drop',rejectDrop); }); } })
  • 我可以在没有工具栏的情况下使用CKEditor吗?(Can I use CKEditor without a toolbar?)
    问题 (可能的重复项:CKEditor-没有工具栏) 我想创建一个没有工具栏的CKEditor实例。 我尝试定义一个空的工具栏以在实例的配置中使用 oConfigName.toolbar = 'Custom'; oConfigName.toolbar_Custom = []; 但我按实例得到了一个小的空白工具栏,而不是没有工具栏。 我在CKEditor4中使用内联编辑。 回答1 哇:)这是我们在实现工具栏时没有想到的东西。 但是我刚刚检查过可以删除工具栏插件,因为其他任何插件都不需要。 因此,无需工具栏即可构建自己的CKEditor软件包,或使用removePlugins配置-例如: var editor = CKEDITOR.inline( 'editable', { removePlugins: 'toolbar' } ); 更新:在CKEditor 4.1中,引入了高级内容过滤器。 在其自动模式下,它由加载到工具栏上的按钮进行配置。 如果没有toolbar插件,则不会配置ACF,因此需要自己完成此操作: var editor = CKEDITOR.inline( 'editable', { removePlugins: 'toolbar', allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height]
  • 在 CKEditor textarea 中插入 HTML 代码(Insert HTML codes in CKEditor textarea)
    问题 我想知道是否有插件可以在 CKEditor textarea 中插入 HTML 代码? 我尝试安装 PBCKCode 插件但它不起作用,因为 HTML 是在我的 textarea 中执行的。 安东尼 EDIT1 ----- INSERTPRE 插件 ------- 添加帖子时查询: INSERT INTO `Posts` (`slug`,`title`,`thumbnail`,`content`,`tags`,`state`,`click`,`createdAt`,`updatedAt`,`id`) VALUES ('dsq','dsq','http://4.bp.blogspot.com/-knCgLUMOkJc/TeMY2jkmACI/AAAAAAAAAV0/VByHmoMa2N8/s1600/first+blog+posting.jpg','<pre class="prettyprint">\r\n<div>toto</div></pre>\r\n\r\n<p>dqsdqs</p>\r\n','toto','0',0,'2013-04-30 12:15:46','2013-04-30 12:15:46',NULL); 当我尝试编辑帖子时,我的 textarea 中的结果: <pre class="prettyprint">  </pre> <div>toto</div>
  • CKEditor 4.2.2-allowedContent = true不起作用(CKEditor 4.2.2 - allowedContent = true is not working)
    问题 我想我已经阅读了大多数SO问题和CKEditor文档,但这对我不起作用。 它应该简单明了,在我的CKEditor config.js中,我有这个: CKEDITOR.editorConfig = function(config) { config.allowedContent = true; }; 但是html仍然被过滤,这段代码被剥离了: <p> <a href="/site/public/press.pdf"><span class="icon-presseFile"></span></a> <a href="/site/public/pics.zip"><span class="icon-pressePics"></span></a> </p> 到这个: <p> </p> <span>元素是字体图标。 任何帮助将不胜感激。 编辑如果我在<span>元素中添加了一些文本,它就可以工作(但我不想这样做) 回答1 我发现我必须将其添加到主要配置功能之外。 这工作: CKEDITOR.editorConfig = function( config ) { ... }; CKEDITOR.config.allowedContent = true; 但这不是: CKEDITOR.editorConfig = function( config ) { config
  • CKEditor自动从div中剥离类(CKEditor automatically strips classes from div)
    问题 我在我的网站上使用CKEditor作为后端编辑器。 尽管它似乎想在每次按下源按钮时都将代码更改为适合自己的样子,但仍使我转弯。 例如,如果我点击了source并创建了一个<div> ... <div class="myclass">some content</div> 然后它没有明显的原因从<div>剥离该类,因此当我再次点击source时,它已更改为... <div>some content</div> 我认为可以在config.js关闭这种令人讨厌的行为,但是我一直在挖掘并且无法在文档中找到任何内容来关闭它。 回答1 禁用内容过滤 最简单的解决方案是转到config.js并进行设置: config.allowedContent = true; (切记要清除浏览器的缓存)。 然后,CKEditor完全停止过滤输入的内容。 但是,这将完全禁用内容过滤,这是CKEditor最重要的功能之一。 配置内容过滤 您还可以更精确地配置CKEditor的内容过滤器,以仅允许您需要的这些元素,类,样式和属性。 这种解决方案要好得多,因为CKEditor仍会删除浏览器在复制和粘贴内容时生成的大量糟糕的HTML,但不会剥离所需的内容。 例如,您可以扩展默认的CKEditor的配置以接受所有div类: config.extraAllowedContent = 'div(*)'