I am trying to migrate from tinymce version 4.1.9 to latest tinymce version 4.3.12. I have a custom button which fires an event and simultaneously toggle (change the image of the button). It works fine with earlier versions of tinymce (all versions of 3.x and 4.1.2) but now giving an error message in tinymce 4.3.12.
Error message is: Uncaught TypeError: self.addClass is not a function in chrome debug console.
I have checked the latest documentation and which clearly shows .addClass is part of the library (tinymce.dom.DOMUtils class).
See below part of the code I am using:
tinymce.init({
setup: function (ed) {
ed.addButton('autosave', {
image: '/images/autosave_disk_off.png',
cmd: 'autosave',
selectable: true,
onClick: toggleAutoSave,
onPostRender: function() {
var self = this;
self.addClass('classAutosave');
ed.on('autosaveStateChanged', function(e) {
self.active(e.state);
});
}});
}
});
I want to add a class to current element so that image switching can be done.
Can someone help to understand the reason why this code is not working in tinymce 4.3.12?
Is there alternate way to add class in onPostRender?
Thanks
I sort of figured out the reason, what I have done is that compared the code of tinymce.js version 3.1.10 and tinymce.js version 3.2.0. I chose 3.1.10 because this is the last version in which my addClass() works. This is breaking in and after from 3.2.0.
While comparing, I found a lot of code changes has been done for addClass() and removeClass() API's. I also found that internally tinymce is using self.classes.add('classAutosave') to add new class. So I tried the same way in my plug-in and it works. So far, I haven't found any documentation mentioning this change. I am still checking in tinymce forums probably I will open a ticket with tinymce dev. Will update answer if any new info arrives.
Observation:
Use self.classes.add('classAutosave') instead of self.addclass('classAutosave')for adding new class with tinymce 3.20 -> tinymce 4.3.12.
Related
I am integrating TinyMCE in my CMS and want to have a feature to choose a video/audio by selecting media icon instead of typing the path in Source field.
[https://i.stack.imgur.com/1zmlD.png]
I was able to achieve this for choosing images through image_list
but, did not have luck using external_media_list_url
You are referencing documentation for TinyMCE 3.x which is no longer being updated. Your screenshot appears to be TinyMCE 4.x so you should look at the documentation for that release:
https://www.tinymce.com/docs/
There are APIs to create your own file picker for TinyMCE 4:
https://www.tinymce.com/docs/configure/file-image-upload/#file_picker_callback
...and example of that is here:
https://www.tinymce.com/docs/demo/file-picker/
I am trying to implement image zooming for image in Ionic app.
It has been implemented here
and works flawlessly on the original project created with Ionic V 1.0.0 but doesn't seem to work all that good in Ionic V 1.3.0.
On V 1.1.0 this
($ionicScrollDelegate.$getByHandle('scrollHandle' +
slide).getScrollPosition())
logs a json like this
{"left":0,"top":0,"zoom":1}
But in V 1.3.0 it logs it as
undefined
Also on chrome it shows warning like this:
Delegate for handle "scrollHandle0" could not find a corresponding
element with delegate-handle="scrollHandle0"! getScrollPosition() was
not called! Possible cause: If you are calling getScrollPosition()
immediately, and your element with delegate-handle="scrollHandle0" is
a child of your controller, then your element may not be compiled yet.
Put a $timeout around your call to getScrollPosition() and try again.
This is still working on devices (tested both on iOS and Android) but not smooth at all. It is very laggy.
Any thoughts or workarounds?
So the issue had nothing to do with Ionic version which I realised after more debugging. It was due to
delegate-handle="scrollHandle{{$index}}"
In my usecase I was not using ng-repeat so was using
delegate-handle="scrollHandle"
But this was not working and causing the above mentioned issues. So fix was to add 0 as index with it. In my case this solved it.
delegate-handle="scrollHandle0"
In other cases use case may be different so but if using ng-repeat this would work
delegate-handle="scrollHandle{{$index}}"
and if not this should do the trick
delegate-handle="scrollHandle0"
I have implemented Barcode Scanner for my Ionic project for both iOS and Android.
But when my Scanner starts, I want to add a button inside the view and add an event to it.
I am using phonegap-plugin-barcodescanner plugin
Please help me with how to append something inside the scanning view.
If you want to add stuff to the layout of your scanner, you need to write code in the plugin itself.
YOU CANNOT INTERACT DIRECTLY WITH THE SCANNER FROM THE JS.
In fact, the plugin you use uses cordova.exec in order to launch the scanner view by passing it arguments.
For Android, you just have to know Java and some XML.
For iOS, you have to know Objective-C / Swift.
For Android, you may have 4 files to modify :
plugin.xml : home of all you dependencies
Your_Activity.java : java file which permits to interact with the scanner view itself by calling buttons, textviews, layouts, etc...
Your_Main.java : java file which gets and returns parameters from the js file of your plugin
Your_Layout.xml : xml file in res/layout which is composed of xml attributes interpreted by java
Beside that, I found two good plug-ins for cordova/ionic apps from GitHub :
phonegap/phonegap-plugin-barcodescanner
tjwoon/csZBar
And there's the expensive one, Scandit, which resolves all of your problems for about 200$ per month, check the pricing for every solution they propose.
If you use their SDK, you may be able to interact with the scanner view from js files because of their work, but they're the only company I know to do that. (perhaps ManateeWorks...)
Under this part is what I've been doing since mid-July, in order to give you ideas.
I'm currently making an ANDROID scanner layout for my ionic app.
You can find my GitHub repository here, I forked it from tjwoon's csZBar and I added some stuff my ionic app needs.
I guarantee nothing, but I'm pretty sure I'll implement an iOS layout soon (at least I'll try), and unfortunately I don't really know android / iOS mobile programming.
Here's a screenshot of the layout
I made a "tab bar" composed of 3 image buttons, a "top bar" composed of text views & image buttons. The scanner is embedded between these two.
There are pop-ups for the app's features, which pause the scanner and respond to click events.
See the README and Java files (csZBar/android/) for more information.
Don't hesitate to ask questions and/or inspect my code.
Warning
1) It's currently on development so use it at your own risks (use branch master, not develop)
2) I only modified the android part, not the iOS!
3) It doesn't work for Windows phone...
After adding plugin, installngCordova with bower install ngCordova
Add link to ng-cordova.js JS file above reference to cordova.js:
index.html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
Also, don't forget to add ngCordova module:
app.js
angular.module('myApp', ['ngCordova'])
Now you're ready to use the plugin like this:
Controller:
var module = angular.module('starter.controllers', []);
module.controller('BarcodeCtrl', function($scope, $cordovaBarcodeScanner, $ionicPlatform) {
$ionicPlatform.ready(function(){
$scope.scan = function() {
$cordovaBarcodeScanner
.scan()
.then(function(barcodeData) {
alert(JSON.stringify(barcodeData));
}, function(error) {
alert(error);
});
};
});
});
View:
<button ng-click="scan()">Scan</button>
I try to update tinyMce plugin to be able writing from right to left (like Arabic,Urdu,Persian) .
So i found this code in tinyMce support
tinymce.init({
directionality : 'rtl',
});
The problem is that i don't found where i can add this lines ?
So what is the file to edit this issue
Wait for you answer ... Thank you
Here's the documentation about TinyMCE configuration in ImpressPages - http://www.impresspages.org/docs/tinymce
And example plugins to get you started - http://market.impresspages.org/plugins/?q=tinymce
Download any of it, check how it's built and change to your needs.
Yes its works, i turn it on to support right to left:
For the default settings it was just edit Ip/Internal/Core/assets/tinymce/default.js
and add : directionality : 'rtl', over ipTinyMceConfig = function ()
For update the pluging FullTinyMCE http://market.impresspages.org/plugins/FullTinyMCE
i edited the file Plugin/TinyMceComplete/assets/tinymcecomplete.js
and add this line : tinyMceDefault.directionality = 'rtl';
I need a view in my app to refresh everytime the app comes back to the foreground. The code below is working perfectly with Android but nothing happens on iOS.
$ionicPlatform.on('resume', function() {
if($state.current.name == "app.listar_aprovacoes"){
// code to refresh scope and view.
};
});
I also tried the following and it also doesn't work with iOS:
document.addEventListener("resume", function() {
var alertPopup = $ionicPopup.alert({
title: 'Foo',
template: 'Bar'
});
}, false);
So could you help me out with a solution to this problem?
Thanks!
EDIT: For some reason, updating the platform using ionic platform update ios didn't update the code for this. I removed the platform and added it again and it started working.
Try using window.addEventListener('resume', callback); as well.
Also make sure you have the Cordova Device Plugin.
You can install it by using:
ionic plugin add cordova-plugin-device
Generally, with the plugin installed, the first ($ionicPlatform.on('resume', ...)) method should work. I tested both on iOS and Android.
For some reason, updating the platform using ionic platform update ios didn't update the code for this. I removed the platform and added it again and it started working.