I'm trying to build a custom plugin based on a stock TinyMCE 4 image plugin. It'll have two drop-downs. When user clicks the first one - I'd like to hide the second one (css style display: none;).
Here is a bit of code that adds drop-downs in the initializer:
targetTest1ListCtrl = {
name: 'test1',
type: 'listbox',
label: 'Test1',
values: buildValues('target_list', 'target', InputDataArray),
onClick: function(e) {
//code I'm looking for
},
};
generalFormItems.push(targetTest1ListCtrl);
targetTest2ListCtrl = {
name: 'test2',
type: 'listbox',
label: 'Test2',
values: buildValues('target_list', 'target', InputDataArray2)
};
generalFormItems.push(targetTest2ListCtrl);
Both drop-downs generate just fine, if I put alert in my onclick event - it's triggered perfectly fine, but in no way I can find how to access my test2 through the TinyMCE and change styling on it.
Found an answer:
sampleElement = win.find('#test2')[0];
sampleElement.hide();
Where #test2 is #+name of your Ctrl.
Related
I come from a low-level programming background, so JS and NodeJS are a new realm for me.
I am trying to create an application that begins by displaying a CLI menu to the user. Upon the user selecting a menu option, a corresponding functionality will be carried out. Once that functionality completes, I want the menu to be re-displayed.
A very simple way of handling this in Python and embedded C is to enclose the menu in a while(1) loop and then terminate the program/script process when the user selects the corresponding menu option. However, in NodeJS, you cannot run a menu in a while(1) loop -- the functions called corresponding to each menu option never actually get called and the menu simply re-displays immediately.
In other words, what is the NodeJS equivalent of:
while(1) {
displayMenuToUser();
// Wait for user to select which menu option they want
if (quitMenuOptionSelectedByUser) {
terminateProcess();
} else {
executeFunctionCorrespondingToTheSelectedMenuOption();
// At this point the menu should be re-displayed so the user can select another option
}
}
You can use Inquirer.js
I made this example which keeps looping if you answer yes on the Go again? question:
var inquirer = require('inquirer');
const showMenu = () => {
inquirer
.prompt([{
name: 'age',
type: 'input',
message: 'What\'s your age?',
}, {
name: 'country',
type: 'list',
message: 'Where do you live?',
choices: ['USA', 'China', 'Germany', 'France'],
}, {
name: 'back',
type: 'input',
message: 'Go again?',
choices: ['yes', 'no'],
}]
).then((answers) => {
console.log(`\nMy age is ${answers.age} and I live in ${answers.country}.\n`);
if (answers.back === 'yes') {
return showMenu();
}
})
.catch((err) => {
console.log(err);
});
}
showMenu();
I'm tying to add code into a tinymce textarea and I'm planning to hightlight it using highlight.js
In order to to so, I just need to wrap the code between the tags <pre></pre> and highlight.js will do the rest.
I tried using the code plugin in tinymce, which opens a popup where the user can paste the code. But to my surprise it does actually nothing with that text. It only allows you to see the HTML code for it, which will basically just show the text between </p> tags.
I would prefer not to use codesample plugin because I just want to add the pre tag and do not apply any codesample styles to it. I do not want either to have a list of languages to select from or to treat the whole code text as a block that has to be removed in a whole.
Any ideas of how to do this?
If I understand your question you want a dialog where someone can paste in some HTML and you will wrap that in <pre> and </pre> tags as you insert the content into the editor.
There is not a plugin in TinyMCE that does precisely what you want. You are correct that the codesample plugin is more complex than that (it uses something called Prism.js to handle syntax coloring and highlighting).
You can do one of two things:
Look at how plugins like codesample and template create their dialogs (they use windowManager) and then you could make your own plugin that takes the user's input and wraps it in <pre> and </pre> tags as its inserted into the editor.
Add a toolbar button or menu item via the TinyMCE init and have that code open a dialog (via windowManager) and insert the content into the editor.
If you prefer the first option, using one of TinyMCE's existing templates as a starting point will save you a bit of coding time and show you a good example of how to use windowManager.
Here is an overly simply example of how you might use windowManager in the init:
tinymce.init({
...
setup: function (editor) {
editor.addButton('insertusername', {
text: 'Insert User Name',
icon: false,
onclick: function () {
var person = {
firstname: '',
lastname: ''
};
editor.windowManager.open({
title: 'Insert User Name - Custom Dialog',
body: [
{
type: 'textbox',
name: 'firstname',
label: 'First Name:',
value: '',
minWidth: 800,
value: person.firstname,
oninput: function() {
person.firstname = this.value();
}
},
{
type: 'textbox',
name: 'lastname',
label: 'Last Name',
value: '',
minWidth: 800,
value: person.lastname,
oninput: function() {
person.lastname = this.value();
}
}
],
onsubmit: function(e) {
// console.log('onSubmit called');
editor.insertContent('<span class="abc">'+ person.firstname + ' ' + person.lastname + '</span> ');
}
});
}
}
}
...
});
I'm using TinyMce Style Formats to add custom formats to the ""Formats" dropdown.
The problem is that I have too many styles to add, and I would like to use another "Formats" dropdown, separated from the first one. I know I can nest formats but it's not enough, I want to add two different Dropdown, how can I do it?
Have a look at the style plugin in tinymce3 (in tinymce4 it is part of the tinymce core). You may copy that plugin rename it and configure it to your needs. Then you need to add the plugin to your plugin list and the tinymce button to your button list.
This is best done adding formats to the formatter programmatically and then adding a menu item and trigger the formatter
editor.on( 'Init', function( e ) {
editor.formatter.register(
'page-title',
{ 'selector': 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li',wrapper: false, classes : ['giga', 'primary-font'] }
);
} );
editor.addButton( 'typography', {
text: 'Typography',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Page Title',
menu: [
{
text: '(Giga) 88 Clan pro thin #000000',
onclick: function() {
editor.formatter.toggle( 'page-title' );
}
},
]
},
]
});
I have an onyx.Picker which before selection displays a "Click to Select" button prompting the user for action. As is the expected behavior, once the user picks an option, they can not revert back to the "Click to Select" display. However, I need to be able to programmatically reset the form, in which case, the picker should once again revert to it's original state.
I have figured out that I can remove the picked option by calling this.$.PickerName.setSelected(null) However, the UI does not revert back to the "Click to Select" display as would be expected. How can I reset the picker completely?
Fiddle : http://jsfiddle.net/trex005/2amLu1r4/
As far as i am aware, setSelected() on the picker expects you to pass it a reference to the control (picker's clientControls) which you want to set dynamically ,so passing null will do nothing. Once an item is selected, the list of items closes, but the item stays selected and the pickerButton displays the choice that was made. So, all you have to do is this. this.$.pickerButton.setContent('Click to Select'); which will reset the pickerButton content.
http://jsfiddle.net/scrs3Le5/1/
enyo.create({
components: [{
kind: "onyx.PickerDecorator",
name: "DecoratorName",
components: [{
name:'pickerButton',
style: 'min-height:2.5rem;min-width:330px;',
content: "Click to Select"
}, {
kind: 'onyx.Picker',
name: 'PickerName',
components: [
{content: "Is broken"},
{content: "Is not cool"},
{content: "Is very very very very very very very cool!"}
]
}]
}, {
kind: 'Button',
ontap: 'ResetPicker',
content: 'ResetPicker'
}],
ResetPicker: function () {
//this.$.PickerName.setSelected(null);
this.$.pickerButton.setContent('Click to Select');
},
rendered: function () {
this.inherited(arguments);
}
}).renderInto(document.body);
Hope that helps!
I would like to create two tabs in a Jsp page using YUI 3 (Yahoo UI3).
For Example:
Tab1 Tab2
Tab1:
I am able to create Tab1 using the below java script.
createCustomTabSafari = function(lblTxt,eId){
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({
children: [{
label: lblTxt,
content: document.getElementById(eId)
}]
});
tabview.render('#demo');
tabview.selectChild(0);
});
}
Now I want to add Tab2 with some static text like label: 'Tab2', content: 'test'. I have tried with createCustomTabSafari ('Tab2','test') but it is created a tab at some other location instead of creating besides the Tab1.
How to use addChilld()/add() method to add the second tab as a child instead of a brand new tab.
I have gone through the YUI API and could see addChild(child, index) method but not sure how to use this method in this scenaenter code hererio.
Also, How to read the tabs that are created that is if I know tab1 is clicked I will display something and if Tab2 is clicked I will display something different.
It would be helpful if I get to know something on adding a second tab next to the Tab1.
Thanks in Advance.
The examples on the YUI website do a really good job of showing how to use the Tabview. You can see this example which has multiple tabs: http://yuilibrary.com/yui/docs/tabview/tabview-fromjs.html
YUI().use('tabview', function(Y) {
var tabview = new Y.TabView({
children: [{
label: 'foo',
content: '<p>foo content</p>'
}, {
label: 'bar',
content: '<p>bar content</p>'
}, {
label: 'baz',
content: '<p>baz content</p>'
}]
});
tabview.render('#demo');
tabview.selectChild(2);
});
And for adding and removing tabs, a rather complex example: http://yuilibrary.com/yui/docs/tabview/tabview-add-remove.html