Ckeditor does not recognize required attribute

Asked

Viewed 738 times

5

I’m using Ckeditor to create pages that may contain forms (in other words, forms can be inserted into the content being edited, because I’m using the full package). I wish I could use the attribute required in some fields of forms being edited (he is supported by most browsers modern, and in my case a solution via Javascript would be at least inconvenient1), only that Ckeditor not only does not offer this option but also - when trying edit the source directly - remove that attribute if I try to put it "by force".

To make matters worse, Ckeditor does not allow adding classes to inputs, also removing them if I put them directly into the source (is there any way to disable this? ). All I have to do is make even bigger moves to get where I want to go (feasible, however; you don’t have to suggest this in response, because I already have some means in mind).

Is there any way to "force" Ckeditor to accept this attribute? Even if I have to disable other validations that this tool does? Or is that something specific to contentEditable, and each browser will do it your way without possibility of customization?

1. Clarifying: it is no problem for me to put a "generic" Javascript that acts equally on any page created, the drawback is to have to create a specific JS code for each form that is created (because this is a feature to be offered for the customer!).

javascript html5 form ckeditor

  • From what I’ve seen in the reference codes it seems purposeful to force them to use their validation system, maybe just a hack/patch in the main code.

  • The required would be in the editable field itself? I found a bug report speaking of it, but it is reported as solved.

  • @bfavaretto From what I understand, this bug report refers to textarea which is converted to an editor via $("#textarea").ckeditor(...), and not the content of the same being edited by the user. In the content (mode full) can include several things, including other forms, and it is in the fields of these forms that I need to eventually place the attribute required.

  • By the way, Ckeditor was designed with HTML4 in mind, so its validation rejects a lot of things considered valid by HTML5. I have little hope of this kind of support being offered in the near future, but I hope to get a way to disable some validations so I can insert what I want (and preferably preserve, between one issue and another). My research so far has led to protectedSource, maybe there is a solution, soon I must do some tests...

  • Yes, the bug is in the textarea to be converted. It wasn’t clear to me if you were talking about this field or the editor’s own content, now I understand that it’s the second case.

2 answers

4


The configuration extraAllowedContent allows you to enlarge the filters1 that determine what is or is not accepted in the Markup dealt with by the Ckeditor. To allow the attribute required in inputs and textareas, for example, you can use this setting:

CKEDITOR.config.extraAllowedContent = 'input[required];' + 
                                      'textarea[required];';

In case I used a global setting, but could also do it in a specific editor.

1. These filters are the same cited by Michel Simões in his answer (that pointed me in the right direction to reach this solution).

  • How can I implement the required in this code? <textarea required id='editor33' name='Description' Rows="5" style='width:600px;height:700px;' ></textarea> <script> CKEDITOR.replace( 'editor33' ); </script>

  • @I don’t understand what you mean. Does this have anything to do with that answer? If not, I suggest opening a new question, describing your question in more detail.

  • have a textarea ckeditor and create that was required

  • @saimita Ah, I get it. Really, this has nothing to do with that question - because it’s about putting the attribute required in the contents editor. To make the editor itself required, I don’t know what it’s like... :(

3

You can use the filter.check property to check for text, for example to check for an image in the text: filter.check( 'img[alt]' ); // -> true or if you want you can use filter.check( ', true, true ); // -> true that it will return false if the field is empty.

  • I don’t understand how this solves my problem. This filter could be applied individually to each field? By the editor himself (or in a way that it was preserved between editions)? This part is important... Because as I explained in the question, you can’t put specific JS code for each form, just a generic code that acts equally on every form created.

  • If you configure in the generic properties of the ckeditor, la in its constructor class, all instances will receive the filter before submitting the form will be checked. if you assign in the ckeditor constructor on the screen, you can manually assign to each.

  • Thanks, your answer gave me the tip I needed to solve (in the end I used extraAllowedContent instead of filters)! At first I had understood that it was something to be applied to us inputs - and not in the editor as a whole...

Browser other questions tagged javascript html5 form ckeditor

You are not signed in. Login or sign up in order to post.