I'm trying to use CKEditor with meteor.
First I added the package
https://libraries.io/meteor/lsun:ckeditor
Then I added the following code:
route.js
Router.route('/editor', function () {
this.render('editor');
});
editor.html
<template name="editor">
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
</template>
helpers.js
Template.editor.rendered = function() {
CKEDITOR.replace( 'editor1' );
};
Now when I browse to my /editor route, I can see the ckeditor being loaded initially. However, if I press F5 while I am on the page, then I start getting the plain textarea, without ckeditor replacing it with the editor. Also, I get the following error in the javascript console:
Exception from Tracker afterFlush function:
meteor.js:888
ReferenceError: CKEDITOR is not defined
at Template.editor.rendered (helpers.js:10)
at blaze.js:3338
at Function.Template._withTemplateInstanceFunc (blaze.js:3679)
at fireCallbacks (blaze.js:3334)
at null.<anonymous> (blaze.js:3427)
at blaze.js:1788
at Object.Blaze._withCurrentView (blaze.js:2219)
at blaze.js:1787
at Object.Tracker._runFlush (tracker.js:531)
at onGlobalMessage (meteor.js:373)
Related
I'm trying to integrate Jquery File Upload plugin in my aspx page (asp.net website). I followed the guide, including all required scripts and stylesheets, but in the index.html it's used a form tag to initialize the plugin and with the tag are also specified action and method attributes. Since I'm using asp.net, I am not allowed to insert the form tag because asp.net wrap the whole website with another form tag and it doesn't allow to insert another form tag inside it.
How can I initialize the plugin in a different way?
You don't actually have to have a form to use jQuery file upload plugin. Because the plugin is using jQuery ajax under the hood. use the bellow code inside your page, keep in mind you have to code an API on the server side.
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = 'your server api or handler';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
and your html as follows:
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
in my template i have:
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace('editor1', { toolbar : [ ['Bold','Italic','Font','FontSize'] ] });
</script>
</form>
and the result is this:
localhost/PeopleSymfony/web/app_dev.php/index/config.js?t=G4CD Failed to load resource: the server responded with a status of 500 (Internal Server Error)
7391ff2_ckeditor_5.js:85
GET http://localhost/PeopleSymfony/web/app_dev.php/index/lang/es.js?t=G4CD http://localhost/PeopleSymfony/web/app_dev.php/index/skins/moono/
i dont know to how solve.
i did php app/console assets:install to reinstalle assets but have the same error
why search es.js in
//localhost/PeopleSymfony/web/app_dev.php/index/lang/es.js?t=G4CD and no in the bundle ivoryckeditor?
I'm new to both meteor and JS.
I created a meteor app like this:
cd /tmp/
meteor create hello
cd hello
In hello.html I wrote this
<body>
<h1>Welcome to Meteor!</h1>
{{> t1}}
{{> t2}}
</body>
Then I added these templates:
<template name='t1'>
<span id='t1'>hello</span>
</template>
<template name='t2'>
<span id='t2'>world</span>
</template>
Then I wrote syntax inside of hello.js to get text from the DOM:
Template.t1.onRendered( function() {
mytext = $('span#t1').html() });
According to the debugger-console in my browser,
the above syntax works okay.
The debugger tells me that mytext == 'hello'
Question: How to share the mytext value with other parts of my Meteor app?
As written, mytext is stuck inside my anonymous function.
For example how would I make this call work:
$('span#t2').html(mytext)
??
You'll want to reactively watch your variable. An easy out-of-the-box solution for this is to use the Session variable. You can do it pretty easily like so:
Template.t1.onRendered( function() {
Session.set('mytext', $('span#t1').html());
});
Then in your second template, define and reference helper that returns that variable:
<!--html-->
<template name='t2'>
<span id='t2'>{{getMyText}}</span>
</template>
//js
Template.t2.helpers({
getMyText: function() { return Session.get('mytext'); }
});
The Session variable is reactive, so when the first template renders and sets the value of Session.mytext, the helper's result will be invalidated and the second template will update.
I try to use parsley for validation with meteor following this question: Using Parsley.js with Meteor using HTML Code
I run meteor 0.6.6.3 on Ubuntu 13.10, added package jquery and added parsley 1.1.7 from atmosphere (https://atmosphere.meteor.com/package/parsleyjs) with meteorite.
I also tested with the current version 1.2.2 of parsley from client/lib (after removing parsleyjs with mrt).
Knowing that I can't use the HTML markup for validation I created a template like this
<template name="new_customer">
<form id="new_customer_form">
<div class="newCustomer">
<div class="lookupcell">
<input type="text" size="1"
name="new-customer-name"
id="new-customer-name"
class="new-customer-name"
placeholder="neue Firma/Person"
parsley-notblank="true" />
</div>
<div class="lookupcell">
<input type="text" size="1" id="new-customer-email"
name="new-customer-email"
id="new-customer-email"
parsley-type="email"
parsley-trigger="keyup"
class="new-customer-email" placeholder="Email" />
</div>
</div>
<div style="text-align: right;">
<button type="submit">Add</button>
</div>
</form>
</template>
and the following javascript for setup
Template.new_customer.rendered = function () {
console.log("rendered new_customer");
$new_customer_form = $( '#new_customer_form' );
if (! $new_customer_form) {
console.log("form not found.");
return;
}
$new_customer_form.parsley();
$new_customer_form.parsley( 'addItem', '#new_customer_name' );
};
meteor crashes on rendering at the last line when I try to add the field #new_customer_name with the following stacktrace
[09:44:11.969] "Exception from Deps afterFlush function: ParsleyForm.prototype.addItem#http://localhost:3000/packages/parsleyjs.js?ed9f338553f590de7edeb7b3e5ca8cb568f2e74d:1152
bind#http://localhost:3000/packages/parsleyjs.js?ed9f338553f590de7edeb7b3e5ca8cb568f2e74d:1295
$.fn.parsley#http://localhost:3000/packages/parsleyjs.js?ed9f338553f590de7edeb7b3e5ca8cb568f2e74d:1305
Template.new_customer.rendered#http://localhost:3000/client/X4Lizenzen.js?7d0644137e559b675577266ad6e2f78f087b3453:151
Template.__define__/partial/html</html<.rendered#http://localhost:3000/packages/templating.js?5944cd5e16b26fbf83959a0fe92d7754029a624d:181
scheduleOnscreenSetup/</<#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:443
_.forEach#http://localhost:3000/packages/underscore.js?13ab483e8a3c795d9991577e65e811cd0b827997:130
scheduleOnscreenSetup/<#http://localhost:3000/packages/spark.js?3a050592ceb34d6c585c70f1df11e353610be0ab:441
.flush#http://localhost:3000/packages/deps.js?5ac28feec1f3e0539889ecde598dd9d01e408b41:265
"
The stack does not tell me what the actual problem is (or rather I don't understand :-)
So I wonder how the author of the linked question got his setup to work at all with the setup in rendered(). Any ideas anyone?
Update: It turns out I made a simple mistake which I did not spot until this morning.
I had id="new-customer-name" in the template and tried to register the filed with parsley using #new_customer_name. This cannot work and what is more, hyphens cannot be used for id-strings. After correcting the error it worked.
I guess you need to add the data-parsley-validate as given below. if its working without using that let me know. I am wondering how did it render with using data-parsley-validate in form.
form id="new_customer_form" data-parsley-validate
I'm getting client side errors(console.log ones) but my app works(I can add users)
The error is the following:
Uncaught TypeError: Cannot read property '_liveui' of null
The project is in my repo:
https://github.com/thiagofm/statusfyit
What is happening?
Meteor has updated its API a bunch since this question was asked, so the original code no longer runs directly.
Using jQuery.html to insert the results of rendering a template is not the normal approach. It is better to use the handlebars template include functionality.
For example, replace:
$().ready(function(){
hello = Meteor.ui.render(function(){
return Template.hello();
});
$('body').html(hello);
});
With:
<body>
{{> hello}}
</body>
To render different things depending on the state of the application, use the 'Session' object to conditionalize includes. For example:
<template name="foo">
{{#if showNewUserDialog}}
{{> newUserDialog}}
{{else}}
other stuff
{{/if}}
</template>
<template name="newUserDialog">
some stuff
</template>
and
Template.foo.showNewUserDialog = function () {
return Session.get('showNewUserDialog');
};
Template.other.events({
'click #new_user': function () {
Session.set('showNewUserDialog', true);
}
});