tinymce text area onclick event change check box value - editor

i am using tinymce editor for my form.
i have three instance of tiny mce editor for three text area.
on click a particular textarea i want to select a check box option .
first time i am using tinymce editor .
how can i select check for onclick of textarea.

The TinyMCE object exposes an onClick member you can bind a function to as follows:
//ed as your tiny-mce variable
ed.onClick.add(function(){
//Toggle checkbox here
});

You need to place this code into your plugins init-function. It adds an onclick handler:
// ed is the editor instance
ed.onNodeChange.add(function(ed){
// here you need to run the code to activate your checkbox
});

Related

Need to create select2 drop-down when click on text box

i have a requirement that when i click on input type text box then select2 drop-down will automatically upon textbox and another text box will be automatically created down the select2 drop-down.
Maybe below link useful for you example
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
Also visit url for see all examples select 2 examples

Style a firemonkey combobox component

Trying to get a new style on a ComboBox in FireMonkey (XE2).
But for some odd reason I cannot get the text of a ListBoxItem to show.
What I've tried is the following.
Create a new FireMonkey HD Application.
On the form I've added a ComboBox.
Right click on the ComboBox and select 'Edit custom style'
There I've added the following components
while the original one consist out of the following components
Now it seems to me that I need the TContent object (but I can't seem to find it in the toolpallete)
How can i bind my Text object to the strings that are placed in my ComboBox?
Any pointers are very welcome.
FireMonkey doesn't use a TText object to display the text. Instead it creates a copy of the list box item within the TContent (if I remember correctly).
As you've worked out you need to add a TContent to your form. The easy way to do this is to
go back to the form,
right click and select View as Text
Find the TStyleBook object and add a TContent at the appropriate point (the format for this should be obvious from the rest of the file).
No need to add any properties - defaults will be used the first time.
Right click, View as Form.
Go back into the style editor and edit away.

onclick attribute not working inside of jquery-ui dialog

I know I shouldn't be using "onclick" with jQuery. The reason I am using it anyway is that there is pre-existing code where a button has an onclick attribute that opens a pop-up window. I'm creating a new button inside of a jquery dialog that needs to open the same target. It's just easier (I think?) to copy the original button's onclick attribute rather than trying to get the URL out of it and using a better handler.
$insert = $(data).find('.button.compare:first'); // find the button in $(data). This already works.
$("#dialog").html('<button type="button" title="View List" class="button compare" onclick="' + $insert.clone().prop('onclick') + '")><span>View List</span></button>'); // get the onclick property - seems to work but button does nothing
$insert is a copy of the button. I actually insert that copy later in the page and it works fine there. But the new button I create inside the jQuery-ui dialog does not work. It doesn't open a new window.
EDIT:
I just noticed that there is a difference between the original onclick attribute and the copied one. The original looks something like:
`onclick="popwin(....)"
And the copy adds some stuff to look like:
onclick="function onclick(event) { popwin(...)"
Why is this?
I managed to solve this myself by changing
$insert.clone().prop('onclick')
to
$insert.clone().attr('onclick')
Though I'm not sure why there is a difference here.

angularjs same textarea to edit multiple elements

I have this case where I set a current item from a list and I need to use a textarea to edit that element's value.
Because of some constraints I have to use a keyup event but I don't think that's a problem.
Check this fiddle: http://jsfiddle.net/terebentina/Euj2C/
click on first/second buttons - it works, it changes the text in the textarea to the value of each element.
change the text in the textarea to something
click on the first/second buttons again - the textarea is not updated anymore. If you look in console, you can see that it switches between the elements, it's just that the textarea is not updated anymore.
Any suggestions? this is driving me nuts!
I know there is a better way modifying your directive to do this but as a quick fix for now you can try binding your textarea to a ngModel value that is just a copy of the current text in the selected element:
<textarea keyup="" ng-model="keyupText"></textarea>
With this in as your current function:
$scope.current = function(idx) {
$scope.current_element = $scope.elements[idx];
$scope.keyupText = $scope.current_element.value;
console.log('current is', $scope.current_element.value);
}
See this fiddle for an example.

How to show TinyMCE editor in jquery modal window on click

I have made a blog application where I have this form for writing the blog. It has a title field, an instance of of tinymce editor for the blog body, a text field for adding tags and the submit button.
What I want to do is to by default show the whole form to the user when the page loads. The user can fill in the title. Now when the user comes on the text-editor, there will be a button on clicking which only the text editor will open in the modal window and the user can type in that.
Once the user clicks on the cross, then the text is copied to the underlying text editor. I am not that good at javascript and I have looked a few blogs, but that didn't help. Any directions will be really appreciated. I am adding a snapshot of how the blog page looks like.
You need to start off by initializing your TinyMCE editor with something like this (add in any options you want):
$(function() {
tinyMCE.init({
mode: "none",
theme: "simple",
});
//whatever code
});
You can set up any mode you like but I'm going to go with dynamic creation (mode: none) because it gives you more control. Initialize your modal in "whatever code" then create your editor inside the modal with the code below:
tinyMCE.execCommand('mceAddControl', false, 'id_of_textarea');
To get/set the content of your editor you would do this:
tinyMCE.activeEditor.getContent();
tinyMCE.activeEditor.setContent('data in here');
You'll need to close your tinyMCE editor before you close your modal or it will fail to load next time the modal opens. To close it you need to execute the following code:
tinyMCE.execCommand('mceRemoveControl', false, 'id_of_textarea');

Resources