WYSIWYG editor for MeteorJS with image upload options - meteor

I've tried most of the packages from https://atmospherejs.com/ but nothing seems to work with Meteor 1.3. Are there any editors for Meteor somewhat like Wordpress's TinyMCE?
I'm using React with Meteor and ES6. Trying to make a blog like CMS for myself.
(I've just started Meteor so I'm a noob in this platform)

TinyMCE got their own React module which worked for me - TinyMCE React
If anyone gets an error like: tinymce is not defined...
You can do-
Add a script in your footer :
src="//cdn.tinymce.com/4/tinymce.min.js"
Copy the whole script into your code, so that Meteor could merge it
for you
Add the script on a component level using dangerouslySetInnerHTML
function inside componentDidMount or anywhere you want

Related

Call Elementor JS function from other JS script file

I'm trying to initialise the Accordion JS function that already exists in Elementors' frontend script in my own file. I don't want to use a different accordion script since that is already on page.
As far as I can tell Elementor packs all of its JS using Webpack. Is there anyway to access that function? I know it live in wp-content/plugins/elementor/assets/js/accordion.a037e351fac33e9c9dfc.bundle.js but not sure how to use it.
Thank you.

Will "Hello Elementor" automatically convert SCSS to CSS

I've just started using the WordPress page builder "Elementor" and have decided to move from "Genesis" to their own theme called "Hello Elementor". However, their theme uses SCSS and GruntJS.
On their documentation, they've included a custom.scss for all the custom styling. But when you add anything to this via WordPress, nothing happens. I know I could download the theme and use Visual Studio Code to make changes and use a sass compiler to automatically compile this for me, but it would require me to constantly upload files via FTP. Ideally, I would like to stay away from this.
Is there something I am missing? Or something I could do for WordPress to automatically compile this for me?
Edit:
If anyone has any recommendations of other themes to use with Elementor, I would really appreciate it.
They removed this option in Hello Elementor. You can no longer integrate custom scss. And I don't know since which version it's not present anymore, considering that I've tried the latest two ones and none of them seemed to accept the scss custom file.
However, you can check the answer they gave me a few days ago on the Hello Elementor GitHub page, if you want.
https://github.com/elementor/hello-theme/issues/85

Semantic UI Behaviors Not Working in Meteor 1.3

I decided to upgrade the new app I am developing to the Meteor 1.3 release. I followed 'The Official Guide' instructions from MDG for the recommended directory layout and, with a bit of refactoring of my FlowRouter code, was able to get the app almost working. The problem seems to be with the Semantic UI package (2.1.8) installed from Atmosphere. I did need to add the appropriate SUI *.less files to a top-level 'main.less' file in the 'client' directory to get the app to render a properly styled view. However, the SUI behaviors which worked nicely in Meteor 1.2 yesterday no longer work.
My assumption is that I need to import the SUI behaviors using the form...
import something from 'meteor/semantic:ui';
...but I haven't been able to identify the correct import statement. Semantic UI doesn't present a typical namespace for its library so none of the obvious ideas worked.
Has anybody been able to get SUI working with 1.3 just using standard Blaze templates?
Maybe one of the following points may help, or give a hint for further inquiry:
Make sure the hole Semantic UI folder is at /client/lib/semantic-ui (no need to import anything elsewhere, just use the css classes).
Make sure the Atmosphere packages semantic:ui and flemay:less-autoprefixer are installed. So all .less files within the Semantic UI folder will be converted automatically.
If you need the JavaScript functionality of Semantic UI "Modules", like dropdowns, you need to initiate the functionality on page load. For example with $(".ui.dropdown").dropdown("initialize") or "refresh". Here you find some description of these so called "module behaviors". Behaviors are defined by $('.your.element').module('behavior name', argumentOne, argumentTwo).
If you are using a theme other than default, you might try setting the theme for the module you are trying to use to default in theme.config.less.import. It should look something like this:
/* Modules */
#accordion : 'material';
...
#dropdown : 'default';
....

meteor: how to change include order of packages

in this post on stackoverflow, the autor recommends to include the bootstrap.js before the jquery.js. in other circumstances he wrote, that the bootstrap modal won't work properly. So i had a look at the sources of my startpage, and i saw, that meteor includes bootstrap after jquery.
And now my question: How can i change the order of the included packages in meteor?
EDIT:
The reason, why i ask, is that i have problems with bootstrap modal. For example modals disappears when i press a button inside or type something into an input...
The order the packages are added depends on their filenames.
The default order should be fine, I also use the modal with both the jquery and bootstrap packages without issue. Are you adding these script tags yourself? You don't really need them.
Why not install the packages with meteor:
meteor add bootstrap
meteor add jquery

Jade templating in Meteor

In the Meteor FAQs http://meteor.com/faq/how-do-i-package-a-new-templating-system there is some information about adding a different (than the default Handlebars) templating system. Jade is the only other example explicitly called out elsewhere in the docs.
So is somebody already working on Jade? If not, is it feasible for me to start? Or is it still too early? e.g. :
The package API is rapidly changing and isn't documented, so you can't
make your own packages just yet. Coming soon.
I've been trying to love Handlebars in my current Ember.js project, but for me nothing is as elegant as Jade.
We would love to see Jade integration. Use packages/handlebars as a template.
The basic strategy is to wire the output of the template engine into Meteor.ui.render which is how we implement live page updates. As long as your template returns HTML, that'll work. Any time a Jade template references a Meteor.Collection document or Session variable, Meteor will register that dependency so that knows to rerender the template when the data changes.
Even better, though, is to also use Meteor.ui.chunk and Meteor.ui.listChunk. These will limit the amount of recalculation Meteor has to do when there's a change. For example, if you are rendering a list of documents using {{#each}} in Handlebars-speak, there's no reason to recalculate the whole template when a new document enters the result set. We just render one HTML chunk for the new document, and insert that right into the DOM. That's listChunk in action.
So you'll likely find that instrumenting just if/unless and for/each in Jade gets you a long way there.
Just be aware, package development is not as documented as the other parts of the system. So don't hesitate to ask more specific questions as you go.
meteor >= 0.8.0
Using the mquandalle:jade package has been officially recommended.
meteor <= 0.7.2
If you are not using CoffeeScript, you should check out jade-handlebars. As of this writing, there is an issue where CoffeeScript template files seem to need to be wrapped inside a Meteor.startup function which caused other issues for me.
If you are using CoffeeScript, you should check out my Cakefile. The details are all in the description, but the short version is that it automatically adds/removes/updates html files alongside your jade files. I ended up adding *.html to my .gitignore, which only works if you are not mixing html and jade in the same project. It's a bit of a hack but so far it's working fine for me.
Just publish my first meteor smart package on Atmosphere!
Use Jade+Handlebars instead of HTML+Handlebars
https://atmosphere.meteor.com/package/jade-handlebars
Just got jade templating working with my Meteor projects! And it is actual jade not jade-handlebars or some half form of jade. It is great but it needs Meteor UI which is currently in a development release called blaze-rc1. So it does not work with Meteor 0.7 at the moment.
do 'mrt add jade'
&
Run your meteor project using 'mrt --release blaze-rc1'
https://github.com/mquandalle/meteor-jade/
If you have coffeescript and jade files in the same folder add _ to the beginning of the file name so it loads jade files before the coffeescript file, otherwise it will not work correctly.
mrt add jade
in client/views/templates/hello.jade you could do something like this:
template(name="hello")
h1 hello world!
{{greeting}}
input(type="button" value="click")
start you app with mrt

Resources