I use ngJSTree first time.
I cannot see checkboxes. In Browser I see style as follows when examine html element:
<a class="jstree-anchor jstree-clicked" href="#" tabindex="-1" id="21_anchor">
<i class="jstree-icon jstree-checkbox" role="presentation"></i>...
Controller uses checkbox plugin:
plugins : ['types','themes', 'checkbox'],
checkbox : {
"override_ui": true,
"real_checkboxes": true,
"keep_selected_style" : false,
"visible": true
}
I use css from jstree.dist.themes.default.
JsTree should be easy to use.
Do I miss some part of configuration?
Problem was in my build environment. Just add file 32px.png to the same folder as the file style.css. Then it worked.
Related
I am completely new to Angularjs and haven’t been doing any code for ages. I started setting up my website again with Angularjs. I have a main page and an about page, to which the user gets via ngRoute on ng-click (or hitting space). Once on the about page, the user can go back by clicking somewhere on the page and so on.
App.js
var app = angular.module("MyApp", ["ngRoute"]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when("/teaser", {
controller:"teaserCtrl",
templateUrl:'teaser.html'
})
.when("/about", {
controller:"aboutCtrl",
templateUrl: "about.html"
})
.otherwise({
redirectTo:"/teaser"
})
});
app.controller("mainCtrl", function($scope, $http, $location) {
$scope.v = {
inverted: false,
display: true,
offwhite: true,
}
$scope.$on("space", function() {
if ($scope.v.teaser) {
$location.path("/about")
$scope.v.teaser = false
} else {
$location.path("/teaser")
$scope.v.teaser = true
}
$scope.$apply()
})
$scope.goHome = function(){
$scope.$broadcast("goHome")
}
});
app.directive("ngMobileClick", [function () {
return function (scope, clickElement, attrs) {
clickElement.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["ngMobileClick"]);
});
}
}])
HTML
<body ng-controller="mainCtrl as main" ng-mobile-click="goHome()" ng-class="{inverted: v.inverted, bg: v.offwhite}" space>
<div class="content" ng-view ng-hide="v.display"></div>
//My body code
<script ng-init="sw = 'some website'; id="about.html" type="text/ng-template">
<div class="about">
<p class="text" ng-click="next(); $event.stopPropagation()">
<p>some text</p>
<br>
<a ng-href="{{mail}}" ng-click="$event.stopPropagation()">some address</a>
</p>
</div>
</script>
</body>
The code for the about page is written into a script and it has hyperlinks (ng-href). Now my issue: As you can see, I changed my ng-click to ng-mobile-click for the body-section. If I also change it in the script for the hyperlinks, something weird is happening which I can’t really figure out (links change to hover color, but still no redirection to the ng-href.
For the desktop version, the click is triggering ngRoute, but I can also click the links. For the mobile version this is not possible any more. Any ideas how I can fix this? I know, there is no hovering possible, but somehow I need to detect the hyperlinks also on mobile devices without being redirected to the main-page.
As I said: this is my first try with Angularjs and I haven’t done any code for a while, please be as clear as possible!
There is another controller for teaser/about which I haven’t put here, as well as the directive for the keyup.
Any ideas or suggestions? Thank you so much in advance!
I have another Assemble issue - I'm trying to get moment to format a date. But the helper doesn't seem to work.
I've tried both:
sudo npm install helper-moment --save-dev
&
sudo npm install handlebars-helper-moment --save-dev
The module installs okay, I'm assuming the more recent one is helper-moment as it's in the documentation.
Then I've added the helper to the Gruntfile.js:
assemble: {
options: {
layout: 'page.hbs',
layoutdir: './src/content/layouts',
partials: ['./src/content/partials/**/*.hbs', './src/content/partials/**/*.md'],
assets: 'assets',
helpers: ['helper-moment', './src/compile/helpers/**/*.js'],
data: ['package.json', './src/content/data/*.json'],
marked: {
breaks: false,
gfm: true,
langPrefix: 'language-',
pedantic: false,
sanitize: false,
silent: false,
smartLists: false,
smartypants: false,
tables: true
}
},
project: {
files: [{
cwd: './src/content/pages',
dest: './dist/www',
expand: true,
src: ['**/*.hbs']
}]
}
},
I ran Grunt and no complaints that it can't find the helper.
Then, from the template:
<div class="col s12 m12 l9">
<div class="col m12 s12 l7">
{{moment}}
I've tried in a partial and in a normal template. But it doesn't output anything, no errors anywhere, it just doesn't output.
Is there any way to debug the template build process? I'd love to be able to see some logging from the modules...
If you are using Assemble 0.6+ the handlebars-helpers project is not added by default. That means that you have a limited built-in helpers to use. I just checked and that specific helper is added in the project: https://github.com/assemble/handlebars-helpers/blob/dba009ef72173dbc8c19b346ffa0c62de71d63f9/docs/helpers/dates/helper-moment.md So, if you import the project and register the new helpers, that should make it work. I could make it work using Assemble 0.9 and the dev branch of handlebars helpers.
I have a problem with TinyMCE:
I need to get this code:
<blockquote>
<h2>REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE</h2>
<hr/>
<p>Erik Heinsholt</p>
</blockquote>
TinyMCE settings:
valid_elements: "a[href|target|title],ul,ol,li,br,strong/b,em/i,span[style<text-decoration: underline;|class],u,p,blockquote,hr,h2",
force_br_newlines: false,
force_p_newlines: true,
theme_advanced_buttons1: "undo,redo,|,bold,italic,underline,|,hr,code,preview, styleselect",
schema: "html5",
style_formats : [
{title : "First Word", inline : "span", classes : "first_word"},
{title : "Blockquote", block : "blockquote"},
{title : "Quote Header", inline : "h2"}
]
What I have: I write in admin textarea "REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE <hr /> Erik Heisholt", then select "REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE", set a style "Quote Header" for it, then select all and set a style "Blockquote" for it. As a result I get this:
<blockquote><h2>REVOLUTIONARY QUOTE RELATING MANIFESTO TO PROJECT GOES HERE</h2></blockquote>
<blockquote><hr /></blockquote>
<blockquote><p>Erik Heinsholt</p></blockquote>
What should I do to put all elements in one blockquote tag, not each element??
p.s.: the video describing this problem: http://www.sendspace.com/file/nkz97d
Have a look at the tinymce configuration parameters valid_elements and valid_children.
You can define that h2- and hr-tags may be childs to other htmlnodes.
Does anyone know how to allow having custom uppercase tags in TinyMCE? It seems that TinyMCE doesn't like uppercase tags, even though they have been declared as valid. Here is my TinyMCE config:
tinyMCE.init({
mode: "specific_textareas",
theme: "advanced",
language: "en",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1: "bold,italic,|,sub,sup,|,charmap,|,table,|,code",
theme_advanced_path: false,
theme_advanced_resizing: true,
plugins: "fullscreen,paste,table",
paste_auto_cleanup_on_paste : true,
relative_urls: false,
width: "300",
height: "300",
theme_advanced_resizing_min_height : "10",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '',
entity_encoding: "raw",
valid_elements : "B/strong,I/em,SUP/sup,SUB/sub",
extended_valid_elements: "CUSTOM"
})
Typing something like
<CUSTOM>this is a custom tag</CUSTOM>
doesn't work because <CUSTOM> gets stripped off.
If I change the init script to extended_valid_elements: "custom", then it works fine - I can type
<custom>this is a custom tag</custom>
and the <custom gets preserved.
Doesn't anyone know any workaround?
Thanks!
Here is a description of how to do that (the reverse works analogue): http://www.codingforums.com/archive/index.php/t-148450.html
You should use the tinymce onInit event and to change the tags back to Uppercase use onSubmit or onSave (alternatively you may change the content back before submitting your content on any other suitable location of code).
To add this handlers use the tinymce setup configuration parameter
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from editor source html element
var content = $(ed.id).html();
// tagname to lowercase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toLowerCase()});
ed.setContent(content);
});
ed.onSubmit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from edito
var content = ed.getContent();
// tagname to toUpperCase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toUpperCase()});
// write content to html source element (usually a textarea)
$(ed.id).html(content );
});
},
I created an ArticleController to render a form with fields: title (text) and content (textarea), and everything works well until I add class="tinymce" to the textarea field in the template. then I get this error:
'An invalid form control with name='form[content]' is not focusable.'
I followed the documentation to add the 'class' attribute and the editor renders fine in the browser, its just when I submit the form I get the error.
Any ideas what could be causing this?
{{ form_errors(form) }}
{{ form_widget(form.title) }}
{{ form_widget(form.content, { 'attr': {'class': 'tinymce' }} ) }}
{{ form_rest(form) }}
<input type="submit" />
Apparently there is an issue with chrome regarding the attribute 'required = "true"'.
http://code.google.com/p/chromium/issues/detail?id=45640
I added 'formnovalidate = "true"' attribute to the submit button input field and it works fine
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor",
setup : function(ed) {
ed.onChange.add(function(ed, l) {
tinyMCE.activeEditor.getElement().value = tinyMCE.activeEditor.getContent();
});
}
});
I tried the suggestion from Musefan, and it only partly worked, but it got me experimenting.
Here's something that works for me. Tested on Firefox 10.0.1, IE9, and Chrome 17.
Where I'm setting tinyMCE.activeEditor.getElement().value = 'test' it can be any value other than ''. Not sure why that's true.
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "tinymce",
setup : function(ed)
{
// This is needed when the textarea is required for html5
ed.onInit.add(function(ed)
{
tinyMCE.activeEditor.getElement().value = 'test'
});
},
});
The error happens when the WYSIWYG hides your textarea but the textarea is set to required field. You can set 'required' => false on your content textarea control when you build the form in order to disable browser's required check.
$builder->add("content", "textarea", array('required' => false));
tinyMCE will normally update the contents of the hidden textarea during the onsubmit-Event.
This event, however, is not fired when html5-validation is used and any input is invalid.
Therefore you will never get an empty and required textarea with tinyMCE on top to validate correctly unless you enforce the textarea to be updated before html5-validation starts.
I built a workaround for this bug which hopefully will be merged into the original repo anytime soon: https://github.com/stfalcon/TinymceBundle/pull/19
Building on musefans's response above.
I came here because I'm using Simple Form, Twitter Bootstrap, and tinymce-rails. If you're using tinymce-rails this setup you need to edit the line noted in is answer to your tinymce.yml file. Your final file should look similar to this.
theme_advanced_toolbar_location: top
theme_advanced_toolbar_align: left
theme_advanced_statusbar_location: bottom
theme_advanced_buttons3_add:
- tablecontrols
- fullscreen
plugins:
- table
- fullscreen
mode:
- specific_textareas