TinyMCE: are <input> elements wrongly handled? - forms

I am encoutering various weird issues with <input> tags in TinyMCE (version 6, and also 5.8.2).
After entering the following in "code" view:
<input name="submit" value="myval" type="text">
I click "Save", the input field appears in the WYSIWYG view, but if I open the code view again, the name="submit" part has been removed. This does not happen with values other than "submit". Do you know why?
Also, the element selection does not work on inputs: with the following code:
<form>
<p>Firstname</p>
<input name="firstname" value="John" type="text">
</form>
Clicking on "Firstname" shows form > p in the editor footer, but clicking on the input field only shows p, like if the input element was not properly recognized.
Any clue to fix this?
Many thanks!

Related

Vuejs how to prevent form submit on enter but still save work in inputs?

This prevent enter submit,but at the moment prevent enter in inputs.
I need that enterkey work in inputs but not submit form.
<template id="form-template">
<form action="save-passport" #keypress.enter.prevent method="post" enctype="application/x-www-form-urlencoded" >
<input type="submit" v-show="loaded" v-on:click="saveForm" value="Save" />
<input type="text" required="required" name="field-11" >
<select required="required" name="field-13"><option value=""></option>
</select>
</form>
</template>
Had the same problem. Solution I did was to put the submit method on the opening form tag. Then no need for the input/button type="submit" inside the form at the bottom.
<form class="form" action="" method="POST" #submit.enter.prevent="createForm()">
Also other options available on inputs:
#keydown.enter.prevent
#keyup.enter.prevent
#submit.enter.prevent
I did it this way
first i removed vue modifiers from form tag.
second i chaged type of input from submit to button
and third this my saveForm function
saveForm:function(){
if (someCondition){
event.preventDefault();
}else{
document.forms[0].submit();
}
}
You need to use the prevent modifier. Another thing, your webpage itself must have the focus. Meaning, if you just visit the webpage, prevent won't work. But, if you click somewhere in the form, prevent will work for you.
You can still submit the form via JavaScript using something like document.forms[0].submit();

Submit on enter with 2 text inputs

I have two text inputs and each has a submit button. Each button has an on click AJAX function that calls a php script and populates the page.
I need to find a way to make the enter key submit the button of the input text focused.
For example if I type something the in the "product_code" input text and press the Enter key I want to call the AJAX function of that input's assigned button (getByCode()).
Product name: <input type="text" name="product_name" id="product_name">
<input type="submit" value="Search" onClick="searchByName(document.getElementById('product_name').value)"> <br />
Product code: <input type="text" name="product_code" id="product_code">
<input type="submit" value="Search" onClick="getByCode(document.getElementById('product_code').value)"> <br />
I don't necessarily require input buttons, I could use images for example if that helps.
All browsers support document.activeElement which will tell you which element has focus. On your keypress event handler, check this value against your two inputs to see which has focus. If neither has focus, then ... ?

Tinymce, textarea in my textarea editor

I use TinyMCE.
If I insert in my textarea (editor) another texarea, tinymce considers that the closing tag of this one is concerned and so he closes the editor. All code can be found there after outside the editor ...
Have you any idea?
Below code works :
<textarea id="elm1" name="elm1">
<input type="text" value="okokokok"/>
</textarea>
Below code don't works :
<textarea id="elm1" name="elm1">
<textarea>Blablablabla</textarea>
<input type="text" value="okokokok"/>
</textarea>
Here, "<input type="text" value="okokokok"/></textarea>" will be found outside editor...
Do you understand my problem ?
Remove all the ID attributes of "textarea" elements.
This will fix appearing a textarea inside the editor.
i had a same problem, rather then remove the id attr give them a id value, do not use "id" less textarea. it works in tinymce 4.
a <textarea id="try">textarea in </textarea> out of the textarea

Is there a way to label the Go button in iPhone Safari?

When focus is placed into an input of this form, iPhone shows input keyboard and Go button, which acts as submit. Is it possible to change the label to e.g. "Create"? I tried value, title or name but none of those work.
<form>
<input name="foo" type="text"/>
<input type="submit" name="Create" value="Create" title="Create"/>
</form>
No, something like this is not possible.

How to select tinyMCE textarea when pressing tab key?

Hello
I got similar to that code
<form method="post" action="/" name="form" autocomplete="off">
<input type="text" name="title" />
<textarea name="body"></textarea>
<input type="text" name="tags" />
<input type="submit" name="submit" value="Send" />
</form>
Where the "textarea" is tinyMCE... problem comes when I try to move selection through input and textarea items.
When the page is loaded it focus input[name=text] but when I press Tab key it select input[name=tags] instead textarea[name=body] (which is next)
Can you assist me with that issue ?
This is impossible with conventional tab indexes as TinyMCE actually hides the <textarea> and creates an <iframe> with the editor in it. You could make a work around by forcing focus on the editor in the blur event of the previous element in javascript, here is ajQuery snipped of the top of my head:
$('#prev-input').blur(function(){
tinyMCE.get('textarea').focus();
});
Then as soon as the user leaves the previous input focus would jump to the TinyMCE editor, you could possibly add a blur() method as well to got to the next element.
I resolved this with adding 'tabfocus' to plugins and then add tabfocus_elements : ":prev,:next"
http://tinymce.moxiecode.com/wiki.php/Plugin:tabfocus
http://tinymce.moxiecode.com/wiki.php/tabfocus_elements
There is a plugin solved it
http://sourceforge.net/tracker/index.php?func=detail&aid=1657397&group_id=103281&atid=738747
I known it from TinyMCE forum
http://tinymce.moxiecode.com/forum/viewtopic.php?id=813
I needed a custom tabbing order from another element on the page. The code I used to resolve this in IE11 was
var button = $('#btn-id');
button.on('keydown', function (e) {
if ((e.which === 9 && !e.shiftKey)) {
e.preventDefault();
$(tinyMCE.get()[0].contentWindow).focus();
}
});
Be aware that the above code will only work if you've only got one editor on the page. Otherwise you'll have to cycle through the array returned by tinyMCE.get() to find the correct editor to set focus to.
I found out that the focus event is being triggered but focussing in the element (container) didn't work all the time.
In my case I tabbed from editor 1 - 4 and when I shift+tab I lost focus on the instance.
To fix this I added the following to the setup event of tinyMCE
setup: function(editor) {
editor.on("focus", function(e) {
e.target.editorContainer.scrollIntoView();
});
}