TinyMCE - url validation

Question

I am using a TinyMCE-editor on our website and would like to add a specific kind of validation to it.

To show images, I am uploading those images to a file server and enter this url in the TinyMCE. Since some users might not know that they need to upload the image to a server first and cannot just select an image on their harddrive, I would like to add a client side validation to check if the url of the image is valid (i.e. is located on a server and not on "D:/...").

Is this possible, maybe even out of the box?

so you want a server validation? – Thariama Dec 07 '15 at 11:47 — Thariama, Dec 07 '15 at 11:47
Preferably a client side validation :) – deimos1988 Dec 07 '15 at 11:49 — deimos1988, Dec 07 '15 at 11:49

score 0 · Answer 1 · edited May 23 '17 at 11:59

Here is a function to check for a valid url (taken from here):

 function is_valid_url(value)
 {
   return = /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
 }

To check the src-Attribute of the editor images you may use then:

var editor = tinymce.get('your_editor_id');
var $body = $(editor.getBody());
var $images = $body.find('img');
$images.each(function(){
     var url = this.getAttribute('src');
     console.log(url + 'is a valid URL:', is_valid_url(url));
});

Ok thank you - but do you know which event is called when I press "OK" on the "insert image"-dialog? This should be the entry point of the validation. — deimos1988, Dec 09 '15 at 15:37

TinyMCE - url validation

1 Answers1