Hello I am trying to add Font size plugin to Aloha Editor, however I keep getting the error:
TypeError: Aloha.settings.plugins is undefined
EDIT:
By doing the following I was able to fix the problem:
<script src="Scripts/aloha/lib/require.js"></script>
<script>
Aloha.settings = {
locale: 'en',
plugins: {}
</script>
<script src="Scripts/aloha/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link,community/fontsize"></script>
Aloha.settings now has an empty plugins object before the plugins are actually loaded.
My problem is now more specific to the plugin I am trying to use. I don't know which settings to specify in the plugins: {} bracket.
The plugins im trying to use can be found here:
https://github.com/jstrouse/Aloha-Plugin-FontSize
https://github.com/deliminator/Aloha-Plugin-Colorselector
The latter is linked to directly from the official page:
http://aloha-editor.org/guides/plugins.html
Related
I have just started with Tinymce and am trying to build rich text editor on my web page using self-hosted package. After integration, setting the Theme to Advanced and Plugin to autoresize, I see the editor as -
Tinymce editor on web page (UI editor options looks distorted and not properly formatted)
I was expecting it to be something similar to what I see on Tinymce docs -
Tinymce editor on docs
Is this a Tinymce version specific or browser related issue? I tried downloading the latest version 5.8.2 (Development & Production), however the Themes I see are Silver & Mobile while it should be Simple & Advanced as I see in the official Tinymce documentations.
Also if I try to add multiple Plugins or Themes to my deployment as guided here, it doesn't reflect on my web page.
These is how I have initialized my Tinymce -
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script>
$(document).ready(function(){
if ($("#Test").length) {
tinyMCE.init({
// General options
mode : "exact",
elements : "Test",
theme : "advanced",
width : 800,
plugins : "autoresize",
content_style: " div, p { font-size: 14px; }"
});
}
});
</script>
It looks like you are using version 3 of TinyMCE (9+ years old). Upgrade to version 5 and it should be a lot better.
I've just started looking at mapbox, and I've run into an issue straight away.
I've copied the sample here;
https://www.mapbox.com/mapbox.js/example/v1.0.0/
Please note this part;
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoibWF1cmljZXdhbG1zbGV5IiwiYSI6ImNpbmxiZjc4djB5cjJ0dG0zejZjZHZxdjEifQ.CJHrqKevqria7ZbVMOMD5Q';
var map = L.mapbox.map('map', 'mapbox.streets')
.setView([40, -74.50], 9);
</script>
Un-editted it works in my webpage.
If I change the accessToken to my one, it works.
If I then change the mapID, though, from "mapbox.streets" to "myusername.mapID" (I've double checked these, they are correct) all I get is an empty map.
Any idea what I'm doing wrong?
This is probably what you are looking for — Add styles made with Mapbox Studio using styleLayer
Also, Check your Browsers console. In Firefox, I got the following error in the console
Error: Styles created with Mapbox Studio need to be
used with L.mapbox.styleLayer, not L.mapbox.tileLayer
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.
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 add custom css classes to bootstrap package included in Typo3 6.2.
In my root template page, I add in the Setup section the following code:
page = PAGE
page.includeCSS.myCustomStylesheet = fileadmin/template/css/custom.css
but this typoscript has no effect in my source code, as if nothing is written.
Actually, when I include Bootstrap Package template in static template, every Basis templates are removed.
Any idea on how to proceed?
Edit: In bootstrap package, all CSS stylesheets are merged into a single file.
the »EXT:«-string in your path is a shortcut to the extension-directory (»./typo3conf/ext/«). So in your example you would have an extension called »path_to_my_css«.
But i guess you probably uploaded a stylesheet into your filelist. If so, then click on the file to the see full path (like »http://example.com/fileadmin/templates/assets/css/bootstrap.css)«
Then set the correct path like this
page.includeCSS.myCustomStylesheet = fileadmin/templates/assets/css/bootstrap.css
You will now see a link to your file with an appended hash in the HTML sourcecode
<link rel="stylesheet" type="text/css" href="/fileadmin/templates/assets/css/bootstrap.css?1350898986" media="all">
I had the same problem and found a solution on the github site of the bootstrap package.
The problem is the default css concatenation and compression. If you deactivate it by
config.concatenateCss = 0
the css will be correctly included.
Source: https://github.com/benjaminkott/bootstrap_package/issues/33
There is a similar option for Javascript files:
config.concatenateJs = 0
Hope it helps.