This issue is specifically for TinyMCE v6 or v5. I need to replace ' with &apos. I can do this in both v3 and v4. But I cannot for the life of me get it to work in v5 or v6. In both v3 and v4, there seems to be some sort of "on save" event that replaces the content before it's sent to the server.
In v3:
tinymce.init({
setup: function(editor) {
editor.onSaveContent.add(function(editor, e) {
e.content = content.replace(/'/g, "&apos");
});
}
});
In v4:
tinymce.init({
setup: function(editor) {
editor.on("SaveContent", function(e) {
e.content = e.content.replace(/'/g, "&apos");
});
}
});
How do I achieve the same thing in either v5 or v6? The reason I need to do this is because I get a "dangerous request" error otherwise.
#michael Fromin, I'm not allowed to comment yet, so I have to use the answer field unfortunately.
I run into the same problem.
if you add a submit button to your fiddle:
https://fiddle.tiny.cloud/Xdiaab/1
<form method="post" action="dump.php">
<textarea name="content">
<p>This is an apostrophe (#39): '</p>
<p>This is an apostrophe (native): '</p>
<p>This is an apostrophe (apos): '</p>
</textarea>
<input type="submit" name="Save" value="Save">
</form>
then you can post the content and see the result:
IIS / ASPX is throwing error on this, we would like/need to replace this value with &apos.
for now, i have fixed the problem by replacing ' with &apos in tinymce.min.js
It works now, but this is a workaround..
Thanks a lot.
This works for tinyMCE 6:
init_instance_callback: function (editor) {
editor.on('PostProcess', function (e) {
e.content = e.content.replace(/\'/g, "'");
});
},
https://www.tiny.cloud/docs/tinymce/6/events/
Related
I have just started using AngularJS, I would like to know this approach to scroll the page to the first input with an error when I submit a form.
Here is the way with jQuery :
$('html, body').animate({
scrollTop: $("--- #ID OF THE FIRST INPUT WITH ERROR ---").offset().top
}, 2000);
How to do this in Angular ?
HTML
<form class="form" novalidate>
<input type="text" class="nom-du-projet" ng-model="fields.nom" required />
<p ng-show="fields.nom.$invalid && !fields.nom.$pristine">The name is required.</p>
<input type="text" ng-model="fields.cible" />
...
<button type="submit" ng-click="submit(fields)">Add</button>
</form>
JS
$scope.submit = function(fields){
console.log(fields);
$http
.post('/xxxx', fields)
.success(function(response) {
// success
})
.error(function(response) {
// scroll to field error
});
}
You could use the $anchorScroll service.
$location.hash("<errorFieldID>");
$anchorScroll();
Or you could just use:
$window.scrollTo //you could even get bold and user window.scrollTo
There are a couple plugins out there that say they can do it.. but I unfortunately have not vetted them so I can't recommend any.
You could try something like this:
//scroll to an anchor by ID
$scope.scrollToAnchor = function (anchor) {
if (anchor !== null) {
$location.hash(anchor);
$anchorScroll(anchor);
}
}
//use above function
$scope.scrollToAnchor($scope.myForm.$error.required[0].$name);
//or any ID
$scope.scrollToAnchor('ID');
I have a written a angularJS directive for the same purpose, you can include the directive as bower component and use this functionality without having to write any extra code for any form in your application. Please do let me know, if any improvements or corrections/enhancements are needed for the directive.
https://github.com/udayvarala/ng-scroll-to-error
Thanks,
I am pretty much a backbonejs newbie. I am submitting form data to mysql.
I have one special input box where the use types in his or her email address as a user name.
As it stands, I can check all my input fields (user, pass, address, phone, etc) client
side, use an event on a button, load the model, use PHP to put the data into the db.
This works just fine and is tested. The backend validation works fine and feeds to
the browser when necessary.
Now I want to check the loginname field against the back end BEFORE writing the record (I know I can trap this on the back end in the final submit but want to do it here). If the user already has an account with the same email address I want to catch that client side. The issue is I can't seem to find a way to capture this blur (or onblur or change whatever I use) when I move off the loginname field so I can (in the render of the view is all I can figure) go off, use PHP again and send back a flag "new" or "existing"
No errors in Google developer tool
define([
'jquery',
'underscore',
'backbone',
'lib/jquery-migrate-1.2.1',
'models/RegisterModel',
'text!templates/RegisterTemplate.html',
'lib/jquery.maskedinput-1.0',
'lib/bootstrap-acknowledgeinput.min',
'lib/jqBootstrapValidation'
], function($, _, Backbone, jQueryMigrate, RegisterModel, RegisterTemplate,
MaskedInput,Ack, jqAck){
var RegisterView = Backbone.View.extend({
el: $("#container"),
events: {
'click .btn-primary': 'saveClient',
'focusout .loginname': 'usercheck'
},
usercheck: function() { //** not working
console.log("usercheck detected");
alert("Alerts suck.");
},
render: function(){
//Since our template has dynamic variables in it, we need to compile it
var compiledTemplate = _.template( RegisterTemplate, this.model );
this.$el.html(compiledTemplate); //Replaces EVERYTHING inside the <div
id="container">
this.$('#phone').mask('(999) 999-9999');
this.$('#phone2').mask('(999) 999-9999');
this.$('#zip').mask('99999');
$(function () { //** working
$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
});
$('.loginname').live("click", function () { //** not working
alert('AHHHHHH!');
});
$().acknowledgeinput({ // ** this works fine
success_color: '#00FF00',
danger_color: '#FF0000',
update_on: 'keyup'
});
** I looked in Chrome at the blur event for the input with name/id = loginname
HTML I did look at the blur for the elmement with id (Chrome says it's input#loginname)
does have the blur event attached to it. I changed my code a bit, but still it doesn't seem to trigger. I never know with backbone if it's just something simple or one of those
"this and scope" issues :)
<div id="container" class="row-fluid">
<div class="span6">
<div class="requiredNotice"><i class="icon-warning-sign icon-red"></i> Can't
be blank!</div>
<h3>New Client Registration:</h3>
<form class="form-horizontal" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label required" for="loginname">UserID (Email
</label>
<div class="controls">
<div class="input-prepend" data-role="acknowledge-input">
<div data-role="acknowledgement"><i></i></div>
<input type="email" data-type="email" required="required"
placeholder="Use email account"
maxlength="254" name="loginname" id="loginname"
class="inputclass pageRequired
input-xlarge" />
</div>
<span class="loginname_error label label-info hide"></span>
</div>
</div> ... etc
events: {
'click .btn-primary' : 'saveClient',
'focusout #input.loginname' : 'userCheck'
// "blur input.loginname" : "userCheck"
},
userCheck: function(e) {
console.log("usercheck detected");
alert("Alerts suck.");
},
.live is not needed here, there is nothing wrong with your event hash as well. There could be some thing wrong with template. I did just isolate the input field and focusout event in this jsfiddle it's working fine.
<script type="text/template" id="formtemplate">
<form>
<input type="text" class="loginname" value="" placeholder="enter login"/>
</form>
</script>
...
var View = Backbone.View.extend({
events:{
'focusout .loginname':'checkUser'
},
render:function(){
this.$el.html($('#formtemplate').html());
},
checkUser:function(e){
alert('checkUser'); //works well
}
});
var view = new View();
view.render();
view.$el.appendTo('body');
Okay - you said to tie this to blur, and this format finally worked!
'blur input#loginname' : 'userCheck'
events: {
'click .btn-primary' : 'saveClient',
'blur input#loginname' : 'userCheck'
},
userCheck: function(e) {
console.log("usercheck detected");
alert("Alerts suck.");
},
The console is not showing up, but at least I'm trapping the blur now! Thanks eveyone.
I'm still new with angularJS. I've been trying to make a custom button and attach it to my form instead of using regular button. I've tried couple of approaches and so far none of them worked well. now when I press enter inside the input field I get the "results" view perfectly loaded to the main page. but when I click the search button "a" link tag the view loads then disappears instantly. as well as the location of the browser changes to "results" then goes back to "/#/" only. I have no idea why and what's causing this.
here's my html:
<div id="search-container" ng-controller="SearchController">
<form ng-submit="submitQuery()">
<div>
<input id="keywords" name="keywords" ng-model="query.keywords" placeholder="please enter query" value="" required/><br>
<img src="/Images/search-icon.png" alt="Search" title="Search" />
</div>
</form>
</div>
here is my model and ngjs controllers:
var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) {
$routeProvider.when('/results', {
templateUrl: 'PartialViews/results.html',
controller: 'ResultsController'
});
$routeProvider.otherwise({ redirectTo: '/' });
});
bfapp.controller('ResultsController', function ($scope) {
});
bfapp.controller('SearchController', function ($scope, $location) {
$scope.query = { keywords: "" };
//on form submit
$scope.submitQuery = function () {
if ($scope.query.keywords !== null) {
$location.path('/results');
}
};
//on button click
$scope.submitForm = $scope.submitQuery;
});
well I feel so stupid. I've just found the solution after banging my head for couple of hours. Although this has never been mentioned on any site. All I needed is to remove "#" from <a href="#" id="search-btn" ng-click="submitForm()">. Now it works like charm.
How do I autosubmit the selection made with Twitter Bootstrap typeahead()??
http://twitter.github.com/bootstrap/javascript.html#typeahead
There is a clean way using the updater callback:
input.typeahead({
'source' : ['foo', 'bar'],
'updater' : function(item) {
this.$element[0].value = item;
this.$element[0].form.submit();
return item;
}
});
When user selects an option (either by mouse click or keyboard), the callback populates the input box and sends the form.
If you use the external typeahead.js plugin (recommended for Bootstrap 3):
To trigger a form on select just use the custom events.
$('#my-input')
.typeahead({/* put you options here */})
.on('typeahead:selected', function(e){
e.target.form.submit();
});
More info on custom events here and demo about JSfiddle.
Might not be the best solution, but I just tried this on my typeahead setup locally and it worked.
If your typeahead looks something like this...
<form id="test-form" method="post" action="">
<input id="test-input" type="text" data-provide="typeahead"
data-source='["1","2',"3"]' />
</form>
Then you can submit it with this javascript.
<script type="text/javascript">
$('#test-input').change(function() {
$('#test-form').submit();
});
</script>
Apparently there are a few git merge requests. This one does the job and allows you to send an array of objects to typeahead: https://github.com/twitter/bootstrap/pull/1751
I added a blur callback on the input. Be aware that you need to wait for a short period, that typeahead can change the value in the input and the blur callback is not called before that. It's just a workaround, but it works.
$('input.myTypeaheadInput').blur(function(e) {
window.setTimeout(function() {
window.console && console.log('Works with clicking on li item and navigating with the keyboard. Yay!');
}, 50);
});
To populate a value of a hidden field in an html form from the typeahead data selection, I did the following:
$('#prefetch').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'trees',
source: trees,
limit: 15
}).on('typeahead:selected', function(e) {
var result = $('#prefetch').val()
$('#formpane input[name=\"myID\"]').val(result)
});
For reference, here's the html code:
<body>
<div id="formpane">
<form action="/thanks" method="POST">
<input class="typeahead" type="text" placeholder="select categories" id="prefetch">
<button type="submit">Submit</button>
<input type="hidden" name="myID" />
</form>
</div>
<script type="text/javascript" src="js_file_above.js"></script>
</body>
I have been looking everywhere for this without any luck. If you go to google.com on the iphone when you focus in on the search field a little 'x' appears all the way in the right and if you touch it it clears the current value of the field. Anybody know how to accomplish this?
I used the develop menu in Safari and changed the user agent to iPhone. Viewing the source on Google, it looks like they've set their html up like this:
<div class="gp2">
<input class="gp7" id="query" type="text" name="q" size="30" maxlength="2048" autocorrect="off" autocomplete="off" />
<a class="clear" id="clearQuery" href="#">
<img src="data:image/gif;base64,R0lGODlhAQABAID%2FAMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D" alt="" />
</a>
and are using this javascript:
function initClearQueryLink(query,clearQuery){
clearQuery.setAttribute("title","Clear");
clearQuery.addEventListener("mousedown",clearQueryBox,true);
query.addEventListener("keyup",_handleClearQueryLink,false)
}
function _handleClearQueryLink(){
var query=document.getElementById("query");
var clearQuery=document.getElementById("clearQuery");
if(clearQuery)
if(query.value.length>0){
clearQuery.style.display="inline";
clearQuery.style.visibility="visible"
} else{
clearQuery.style.display="none";
clearQuery.style.visibility="hidden"
}
}
function clearQueryBox(event){
var query=document.getElementById("query");
var clearQuery=document.getElementById("clearQuery");
query.value="";
clearQuery.style.display="none";
clearQuery.style.visibility="hidden";
hideSuggest();
if(event)event.preventDefault()
}
This is a special type of input developed by Apple and not approved by the W3C. If you use it, it works fine on browsers that don't recognize it.
<input type="search" name="q" />
There are other parameters, including domain name and search results so the user can use their search history. Google for how to use those.
The trick is to listen for/bind event on mousedown that way the click event never fires and your input element doesn't lose focus. As in the google example above.
A really good resource for iPhone web development is iphonewebdev.
However it seems like this particular feature is not part of Apple's API (at least from my research), rather a pure javascript / css implementation.
You can re-create it with something like this:
<script>
window.onload = function() {
var btn = document.getElementById("clear_input");
btn.onclick = function() {
var div = btn.parentNode;
var input = div.getElementsByTagName("input")[0];
input.value = "";
return false;
}
}
</script>
<div>
<input type="text" />X
</div>
You should style the X to be an image so that it blends inside the input. And of course I strongly recommend using a JavaScript framework if you can.
Jquery mobile provides this:
http://jquerymobile.com/test/docs/forms/search/
And this is my jQuery version, it hides it at the start, and if the user deletes what is typed it will remove the 'x'. Also when they have removed the text with the button it will hide the 'x' too.
html:
<input type="search" name="search" id="search" />
X
JavaScript:
$('.clear_input').hide();
$('#search').keyup(function() {
var search = $(this).val().replace(/^\s+|\s+$/g,"");
if (search.length >= 1) {
$('.clear_input').show();
} else {
$('.clear_input').hide();
}
$('.clear_input').click(function() {
$('#search').val('');
$('.clear_input').hide();
});
});
The JavaScript version is faster than the jQuery version of course.