Does someone used tinymce.dom.Selection class in tinyMCE? I'm unsuccessfully trying to apply a function to dom.Selection.onBeforeSetContent or onSetContent. The documentation shows the following syntax:
event_callback(<tinymce.dom.Selection> ed, <Object> o)
There's no neat example of its implementation. I'm in a hurry and tend to give up.
What i have already tried so far is:
$('#tinyMce').tinymce({
...
setup: function(ed) {
ed.dom.Selection.onSetContent.add(function(se,o){...});
}
});
which fails with "ed.dom is undefined". I also tried:
$('#tinyMce').tinymce({
...
init_instance_callback : "CustomInitInstance"
});
function CustomInitInstance(inst){
//inst.dom.Selection.on... fails with "inst.dom is undefined"
tinymce.dom.Selection.onBeforeSetContent.add(function(se,o){...}); // fails with "tinymce.dom.Selection.onBeforeSetContent is undefined"
}
$('#tinyMce').tinymce({
...
setup: function(ed) {
ed.onInit.add(function(ed, o) {
ed.selection.onBeforeSetContent.add(function(se,o){
alert(o.content);
});
});
}
});
it works before calling ed.selection.setContent('my text')
alert (o.content); // display 'my text'
ed.selection.onBeforeSetContent.add(function(se, o) {
alert(o.content);
});
The above should fire an alert containing the content to be inserted if you paste it into your first example
Related
I'm trying to implement a Blazor app that listens to keyboard input all the time (some kind of full screen game, let's say).
I can think of a key down event listener as a possible implementation for it, since there's not really an input field to auto-focus on.
Is there a better solution to just react to key-presses in any part of the screen?
In case that's the chosen one, how can I add an event listener from a client-side Blazor app? I've failed trying to do so by having a script like this:
EDIT: I modified a little bit the code below to actually make it work after fixing the original, key mistake that I was asking about.
scripts/event-listener.js
window.JsFunctions = {
addKeyboardListenerEvent: function (foo) {
let serializeEvent = function (e) {
if (e) {
return {
key: e.key,
code: e.keyCode.toString(),
location: e.location,
repeat: e.repeat,
ctrlKey: e.ctrlKey,
shiftKey: e.shiftKey,
altKey: e.altKey,
metaKey: e.metaKey,
type: e.type
};
}
};
// window.document.addEventListener('onkeydown', function (e) { // Original error
window.document.addEventListener('keydown', function (e) {
DotNet.invokeMethodAsync('Numble', 'JsKeyDown', serializeEvent(e))
});
}
};
index.html
<head>
<!-- -->
<script src="scripts/event-listener.js"></script>
</head>
Invoking it through:
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await jsRuntime.InvokeVoidAsync("JsFunctions.addKeyboardListenerEvent");
}
and having the following method trying to receive the events:
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
namespace Numble;
public static class InteropKeyPress
{
[JSInvokable]
public static Task JsKeyDown(KeyboardEventArgs e)
{
Console.WriteLine("***********************************************");
Console.WriteLine(e.Key);
Console.WriteLine("***********************************************");
return Task.CompletedTask;
}
}
I manage to get the script executed, but I'm not receiving any events.
The name of the event is keydown, not onkeydown.
I am trying to write an angular directive that adds validation attributes to the tag, but it doesn't seem to be working. Here is my demo. You will notice that "Is Valid" remains true if you delete the text in the second input box, but goes to false if you delete the text in the first input box.
http://plnkr.co/edit/Rr81dGOd2Zvio1cLYW8D?p=preview
Here is my directive:
angular.module('demo', [])
.directive('metaValidate', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.attr("required", true);
}
};
});
I'm guessing I am just missing something simple.
All rules for validation of the form are being read in compilation phase of the form, so after making changes in a child node, you need to recompile form directive (form it's a custom directive in AngularJS). But do it only once, avoid infinite loops (your directive's 'link' function will be called again after form's compilation).
angular.module('demo', [])
.directive('metaValidate', function ($compile) {
return {
restrict: 'A',
link: function (scope,element, attrs) {
if (!element.attr('required')){
element.attr("required", true);
$compile(element[0].form)(scope);
}
}
};
});
Working plunker: http://plnkr.co/edit/AB6extu46W4gFIHk0hIl?p=preview
Be careful of infinite loops and recompiles, a better solution is here: Add directives from directive in AngularJS
angular.module('app')
.directive('commonThings', function ($compile) {
return {
restrict: 'A',
terminal: true, //this setting is important to stop loop
priority: 1000, //this setting is important to make sure it executes before other directives
compile: function compile(element, attrs) {
element.attr('tooltip', '{{dt()}}');
element.attr('tooltip-placement', 'bottom');
element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html
return {
pre: function preLink(scope, iElement, iAttrs, controller) { },
post: function postLink(scope, iElement, iAttrs, controller) {
$compile(iElement)(scope);
}
};
}
};
});
Working plunker is available at: http://plnkr.co/edit/Q13bUt?p=preview
I know this is quite an old question, but for what it's worth, the angular docs describe ng-required which takes a boolean value. This solved a similar problem I was having.
http://docs.angularjs.org/api/ng/directive/input
According to TinyMCE API, the following JavaScript code observe changes in TinyMCE editor:
tinyMCE.init({
...
setup : function(ed) {
ed.onChange.add(function(ed, l) {
console.debug('Editor contents was modified. Contents: ' + l.content);
});
}
});
However, I'm unable to run this code from Dart using the js Library. Help is appreciated.
UPDATE:
There is a problem in the JS code above. Alternatively, I found this working code in here:
var ed = new tinymce.Editor('textarea_id', {
init_setting_item: 1,
}, tinymce.EditorManager);
ed.on('change', function(e) {
var content = ed.getContent();
console.log(content);
});
ed.render();
I still need help running the code from Dart. And preferably storing its results in a Dart variable for subsequent processing.
Here's the same code called from Dart :
var ed = new js.Proxy(js.context.tinymce.Editor, 'textarea_id', js.map({
'init_setting_item': 1
}), js.context.tinymce.EditorManager);
js.retain(ed); // retain allows to use 'ed' in the following callback
ed.on('change', new js.Callback.many((e) {
var content = ed.getContent();
window.console.log(content);
}));
ed.render();
When I use the following jquery live function
$("a[rel]").live('click', function () {
e.preventDefault();
alert('clicked');
});
e.preventDefault(); does not work, because the action behind the a tag is still fired.
How do I prevent an event when I use jQuery.live?
Don't forget the e inside the function argument list.
$("a[rel]").live('click', function (e) {
e.preventDefault();
alert('clicked');
});
You could also try adding
return false;
to the function.
You are missing e argument to the function, try this:
$("a[rel]").live('click', function (e) {
e.preventDefault();
alert('clicked');
});
I am trying to call a jquery ui dialog by attaching the function to the onsuccess property of the ajaxoptions on a ajax.beginform..
<script type="text/javascript">
// Dialog
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
});
</script>
In a seperate script file I have this..
function EmailResult() {
$('#dialog').dialog('open');
}
Then I have a contact form that is not actually wired up yet, the controller just responds with one of two string responses.
<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "ContactResult", OnSuccess="EmailResult" }))
{ %>
If I take out the OnSuccess="EmailResult" from the Ajax.BeginForm or simply remove $('#dialog').dialog('open'); from my EmailResult function the error goes away so obvisouly this is an issue with the OnSuccess property and a Jquery UI Dialog.
My first question is am I doing something wrong that is causing this not to work and/or if this won't work then is there a better solution.
I am trying to create a dialog that comes up and says whether the message was sent. I do not want to use the alert dialog box.
I guess the error would help, in the IE 8 debugger it comes up with an undefined error in the MicrosoftAjax.js library
The finally block of this code is causing the problem and under the locals tab in IE 8 it says b is undefined.
this._onReadyStateChange = function () {
if (a._xmlHttpRequest.readyState === 4) {
try {
if (typeof a._xmlHttpRequest.status === "undefined") return
} catch (b) {
return
}
a._clearTimer();
a._responseAvailable = true;
try {
a._webRequest.completed(Sys.EventArgs.Empty)
} finally {
if (a._xmlHttpRequest != null) {
a._xmlHttpRequest.onreadystatechange = Function.emptyMethod;
a._xmlHttpRequest = null
}
}
}
};
What it was updating was
<%= Html.Hidden("ContactResult") %>
Which turns out was the whole problem, I changed the Hidden Input to a div and it works perfectly. Not sure why but... if anyone else runs into this there you go...
So I guess this is what I figured out.. I started a new mvc project with two inputs and started just using an alert box as it turns out it was not related to the jquery.ui dialog plugin. I got it to work correctly with the alert box coming up after it was run using the ajax.beginform.
So long story short.. You can't use a Hidden Input for the UpdateTargetID in the Ajax.BeginForm? I guess this is kind of a question and the answer but changing the UpdateTargetID to the ID of a "div" fixed it and it works appropriately. You can even set the Div visibility to hidden and it works.