TinyMCE: validate elements on each keystroke - javascript

I'm using TinyMCE as a base for a WYSIWYG editor, and I'd like to only allow a subset of HTML elements to be entered in it, whatever the mean.
There are three different means of entering HTML elements into the editor: buttons (such as a bold button), shortcuts (CTRL+B for bold) and copy-pasting.
I'm using a custom template, so I only have a limited number of buttons that allow for a certain number of elements.
But using shortcuts or copy/pasting, the user can add whatever he wants to the editor.
The valid_elements configuration option allows to filter out elements (it works as a whitelist), but it's only triggered on cleanup, which (AFAIK) is only run when the form is submitted.
This is great, but I don't want things to be added to the editor in the first place if they're not valid elements.
How could I achieve that behavior?

This is great, but I don't want things to be added to the editor in
the first place if they're not valid elements.
This is not that easy because you will need to check each way of which code can get into the editor and check before the insertion if the html code is valid. It might be easier to call the cleanup yourself on those actions:ed.execCommand('mceCleanup');
Otherwise you will have to check for
the insertion using the code plugin
copy/paste using the paste_preprocess setting
the insertion using the code plugin
and the most annoying: pasting using the right click browser menu (this is a pain in the ass to handle)

Related

Double Blind Entry (Two Pass Verification) for JavaScript?

Are there JQuery features that would help put together a double blind entry <input>?
Basically, an input that requires the exact same text to be entered twice (in the same input box). If they don't match, then the input is cleared (as if they had entered nothing).
jQuery is a framework that has the core functionalities for querying the DOM tree, making animations & etc. It hasn't any UI controls.
Meanwhile there's other library named jQueryUI. It has some popular UI controls, but there isn't such control in it, too.
I think you should write it by yourself.

How can I make modifications to an HTML form that is automatically generated?

I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.
Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.

AspTokenInput Enable And Disable

I used AspTokenInput Which is used as AutoComplete TextBox to create Tags .
I use this Link To know How to Use it.
It's Works Fine For Me and give Result As I want.
Now I want to Make This Control Enabled or Disabled On a Button Click according To Condition.
I Use this on Button Click
AspTokenInput.Enabled = "False"
But it's not Working...
Your problem is that the jQuery Tokeninput field cannot be disabled serverside.
See (http://loopj.com/jquery-tokeninput/) for documentation on this library if you want to try and finagle the js on and off. At a glance, I don't see an enable/disable flag or method. You may need to dig into the ASPTokenInput library to see how it pulls its data source, and then enable/disable the plugin with:
$("#my-text-input").tokenInput("clear"); //disable
$("#my-text-input").tokenInput("/url/to/ASPTokenInput/Datasource/");//reenable
The problem with this approach is that it basically goes around the ASPTokenInput layer, which kind of defeats the point.
My secondary approach was to try a hack, but hiding the dropdown isn't the greatest solution (or even easy in this case), nor is having the check box swap the autocomplete input for another. Swapping text boxes is probably the simplest solution.

Javascript rich text editor that allows locking regions

I'm looking for a rich text editor that allows for locking regions so that they can't be edited by the user. These locked regions would contain markup, not just plain text. TinyMCE has a plugin to support this but it is quite buggy.
Rather than having the RTE contain the content you don't want edited, why not just put multiple editors around only the areas you want users to edit?
The problem I see with doing it the other way is that you could have individual nodes within the editable text with contenteditable off, but those nodes could still be part of a larger edit (e.g., they could be deleted). To truly prevent them being edited you'd have to check the current selection whenever it changed and disable all user actions until the selection didn't include the locked content. Even if you did that, it would be tricky to make sure that a user didn't add content in a place they weren't supposed to (before the first node, say, assuming the first node was locked).

Rails: In-place editor but no postback?

I'm using Prototype in my Rails project to do in-place editing (via Ajax.InPlaceEditor) of a form. However, I don't want it to immediately post back and do the update - the form itself is pretty complicated and the user may decide to abandon their changes. Only now they can't, because the form has invisibly (to them) updated the database.
So, what I was thinking of doing was using Prototype InPlaceEditor without specifying a postback url (or make it a generic postback url that returns true) and then as part of the "onLeaveEditMode" for the field, have it update a hidden form field with the new value.
That way, when the user gets the fancy look and feel of an in-place editor but still can press "Cancel" at the bottom and undo all the changes.
So, I've embarked on this mission in a little test prototype and it seems to work -- except it means a substantial amount of javascript code and, in a way, feels like bastardizing the InPlaceEditor purpose. This has to be a solved problem but my google-fu doesn't return anything quite like I want.
Something kind of like this (but obviously not a grid form) where you can in-place edit the fields but must press "save" to commit your changes:
http://www.nitobi.com/products/grid/editors/
Couple of questions:
1) Is there an existing rails plugin or Prototype class to do this for me?
2) If not, does my approach sound reasonable?
Thanks!!
If you just want fancy feel of inline editing. Fake it.
Keep form fields border none. So it will look like normal text.
On hover highlight background of field.
On focus show border (by adding class or changing inline styles).
On Blur again hide borders.
You don't need ghost hidden fields. And most of the stuff is css.
Use jquery to minimize javascript code. :-)

Categories