tinyMCE setting not found (2 parts) - javascript

Question 1: I am wokring with tiny MCE 4 and have this bit of code
editor.addMenuItem("item1", {
text: "Name",
onclick: function() {
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
As you can see I am passing in a setting object where the fields text and onclick is set. Also if you look at the example here it uses a setting object with the field text, context, and onclick. But when I look at the documentation for settings attribute I do not see context, or onclick listed there. I looks at the menu and button also and could see anything there. Is there a more complete documentation somewhere?
Question 2: The reason I am asking this is because I want to see if there is a settings somewhere, that I can use to change the menus, for example, in the fiddle mention here instead of additional data displaying list box, I want the menu item used to display list box to be replaces with a textbox/dropdown.

In the example that you mentioned it is already explained that the context is where to you put your new menu item in the existing menu (Example configuration of a menu here). So if you have an context "tools", you can add you new menu item to "tools".
editor.addMenuItem("item1", {
text: "YourItemName",
context: "tools",
onclick: function() {
//The function of your menu item insert some content at the cursor position, is that corrent?
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
For your first question: No, at the moment the documentation of tinyMCE 4.x is still not complete. To learn more about how plugins (menus and buttons incl.) work, I downloaded the complete source code. I looked at some plugins (e.g. link plugin) and tried to understand the code there. At the moment the fastest way to learn some not-well-documented stuff.
For your second question: If you want to edit existing menus (or plugins), you have to download the dev-code and look the sources.

Related

Issues with tinyMCE and 'mceAddEditor'

So I have a page that uses JavaScript to dynamicaly add <textarea>s. I need these text areas to use tinyMCE. I am using tinyMCE v4.
I have an init function for tinyMCE
function TinyMceEditConfig() {
tinymce.init({
selector: '.editor'
});
}
then i call the function
TinyMceEditConfig();
then i create dynamic text areas. Basically, someone selects they want to enter text from a drop down list. once they select it the text area is generated. when a user clicks the dropdown it calls a function that contains this code (my brackets may be messed up here...dont pay attention to that, lol, they are fine in my code, just look at the meat)
return $('<div>', {
'css': {'display': 'none'},
'html': [
$('<textarea>', {
'value': this.text_value,
'placeholder': this.placeholder_text,
'class': "editor"] });
};
so at this point, i can click the dropdown to generate the text area (plain text). if i refresh the page tinyMCE kicks in and everything is fine. looking around online the following code is supposed to fix my problem so that tinyMCE will show as soon as the field is added. this is in my code immidiatly after i call the last code snipit.
tinymce.EditorManager.execCommand('mceAddEditor', false, ".editor");
however, it does not.....any advice?
You can't call init() on a textarea until it exists on the page. If I understand your comments above you are first invoking your TinyMCE init() function and then later adding textarea elements to the page. This won't work as the init() will only handle things that already exist on the page.
When you dynamically add the new textarea to the page you then need to call tinymce.init() after the textarea is part of the DOM in order to have TinyMCE appear in place of the textarea.
It might help to create a TinyMCE Fiddle (or CodePen etc) to show what you are actually doing as that might help people see where things are failing.

How to copy/paste in Chrome extensions

I've just started learning to code last week so bear with me. I want to make an extension that does the following.
1)When you right click on a textbox a custom context menu is opened
2)When the context menu item is clicked, the title of that context menu item will be pasted into the text box.
So far I have created all the context menus. I just can't figure out how to copy/paste the title of the context menu item into the text box. I've read about the documents.execcommand but I have no idea how to use it. Thanks.
});
chrome.contextMenus.create({
title:"hi",
onclick:copy,
contexts:["editable"]
});
chrome.contextMenus.create({
title:"bye",
onclick:copy,
contexts:["editable"]
});
function copy(info) {
};
There is an api called document.execCommand() like what you mentioned. Its as simple as the code below:
var copyText = document.execCommand('copy');
Basically it will copy any text selection in the browser. Therefore it is not applicable with what you wanted to achieve.
Lastly, to change the value of any element in a webpage, you must have enough knowledge about content scripts. Basically these are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM).

How to force "selected" attribute for variation options in Woocommerce?

I'm developing a Woocommerce theme for one of my clients.
For this project, I needed to clone the cart form (on product pages) in order to display it in another place on the page.
I managed to do this with this piece of code :
$(document).on( 'found_variation', 'form.cart', function( event, variation ) { // found_variation // woocommerce_variation_select_change
$('.fixed-price-right').empty();
$(this).clone().appendTo( '.fixed-price-right' ).each(function() {
$('.product-fixi').scrollToFixed();
});
});
First, on each variation changes, I empty the div in which the form clone will be displayed.
Then, I clone it and made the container div fixed.
The problem is that I get everything except the selected variation value.
Actually, the default selected value got this attribute : selected="selected". But this attribute is not applied to other options.
You can see a living example here: http://www.pro4mance.com.au/product/produrance-energy-gels-2/
If I submit from the cloned form, the product is added but without option.
The weird thing is that if I add manually (from web console) this attr in the right option of the cloned form and then add the product to the cart, the product is added with all the good options.
I don't really know how to force the adding of selected="selected" on each change. Can someone please help me to manage it?
Thanks everyone!
For everyone who need to force the adding of the "selected" attribute on Woocommerce option variables, here's how I did it (using jQuery):
$('form.cart').on( 'change', '.variations select', function( event ) {
$val=$(this).val();
$(this).children('option').each(function(){
$childVal = $(this).val();
if ( $childVal == $val ) {
$(this).attr('selected', 'selected');
} else {
$(this).removeAttr('selected');
}
});
});
Feel free to improve it (that's maybe not the best way to do it).
I think you are going to have to look at the file cart.php within the WooCommerce templates folder. Use that to create your own custom cart file. Just run the loop a second time to get EXACTLY what you want, delivered directly from the server. ref: WordPress -- "the Loop" The actual line of code you are interested in is foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { For the WooCommerce cart, that's the top of the "loop". Add that line again, with your own customization to match your desired second copy of the contents of the shopping cart...
I'd recommend leaving jQuery out of it...
You obviously don't want to append directly within the WooCommerce package (in case of future updates)... (updates here!)
Wow, that seems very easy...
WooCommerce (and almost all add-ons) provides a templating system.
This means that every element displayed on a WooCommerce page can be
overridden.
This system’s advantage is that you can modify the display of an
element without editing WooCommerce core files (which is absolutely
NOT recommended, if you do so, all your modifications will be lost at
the next WooCommerce update, so just don’t do it). All templates are
located in a woocommerce/templates folder. As explained in our
documentation, all you have to do is to create a woocommerce folder
within your theme’s directory, and in this folder duplicate the files
you’d like to override. Please note that we strongly recommend using a
child theme in order not to lose any modifications during your theme
update.

how to pass arguments into an event handler to make it unique?

please run this jsfiddle as an example.
http://jsfiddle.net/AFzqt/11/
in my example, i have a link saying same as above, if you fill out the first box it will copy the value in the second box. look at the code, and look at the display. theres a reiteration of the code just to have the boxes appear twice. well... in my real use of this, i ideally want there to be about 40 of these buttons.
is there a way to do this without copying the code 40 times?
i am new to jquery, usually in another language i would just pass in arguments, but with this syntax I don't see how i can do that? how can i handle this?
feel free to dabble around on my jsfiddle, and hopefully link a new revision, with the goal of reducing the handling of those 2 'same as above' buttons into just one function with the entry id's as parameters
If you add the changeButton class to each of the buttons it will be easier to select each of them to bind the event handler:
Same as Above
Then we can select each of the elements like so:
$(".changeButton").on("click", function(e) {
//select the previous jQuery Mobile select widgets, we will use just the previous two
var $allPrev = $(this).prevAll('.ui-select').find('select');
//change the value of the immediate previous select widget to the value of the one preceding it
$($allPrev[0]).val($($allPrev[1]).val()).selectmenu("refresh");
e.preventDefault();
});
Here is a demo: http://jsfiddle.net/AFzqt/12/
This code will work for umpteen buttons since it works by using intuitive knowledge of the HTML structure (each link uses the previous two select widgets, no matter where on the page the link resides).
What about something like this?
function bind_click(button_id, target_id, origin_id) {
$(button_id).on("click", function(e) {
$(target_id).val($(origin_id).val());
$(target_id).selectmenu("refresh");
e.preventDefault();
});
}
$(function() {
bind_click("#changeButton2", "#entry_20", "#entry_18");
bind_click("#another", "#entry", "#entry2");
// More binding declarations
});

editable datagrid with ability to clone individual rows

Im looking for a way to render an html table as an editable datgrid, with the ability to clone individual rows. I dont need to save any of the changes made, just superficially edit the cells because i then use a jquery plugin to scrape the table as is on screen and save it.
Ive tried jeditable, but its designed for posting the output of its edits to a page, not just superficially making the changes.
Ideally, i could control what types of inputs are displayed onclick based on what column they are on. The table cells are unnamed. If they need to be named, there are a total of 34 columns, so i would need to know how to name those individually.
Thanks in advance.
Jeditable's target can be a function (see the "Submitting to function instead of URL" section of the jeditable homepage) - you could pass an empty handler and use it.
[Edit]
The handler should return a string (that will be displayed on the page)
(taken from the example page)
$('#test').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : 'OK',
});
It work nicely, I just tried it out.
[/Edit]

Categories