In Integrating a medium-editor on the Atmosphere with a Telescope App I have unknown parts that I can not make search for Atmosphere package pages makes only references to the github pages of clones.
I want to integrate a medium-editor clone with my Telescope app, say CitizenKevin/meteor-medium-editor on the Atmosphere. Instructions on the Github page of the clone is regarding non-Meteor apps, refrencing libs to html etc.
What is the thing with meteor. How I just start to use it. I see one skips the referencing in html parts. issuing meteor add citizenKevin:medium-editor will do those settings. Is that right?
I have skipped this and just added a:
<div class="editable">adasdasd</div>
to my main.html file, I am using Discovering Meteor book.
And added initialising to the main.js file as:
editor = new MediumEditor('.editable');
But my div above is not editable now.
What is the missing thing in my setup and try?
This has been done in other projects as well like the meteor-blog package.
They setup an editor file here: https://github.com/Differential/meteor-blog/blob/master/client/views/admin/editor.coffee
And then the corresponding edit functionality in here: https://github.com/Differential/meteor-blog/blob/master/client/views/admin/edit.coffee
So, based on those, you should be able to see how the medium-editor plugin can be used in Meteor projects.
You need to wrap the editor initialization like:
$(function () {
var editor = new MediumEditor('.editable');
});
Otherwise the editable div is not there (DOM not ready) when you init the editor.
Or you can put it in the rendered() function in your template like:
Template.TEMPLATENAME.rendered = function()
{
var editor = new MediumEditor('.editable', {});
};
Both tested with meteor 1.1.0.2
Related
I am using VUE and JavaScript to develop an educational 2D game engine for the purpose of teaching kids game design. The breakdown of how I plan on it working is as follows:
VUE based editor is used to create game content
The actual engine is written in pure JS
When the "play," button is clicked in the editor, a function from the engine run_debug(inputGameData) is called which returns specific errors to the editor process for it to handle if they appear IE: Display error message and highlight location in editor that the error occurred.
When the "export," button is clicked in the editor, the game data and engine are packaged together in a single HTML file to be run as a stand-alone application.
The editor is almost completed, which means I'm now thinking more about the engine side of things. What I'm really scratching my head about is how I should distribute the two on the server without having multiple duplicates of the engine; one version that is generated with the HTML wrapper template, and one that is imported into the VUE application to be run-able from the editor.
I see a few solutions to this off the top of my head, but all have drawbacks:
Distribute all separate versions on the server. This will cause a longer page load and hurts my insides as a programmer due to how inefficient this feels
Dynamically build the engine from source at export/run time in whichever version is needed. This would cause problems as one of my goals for accessibility is having the editor able to run locally on a machine, and browsers currently don't handle local file reading too well without having to mess about with permissions.
Import the HTML5 wrapped version into the VUE app on build, and somehow both call it from the engine (in an Iframe or similar) and be able to read it as text so I can insert the game data on export and download it to the user's machine. I have absolutely no clue how to do this using VUE.
It's a weird niche problem so I'm having some difficulty finding resources on the topic. If anyone has experience in this subject matter I appreciate any help/direction you can give or point me to
Here's the solution I ended up coming up with (basically option #3 from above, just slightly modified):
Create build system for the engine that generates a engine.js file where the contents of the file is stored in the format of:
let engineCode = 'engineCodeHere';
let sharedCode = 'code shared between engine and editor goes here';
import the engine.js file into the vue editor and on initial load, put the code into <script> tags
const engineTag = document.createElement('script');
const sharedTag = document.createElement('script');
engineTag.id = 'engineCode';
sharedTag.id = 'sharedCode';
engineTag.innerHTML = engineCode;
sharedTag.innerHTML = sharedCode;
document.body.appendChild(engineTag);
document.body.appendChild(sharedTag);
engineCode = null;
sharedCode = null;
once they are imported as script tags the original variables are cleared so we're not story duplicate data in memory.
Now, not only do I have access to the runnable js code as if I had imported it normally, but I also have the added benefit of being able to get that code as text so I can use it when packaging the final game "executable."
let engineText = document.getElementById('engineCode').innerHTML;
let sharedText = document.getElementById('sharedCode').innerHTML;
This will allow me to pack the engine just a single time, instead of once as JS and once as text. For added efficiency I can even hold off creating the engine tag until the game is run in the editor to save on resources.
I have an existing application build with .Net Core Framework. I would like to integrate React components for re-usability purposes which at this point will only be app specific. I have gone through numerous "Hello World!!" tutorials but that doesn't satisfy my need. I have also looked at reactjs.net but that also is not going to help me as the components gets rendered on the View
Scenario
Application has lots of Modals with a form which gets rendered on numerous pages. Currently it is being handled with JavaScript. The JavaScript code gets duplicated a lot to achieve it.
Goal
Would like to have a react component to replace above mentioned functionality to reduce code getting duplicated.
The problem I am facing is I am not sure how will I be able to interact with the component from a jQuery/JavaScript point of view.
Example
I have a DataTable and one of the actions is to click on a certain button to display the Modal. The code is in a separate .js file so it is separate from the View. So in this case if I click on a button I would like to render the react component. I would need to pass props through to the components and that is where I am uncertain how would I handle it :-(
Any suggestion or guidance would be appreciated.
Thanks in advance
Using react in Asp.Net Core application is easy. At first you need to know your back-end will be API based to communicate with react. So if you have not set up your Core application to an API based, it won't work. Also make sure you have installed nodeJs and other dependencies.
To get started with react, create a new folder in your Asp.Net project solution.
Open the folder in your Command line and execute:
npx create-react-app [your--folder--name]
To view your created app, run
npm start
To get started with asp.net, you need to add spa dependencies in your project.
Then you have to set up your ConfigureService method to include:
services.AddSpaStaticFiles(configuration => { configuration.RootPath = "[your--folder--name]/build"; });
Finally set up your Configure method to include:
app.UseSpaStaticFiles();
app.UseRouting();
app.UseEndpoints( ... );
app.UseSpa(spa => {
spa.Options.SourcePath = "[your--folder--name]";
if (env.IsDevelopment()) {
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
I am trying to create an application in angular version 6 which can generate js as output where the application can be embedded directly in any application.
Eg.
<div id="entryID"/>
<script src="angularapp.js"></script>
<script>
AngularApp.App({
inputParam1: 'param1'
user: { id: 'userid' },
resize: 'detect'
}, document.getElementById("entryID"));
</script>
Here entryID is used for the div to initialize the application and fit in the div
You should take a look at Angular Elements.
It's a part of the Angular project, and it's function is pretty much what you want: creating a .js file, that, if imported, will allow you to use components in any environment.
It works using custom elements, basically registering the component in the browser so you can use them anywhere, as long as you import the .js files.
Note that the generated .js files are pretty massive, as they include the entire Angular library itself.
Support is even included for Internet Explorer, if you use the correct polyfills.
I'm wondering what's the best way about adding a front end, componentized framework to a Wordpress site without using the Rest API.
I'm taking over two sites built with the Woocommerce Storefront theme, and I'd like to add a reliable front end library. Would it be best to just build my own as I need it? I'd like to avoid jQuery as I find it gets messy pretty quickly.
Would a good course of action be to build a plugin which generates a Post type with the framework added in, or is there a way I can add my framework to the whole site and implement it incrementally.
If you start a new project from scratch, I would recommend using Sage: https://roots.io/sage/.
One big deal when it comes to use React / Vue.js for any kind of projects is you need to setup the build (using Webpack for example), to compile them and get the best of out these frameworks. Sage takes care of these tasks for you and have webpack and browserify integrated so you have hot loading for dev and proper build for production. That's really an advantage.
With your case, because your sites have been built using Storefront, so integrate fully with Sage seems to be not an option, however, you can still borrow some ideas from Sage.
Sage set it scripts up in the way that your script can be separated into routes, though these routes are not exactly the same as ones of a single page app. Basically, they have an util function called Router, which will execute JS functions based on the classes inserted into the body element. I find it works extremely well with Vue.js and React. For instances: in your homepage, you want to place couple of Vue components inside a <div id="homepage"> element, you can define it as follows:
export default {
init() {
new Vue({
el: '#homepage',
name: 'HomePageApp',
components: {
...
},
});
},
finalize() {
// JavaScript to be fired on the home page, after the init JS
},
};
Then import and add it to your Router:
const routes = new Router({
...
// Home page
homepage,
});
I recommend having a look at how Sage does that in your Github repo, it's pretty straight forward and guarantee a well-organised, well-structured front-end: https://github.com/roots/sage/blob/master/resources/assets/scripts/main.js
I'm looking to add Hammer JS to my app built on Meteor with React. I am running into a problem when integrating different libraries.
Currently, I've tried a few different available libraries like:
https://github.com/JedWatson/react-hammerjs, but I receive this error:
I've also looked into:
https://atmospherejs.com/chriswessels/hammer
but, it doesn't look like it supports ReactJS. If anyone can help point me in the right direction, or point to what they have done please let me know!
You can add Hammer library to your web page and use it from React code.
Linking
I'm not sure about your project structure. I just downloaded the js file, put it in the public folder and added corresponding <script> tag before the one which points to js file with bundled React code.
Usage
As described here you can go with the following code:
componentDidMount: function() {
this.hammer = Hammer(this.getDOMNode())
this.hammer.on('swipeleft', this.swipeLeft);
},
componentWillUnmount: function() {
this.hammer.off('swipeleft', this.swipeLeft);
}