I have initiated the tinyMCE for the list of textarea's (around 12) using the below code (generated from TypeScript code).
tinymce.init({
selector: this.selector,
setup: function (editor) {
editor.on('change blur', function () {
editor.save();
tinymce.triggerSave();
console.info('tinyMCE change event fired.');
});
},
branding: this.branding,
menubar: this.menubarFlag,
browser_spellcheck: this.browser_spellcheck,
fontsize_formats: this.fontsize_formats,
block_formats: this.block_formats,
toolbar1: this.toolbar1,
height: this.height,
plugins: this.plugins
});
I tried both editor.save(); and tinymce.triggerSave(); on tinyMCE change event. But still hidden textarea change event is not firing though content is updated to textarea.
I need textarea's event to actually add an element to the form by adding name attribute.
$(divObj).find('.segment-input').change(function () {
$(divObj).find('input[type="hidden"]').attr('name', $(divObj).find('input[type="hidden"]').attr('name-nochange'));
$(divObj).find('input[type="hidden"]').removeAttr('name-nochange');
});
Per your comments above check out this fiddle:
http://fiddle.tinymce.com/Cogaab
The editor.on() function has access to the editor (e in the fiddle) upon which it was triggered. You can get (among other things) the target ID of the underlying text area. In the fiddle I provided I log that to the console for each of the editors on init, change, and blur.
Once you know the ID you can find that using JavaScript and do what you need to that native element.
There is a variety of useful data in that editor (e) object - its worth logging e and looking at what else is there as other data there may also be helpful for your scenario.
Related
I was using tinymce editor but the problem I was facing is when I was trying to set the value on SetContent function it was showing error like setcontet property is null and not able to store the value same script is working fine on angular project but not in vb.net
The change which i was done in my project is just hold the value in jquery function and pass that value in tinymce.activeeditor.setcontent
<script>
function setEditorVal() {
debugger;
tinyMCE.activeEditor.setContent('hell0 world');
}
</script>
Without seeing running code I can't say for sure but the issue here is almost certainly a timing issue of when your JavaScript runs.
The TinyMCE init() function is asynchronous. When you call init() it takes some time for the process to complete. In your code example when you call activeEditor are you 100% sure there is indeed an active editor? If you call activeEditor before init() is done there is no "active editor".
The correct way to make sure that TinyMCE is fully initialized is to rely on the init event. This event is fired after TinyMCE is fully initialized and ready for interaction.
To load content via the init() you can do something like this:
tinymce.init({
selector: "textarea",
plugins: "advlist autolink lists ...",
toolbar: "undo redo | bullist numlist ...",
setup: function (editor) {
editor.on('init', function (e) {
//this gets executed AFTER TinyMCE is fully initialized
editor.setContent('<p>This is content set via the init function</p>');
});
}
});
I need to implement Autocomplete feature in ag grid cell on the table. Is ag provides any options for that. I am just seeing select with options. But my need is to edit the cell and while start typing the values has to display below based the character.
Like you I could not find this feature. I decided to write an Angular component for this purpose and share it.
It has the ability to filter by starting to type, as well as clicking the selection by mouse. Keyboard arrow up and down navigation is also included.
It's a simple component and should be quite straightforward to edit to your likings, or take the code and implement in JS or a different framework if you are not using Angular. I am having some unfortunate cosmetic issues (primarily on the last column of the grid), which I hopefully can solve soon and then will update the repository.
https://github.com/superman-lopez/ag-grid-auto-complete
Edit:
Since my original post, a new project has started and this is not limited to Angular projects:
https://github.com/avallete/ag-grid-autocomplete-editor
You can use a jQuery autocomplete as part of the cell editor. You have to do it in the afterGuiAttached function of the custom editor so it won't run until after your input has been created.
// function to act as a class
function YourCustomEditor () {}
// gets called once before the renderer is used
YourCustomEditor.prototype.init = function(params) {
this.eInput = document.createElement('input');
this.eInput.setAttribute('class', 'inputClass');
this.eInput.setAttribute('type', 'text');
}
};
YourCustomEditor.prototype.afterGuiAttached = function() {
$('.inputClass').autocomplete({
source: function(request, response) {
// Do your autocomplete filtering here
},
datatype: 'json',
select: function(event, ui) {
// Do Stuff on select
}
});
this.eInput.focus();
};
I have large data of content (newsletter) and I have added in Tiny Mce Editor. Contents looks fine but when I start typing (adding more content) it types very slow and I have to wait until it's done printing the character.
The issue is with large contents only not with small content.
You can check below demo link to test the above case. Paste the large content it source code and try to type in Tiny Mce editor not in source code.
https://www.tinymce.com/docs/demo/basic-example/
i faced similar issue. My problem was that in tinymce.init i had a function for update textarea:
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
}
Problem was that the function update textarea with every change, with every key press or color change. More content, more slower.
My solution here was simple, delete triggerSave from tinyMCE init and call tinymce.triggerSave() right before submitting form via submitting button:
<button type="submit" name="btn-addpost" onclick="tinyMCE.triggerSave();"><span class="glyphicon glyphicon-send"></span> Add Post</button>
Maybe you have similar problem.
I hope this will be in any way helpfull for you.
I am using TineMce with React js and facing the same problem. The problem was on every key press inside editor I was updating the form value which was causing the slow typing.
So instead of updating form on every key press I am updating at onBlur event now.
Below is my example for React js but you just have to implement onBlur event in your js code
const handleEditorBlur = (ed, event) => {
const content = event.getContent();
if (content) {
formik.setFieldTouched("content", true);
}
formik.setFieldValue("content", content);
}
<Editor
apiKey={process.env.MIX_TINYMCE_API_KEY}
onBlur={handleEditorBlur}
//onEditorChange={handleEditorChange}
//value={formik.values.content}
init={{
content_css: "writer",
plugins: "lists",
toolbar: "code",
}}
/>
I'm using the awesome CarouFredSel JQuery carousel plugin which includes features for integrating the JQuery TouchSwipe library for handheld devices as well.
The carousel elements are divs, within the div is an image and text wrapped in an <ahref> tag.
Everything works as it should, but I've noticed that if the carousel element (in this case a div) includes a link, the swipe effect on various mobile devices does not work.
If I remove the link around the image/text, the swiping motion works fine. It's almost as if preventDefault() is working in reverse. If I remove the link around the image, and leave the text as a link, the swiping works for the image, and not the text.
I can easily click the item as a link, I just cannot swipe if it IS a link.
Has anyone experienced this problem with CarouFredsel in particular?
Many thanks, SO.
Touchswipe is disabled by default for a elements.
See http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html
From the link:
By default the value of $.fn.swipe.defaults.excludedElements is "button, input, select, textarea, a, .noSwipe, " To replace or clear the list, re set the excludedElements array. To append to it, do the following (dont forget the proceeding comma) ...
excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });
I ended up just changing the defaults in the plugin, since all my modals were children of an anchor element.
excludedElements:"button, input, select, textarea, .noSwipe"
The carouFredSel with < a > doesn't work for me well with swipe 'inside'.
You can use excludedElements, but on Ipad you'll have to hold your finger to use < a > (longTap). That's not good for users. If you try to use carouFredSel({ swipe:( option { tap: function ... it won't work (at least in my case).
My solution is to use swipe (touchSwipe) separately:
$(".carusel").swipe({
excludedElements: "button, input, select, textarea, .noSwipe",
swipeLeft: function() {
$('.carusel').trigger('next', 4);
},
swipeRight: function() {
$('.carusel').trigger('prev', 4);
},
tap: function(event, target) {
window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
}
});
Well, I'd really love to know if using links within TouchSwipe and the CarouFredSel plugin is possible, but I found a workaround that seems to work.
Hopefully it will help someone.
I ended up using a second touch jquery library, TouchWipe.
When, calling the CarouFredSel plugin, I set the swipe parameter to true:
$('#carousel-slider').carouFredSel({
width: '100%',
prev: '#prev-propslider',
next: '#next-propslider',
swipe: true
});
Then, calling both the TouchSwipe AND Touchwipe libaries (not sure if this matters, but I'm using the regular TouchSwipe swipe:true parameter for another slider without links), I wrote a separate function to call custom events for the TouchWipe plugin:
$('#carousel-slider').touchwipe({
wipeLeft: function() {
$('#carousel-slider').trigger('next', 1);
},
wipeRight: function() {
$('#carousel-slider').trigger('prev', 1);
}
});
Hopefully this helps someone, but I'd really love to know if TouchSwipe and CarouFredSel can work with <a href> tags as I cannot find any live working examples.
Thanks for the solutions with the excludedElements, that fixed my problem as well. Never thought of that.
But you don't have to use the touchwipe Plugin separately, there is "swipe.options" as a configuration option for touchswipe in the caroufredsel plugin.
See the caroufredsel options
There you can use all options of the touchswipe plugin, I think.
You can use below function to enable click after swipe.
`$('.class').swipe({
swipe: function(event, direction, distance, duration, fingerCount) {},
click: function(event, target) {
$(target).click();
},
threshold: 75
});`
https://stackoverflow.com/a/11919170/3223427
Caroufredsel is already integrated and compatible with touchswipe.
Add tochswipe js library
Add the touch events in the caroufresel configuration
JAVASCRIPT RESULT
$(document).ready(function () {
$('#foo2').carouFredSel({
auto: false,
responsive: false,
items: {
visible: 3,
width: 100
},
width: 600,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
swipe: {
onMouse: true,
onTouch: true
}
});
});
Here is a working demo
I want to attach a event to dynamically created element class.So i used live function but it was not triggered. So checked live function reference ,there i red below notes
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().
so decide to use on function,But it still not working.The text field is already attached with jquery ui datpicker.On another element select i disabled that field.
jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');
after disabled if i click i want to show alert or tooltip.so i tried this,but not working
jQuery(".date_picker_disabled").on("click", function(event){
alert('hi');
});
What may be the problem
I am using jquery 1.7.1 ( jquery-1.7.1.min.js)
The problem is that jQuery(".date_picker_disabled") finds elements with that class and binds to them. If elements don't have the class at the time the binding is made, the events will not be handled.
The on function allows you to get round this by handling them on another element when the event "bubbles up to" a parent element. In this instance, we could say the body element – there may be a more specific common parent you could choose.
jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
alert('hi');
});
The event handler is now bound to the document.body element. All clicks that happen anywhere in the body are tested to see if they originated from an element matching the selector. If so, the handler is fired.
This is explained on the documentation for the on function. It is the same behaviour as was present in previous versions of jQuery with live and delegate functions.
Having taken another look at your code, you have disabled="disabled" set on your input element. click events are not fired on disabled elements.
This is tricky.
When your code runs, your element does not have .date_picker_disabled class so your jQuery(".date_picker_disabled") returns nothing and .on() is not called.
Apply .on() on the outer element and use the selector parameter:
// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
// do something
});
This will delegate the event to the <outer element>. The handler will only be executed if an element with class .date_picker_disabled has been clicked (second param).
From the documentation of .live():
Rewriting the .live() method in terms of its successors is
straightforward; these are templates for equivalent calls for all
three event attachment methods:
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
So in your case, you would do:
$(document).on('click', '.date_picker_disabled', function(event){
alert('hi');
});
I was using jQuery 1.7.2 and tried all proposed methods:
Didn't work:
$(document.body).on('click', '.collapsible-toggle' function() {
console.log('clicked');
});
Didn't work:
$(document).on('click', '.collapsible-toggle' function() {
console.log('clicked');
});
None of them worked until I tried the following:
----- Worked! ----
$('body .collapsible-toggle').on('click', function() {
console.log('clicked');
});
Maybe you should do:
jQuery("body").on("click",".date_picker_disabled", function(event){
alert('hi');
});
in this way you attach the event handler to the bosy and specify to fire that event only when that selector ".date_picker_disabled" is matched.
BTW this is exactly how live() worked
try :
$(document.body).on( "click", ".date_picker_disabled", function() {
alert('hi');
});
document.body helps for dynamic html too.
Just chekc it out: .on not working on dynamic html