I'm using tiny mce and want in the insert image dialog a button to a special page
just behind the source input a simple link to a different page that opens in a new browser window. how can I achieve that?
TinyMCE has an init options called file_browser_callback and file_picker_callback that allow you to add your own file browsing functionality to the insert dialogs:
https://www.tinymce.com/docs/configure/file-image-upload/#file_browser_callback
https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback
https://www.tinymce.com/docs/configure/file-image-upload/
So for example, you could do the following in your init:
tinymce.init({
file_picker_callback: function(callback, value, meta) {
imageFilePicker(callback, value, meta);
}
});
Then the imageFilePicker function would just call out to a function that does the real work of opening a window to do the selection:
var imageFilePicker = function (callback, value, meta) {
tinymce.activeEditor.windowManager.open({
title: 'File and Image Picker',
url: '/myapp/getfilesandimages',
width: 700,
height: 600,
buttons: [{
text: 'Insert',
onclick: function () {
//do some work to select an item and insert it into TinyMCE
tinymce.activeEditor.windowManager.close();
}
},
{
text: 'Close',
onclick: 'close'
}],
},
{
oninsert: function (url) {
callback(url);
}
});
};
Eighter create your own plugin using a copy of the tinymce core plugin OR add it to the DOM after the dialogue has been created.
Related
I have a DataTable and I am loading it using Angular Js, I have Created a directive and wrapped my DataTable in this directive, A common approach of wraping JQuery Plugin in Directive so that it can live in Angular Digest Cycle.
But the ng-click that is on button and coming from render Function of column in datatable is not clickable (Not Working, Angular did not compiled it). Is there any way to make it Clickable. I know the approach in which we use {{}} with ng-repeatto populate data in datatable. I'm looking a directive way, so you can tell me what is stoping ng-click from working or how to make my directive right! Please stick with directive approach. Code is following.
App.directive('jqtable', function () {
return {
restrict: 'E, A, C',
link: function (scope, element, attrs, controller) {
var dataTable = element.dataTable(scope.options);
scope.$watch('options.data', handleModelUpdates, true);
function handleModelUpdates(newData) {
var data = newData || null;
if (data) {
dataTable.fnClearTable();
dataTable.fnAddData(data);
}
}
},
scope: {
options: "="
}
};
});
And here is my Controller:-
$scope.options = {
aoColumnDefs: [{
"bSortable": true,
"aTargets": [ 1],
"render": function ( data, type, full, meta ) {
if(meta.col==1){
return data+" <a class='btn btn-sm btn-default' ng-click='showalert()' >Click me </a>"
}
}
}],
bJQueryUI: true,
bDestroy: true,
data:$scope.data
};
$scope.showalert=()=>
{
alert("Angular Compiled the Html");
}
Angular does not know you have injected elements to the DOM. You must $compile each row. You can do that in rowCallback. Since DataTables may inject new rows when the table is filtered, sorted or upon page change, you can add a compiled flag to prevent rows from being $compiled multiple times :
$scope.options = {
rowCallback: function(row) {
if (!row.compiled) {
$compile(angular.element(row))($scope);
row.compiled = true;
}
}
...
}
see http://next.plnkr.co/edit/KxwqSVXIogtXYx4I
I have a chrome extension that works perfectly when I'm using it in one tab. Then I go to another tab and extension still works, but here's the strange thing that I can't understand. When I come back to first tab and I click on browser action to show the extension or close (if I left it open), nothing happens. I need to click browser action second time and then extension starts working.
Part of my background.js where the browser action button is defined:
chrome.browserAction.onClicked.addListener(function (tab) {
if (page_loaded == true) {
chrome.tabs.query({ active: true, currentWindow: true, highlighted: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { greeting: "browser_action_clicked" }, function (response) {
if (response.found == 'N') {
chrome.tabs.executeScript(null, { file: "src/injection.js" }, function () {
chrome.tabs.executeScript(null, { file: "src/extension.js" }, function () {
chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '0px' }, 'slow');" }, function () {
sidebarActive = true;
});
});
});
}
else {
if (sidebarActive == true) {
chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '-370px' }, 'slow');" }, function () {
sidebarActive = false;
});
}
else {
chrome.tabs.executeScript(tab.id, { code: "$('.cheap-watcher' ).animate({ 'right': '0px' }, 'slow');" }, function () {
sidebarActive = true;
});
}
}
});
});
}
});
Did I wrote something wrong? Or is it chrome bug?
Your sidebarActive is stored as a global state variable (and same with page_loaded). So here's what you have as an example:
You click the button on your first tab; sidebar is shown, sidebarActive is set to true.
You do something with the second tab that results, eventually, in sidebarActive being false - no longer reflecting the state of the old tab.
You click the button on your first tab; since sidebarActive is false, you attempt to show the sidebar; however, it is already shown, so it gives an impression of doing "nothing".
However, now sidebarActive is actually in sync with the tab, so subsequent clicks "work".
This will not work at all, since the state is really per-tab. You have to either:
Save the state in the content script, not the background script, or
Save the state per-tab, e.g. as an array indexed by tab IDs: sidebarActive[tab.id]
In this case, you may still need to do some cleanup on the array when tab updates happen.
am new in creating chrome extensions, I'm developing an extension page action it works in certain urls, I would like to put different text in the popup for each url, i can do it? please help me.
My background.js is thus
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (~tab.url.indexOf('url1.com.br')) {
chrome.pageAction.show(tabId);
}
if (~tab.url.indexOf('url2.com.br')) {
chrome.pageAction.show(tabId);
}
});
OK. First of all, to show page_action icon on specific URLs you can use declarative content.
// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page's on a specific URL
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'url1.com.br' },
}),
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'url2.com.br' }
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
Don't forget adding a permission for declarative content in manifest.json. Another thing is different texts for different urls.
popup.js
chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
var dynamicText = "You are here;"+ tabs[0].url;
document.getElementById("textbox").value = dynamicText ;
});
This sample gets the currentWindow's URL and insert it into the element that has textbox id. I hope samples are enough to solve the problem.
I am unable to view the HTML content of web pages when I view source in Google Chrome's dev tools. For example, if I view the source of https://stackoverflow.com/help, the only content I can see is as follows.
<script>
$('#herobox li').click(function () {
StackExchange.using("gps", function () {
StackExchange.gps.track("aboutpage.click", { aboutclick_location: "hero" }, true);
});
window.location.href = '/about';
});
$('#tell-me-more').click(function () {
StackExchange.using("gps", function () {
StackExchange.gps.track("aboutpage.click", { aboutclick_location: "hero" }, true);
});
});
$('#herobox #close').click(function () {
StackExchange.using("gps", function () {
StackExchange.gps.track("hero.action", { hero_action_type: "minimize" }, true);
});
$.cookie("hero", "mini", { path: "/" });
$.ajax({
url: "/hero-mini",
success: function (data) {
$("#herobox").fadeOut("fast", function () {
$("#herobox").replaceWith(data);
$("#herobox-mini").fadeIn("fast");
});
}
});
return false;
});
</script>
I'm not sure if I've inadvertently changed a setting in Chrome, but any help would be greatly appreciated.
I'm using chrome Version 29.0.1547.76.
I have disabled all extensions.
I tried this using a new profile with the same effect.
I'm not behind a proxy.
If you open the DevTools after loading the page, the content of the items listed on the Resources tab may not be populated. This is also true of network requests on the Network tab. To see the fully populated resources on the Resources tab, first open the DevTools, then refresh the page, or navigate to the desired page with the DevTools open. Now select the html resource and it should be populated.
I am newbie to Sencha. Can anyone please explain how to support back button in android using Sencha touch2 Routing. I have gone through Sencha document, they explained there with senarios like "#products/123". But in my case only views get changed not url which is always like "../index.html".
Lets consider i have one login page. On login button tap it navigates to Home page. Now on device back button tap it should navigate back to login. So what format should i put inside route:{}.
Please anyone explain me with simple code.
Thanks in advance.
in your button actions you should redirect like this:
control: {
'button[action=login]' : {
tap: function() {
this.redirectTo('login');
}
}
Then add the route in your controller:
config: {
refs: {
main: 'main'
},
routes: {
'login': 'showLogin'
}
}
and finally in the showDetail function you make the view change, the url should show something like index.html#detail:
showLogin: function() {
this.getMain().push({
xtype: 'loginView'
});
}
I hope this helps!
After doing lot of Google search finally got the answer with proper example. So this is for reference http://thanksmister.com/?p_=336
You can also give yourself better control by defining the Back Button, as well as its references, instead of using the default.
Ext.define('Mov.view.BackButton', {
extend: 'Ext.Button',
alias: 'widget.backbutton',
config: {
hidden: true,
id: 'back',
ui: 'back',
text: 'Back',
backStack: {
}
},
addToBackStack: function(dispatchOptions) {
var found = false;
this.backStack.forEach(function(el) {
found = found || (Ext.encode(el) == Ext.encode(dispatchOptions));
});
if (!found) {
this.backStack.push(dispatchOptions);
}
this.show();
},
clearBackStack: function() {
this.backStack = [];
this.hide();
},
handler: function(button, event) {
var dispatchOptions = this.backStack.pop();
Ext.dispatch(dispatchOptions);
if(this.backStack.length === 0) {
this.hide();
}
}
});
Then on your app's navigation bar, you apply this widget. (onInitialize of initial view works well).
nav = this.getNavigationBar(),
nav.setBackButton(Ext.widget('backbutton'));
#jurodr has a nice example for routing, reference and control, which works well with this custom component.