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.
Related
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.
Im builing an office app that will run inside Microsoft Word. I'm using office.js create it.
So far I have been able to insert text into the document using the API, but the text it inserts, appears selected, making the app UX suffer since the user has to make one extra click to lose focus to insert another text without replacing the inserted one.
Here is how the code looks like:
function insertEquation()
{
Office.context.document.setSelectedDataAsync("`x = (-b +-sqrt(b^2-4ac))/(2a)`", { coercionType: 'text' });
}
I just want the text not to appear selected.
Thanks in advance.
To insert some text in the document I would insert a Paragraph like so:
function insertText(text) {
Word.run(function (context) {
context.document.body.insertParagraph(text, Word.InsertLocation.start);
});
}
In Typeahead JS I'm trying to add an option that appears at the bottom of the dropdown after the user has started typing. Currently I'm using the 'onOpened' Custom Event to trigger adding some HTML after the 'tt-dropdown-menu' element is initialised.
.on('typeahead:opened', onOpened)
function onOpened($e) {
$('.tt-dropdown-menu').html( "Add Option" );
}
The problem is that the jQuery HTML is added when the dropdown is initialised, as expected, then when the user starts typing the new dataset element with the autocomplete results in is added below that jQuery HTML so the jQuery HTML can never appear at the bottom of the dropdown. You can't append the jQuery HTML to the dataset either as that element doesn't exist when the dropdown is initialised.
Is there an easier way around this? The other Custom Events don't seem to cover this scenario.
If you only have one dataset, you can do as I do: add a footer to the dataset, and add it as a DOM element, not plain HTML string. You can then change it at will (say on any event you wish) and your changes are reflected in the dropdown.
Example:
$('#myinput').typeahead({
// rest of your regular stuff, like 'name', 'remote', etc.
footer: $('#dropdown-footer'),
});
... where dropdown-footer is the ID of a div you have somewhere in your dom. You can then do things like:
$('#dropdown-footer').html('Hello')
Here is my issue :
I have a custom button with a code onClick. This code modify the selection's parent node, and I would like that my selection stays the same after my code, but tinyMCE disable my selection and give me a caret instead.
I tried getRng() and setRng from tinyMCE API but without success, the results are pretty odd. Sometimes it works and sometimes it deactivate my selection and give me a caret instead. Plus, sometimes it works only 2 times and then my button does not respond.
Here is my code which does not work:
onclick : function() {
range_selection = tinymce.activeEditor.selection.getRng();
//Here is my own code which modify my parent node
tinymce.activeEditor.selection.setRng(range_selection);
}
Problem here is that this range is probably not applicable anymore because of a changed DOm structure. I would use a bookmark to overcome this issue:
var bookmark = ed.selection.getBookmark();
// do what you like to do here
ed.selection.`moveToBookmark`(bookmark);
I have the following code, I want a user to be able to copy or paste into a text field,
basically imitating a ctrl+c or ctrl+v
My problems are:
how to make sure the context menu only appears in text fields
how to paste the text into the region.
I have been through the docs and so far I have this NOT working:
var menu = Ti.UI.createMenu();
menu.addItem('Copy', function() {
var data =$.("#this").val()
Ti.UI.Clipboard.getData('text/plain',data);
});
menu.addItem('Paste', function() {
var data =Ti.UI.Clipboard.getData('text/plain');
$.("#this").val(data)
});
function showrightmenu(){ Ti.UI.getCurrentWindow().setContextMenu(menu);}
I could call this using oncontextmenu= "showrightmenu()" but now, how to paste something in this line:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
AM GROPING IN THE DARK. I'm a newbie to TideSDK, this is my first project.
Question 1
I'm new to TideSDK as well and might be wrong, but as far as I can tell from the API documentation, context menus are bound to a window, and displaying different context menus when right clicking different parts of the window would require you to each time change the window's context menu...
Example:
//Create different menus
var context_menu = Ti.UI.createMenu();
var copy_menu = Ti.UI.createMenu();
//Add menu items etc.
...
//Change context menus on click events depending on clicked element
$('#some-element').mousedown(function(event){
if(event.which==3){//detect right click
editor_window.setContextMenu(context_menu);
}
});
$('#text-field').mousedown(function(event){
if(event.which==3){//detext right click
editor_window.setContextMenu(copy_menu);
}
});
This way, when you click the element with id some-element, the first context menu is shown, and when you click the #text-field element, the second context menu is shown.
Note that this won't work if one element is inside the other, because then both events are fired.
Question 2
In this code you supplied:
$.(#this).val(Ti.UI.Clipboard.setData('text/plain'))
You want to use Ti.UI.Clipboard.getData and not Ti.UI.Clipboard.setData, since you want to get the text stored in the clipboard and then put it into the text field. Also, you might want to change $.(#this) to $("#this") or $(this).
This should work:
$("#some-element").val(Ti.UI.Clipboard.getData('text/plain'))
Remark
You seem to be confused about how to use jQuery. To select an element, you use $() and not $.(). Also, with $("#example") you select the DOM element with the id example. $(this) is used inside a function called when an event is fired, and refers to the element on which the event was fired. $("#this") is not the same as $(this). Hope that helps a bit...