How to create a HTML5 Drag and Drop Editor? - javascript

feel like this is kind of weird question but still,
I want to create studio where people can create cards using different kind of contents, like Text, Images, Video, Audio, Links etc. and save them, so that I should be able to render them as they designed through some other view.
I am planning to built it with ReactJS Framework. I am new bee to ReactJS, just went through TODO tutorials. And done some work around to understand Drag and Drop features with ReactJS.
But I am still confused about How and Where to begin coding for my requirement. What should be the structure of my application. What all properties each components should have, totally got blocked.
I am not asking here exactly to give the structure for my application, I am looking for some resources/documents where it explains how to structure application for these kind of requirements.
Something like beefree.io is what I want to build.
Many Many Thanks for all your feedback.

I very recommend TinyMCE editor: https://www.tinymce.com/download/. This editor has a lot of features. I can also recommend http://hammerjs.github.io/, https://github.com/yabwe/medium-editor and http://premiumsoftware.net/cleditor/.
If you want to create standalone HTML5 editor, you should research GitHub sources of recommended editors and learn mainly jQuery and AngularJS.
Instructions how to create from basics HTML5 editor:
http://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://buildwithreact.com/

I recommend trying out Unroll.io's react-email-editor: https://github.com/unroll-io/react-email-editor
It has a lot of features that you are looking for and is super easy to use in your web app. Also good documentation is available.
This React component is focused towards emails but if you plan to use it for HTML pages instead of emails, you can easily create a similar React component and change displayMode to web as per Unroll.io docs.
I have seen this being used in production on EmailMonster's email editor.

Related

How to manage translating a complex React app

I am working on a relatively complex React project. It's integrated with WordPress and includes some static pages, as well as blog and product pages for e-commerce. I have been trying to add the ability for the user the choose the site language, i.e. English or Spanish. I have tried working with a package called react-auto-translate - for some reason, it doesn't work on all of the components with text, so that is probably not a viable option. I've also been trying out the GTranslate plugin for wordPress, which provides a language url, so if the user selects Spanish the JSON url changes to /es/wp-json, making all of the JSON data translated to Spanish. This would seem like the best option, except that it only takes care of the text coming from the JSON data, not the hardcoded text in the React app.
I have also attempted to use the Google Translate API directly, but was not successful in getting it to connect to my app.
Is anyone aware of any other solutions for handling translations in WordPress + React applications?
You can try this alternatives:
https://react.i18next.com/
Airbnb's Polyglot: https://airbnb.io/polyglot.js/
But take into consideration that none of this will work automagically, you may need to make changes to your project. Choosing an internationalization/localization solution may be one of the things you decided when designing your app.

How to migrate html, css and javascript application into react-native components?

I've created a web application using HTML, CSS and Javascript but is it possible to convert it to a react-native app with the help of any kind of wrapper for HTML, CSS and JS code which can be used within react-native. I would like to convert the web application component into react-native components though it would be a tedious process if I need to change anything in the web application which in turn lead me to change the react-native components.
You cannot use html,css,and javascript code for react native app. Beacause react native has its own tags so it wouldn't possible but still if you can follow the attached url hope it may give you ideas
https://medium.com/javascript-in-plain-english/how-to-convert-any-web-page-to-reactjs-9740f1ba15db
a method would be...
react-native-WebView? I haven't tried it out but from what it sounds like I think its like android web view where u can give it a link and it will load that webpage? that's the closest thing I can think of. of course this method has limitations obviously...
I don't think there are any good methods to turn react code to react-native code since both have different tags and even if you do somehow do it you will have to climb mountains of bugs and fixes if your app is kind of complex.
but if in the future u do take up a project that is for both web and native, and they both share a load of functionality I would recommend something like react-native-web where you can share a codebase between web and native. essentially by making a native app ur making a web app aswell. its a bit tricky when u start but if your having projects like this it will be helpful. hope this gives u some ideas

How to use knockout.js with CMS?

All the examples at ko.js site are build manually and models and views are handcrafted.
What if I want to use ko.js on site that doesn't create data-binding attributes in the backend? Is it possible to apply bindings dynamically in document?
Otherwise it seems like ko.js would support only custom projects and not e.g. CMS sites such as WordPress or Drupal (without extensive customization).
Say I have a nice form rendered from CMS that I would like to use together with ko.js to provide functionality. How do I add ko.js to it?
From what I can ascertain from your description, I don't think knockout or indeed any MVVM binding framework is correct for you. It would be good to understand more about what you are trying to do, with some sample code, before we help any further.
The samples over at knockout's page are a little simple, you may want to check out http://www.scottlogic.com/blog/2014/07/30/spa-angular-knockout.html for a more in-depth article with code.

Is it possible to create a self contained Angularjs app that will not clash with with any other Js or css libraries on the same page

This may not be a plausible and I will except that as an answer if someone can tell me why with reasonable detail but I am looking to create a simple Angularjs app that I can include in any html page (whether on a tomcat server, MAMP or in wordpress) and it not be affected by any js/css libraries used on the same page except by my app's own Dependencies.
For example, if I built a simple Calculator that uses a specific version of Bootstrap, Jquery and Angularjs, I would like to be able to give someone the project folder and a simple snippet or 2 like the following and it would work on their site without clashing with anything else already existing on their site.
<div data-my-ng-calculator></div>
I realise that it if this is plausible may require some complex angular application bootstrapping or even an external library to some how load my JS and CSS in some sort of self contained container. Or maybe inside my app I need to find some way to reference my libraries and Css class with a custom selector of some sort????
Any advice or links to articles/tutorial/frameworks or books on the matter would be welcomed. Obviously this is currently hypothetical ( or maybe it's not and someone has seen similar already) and I am just looking to explore the possibility
I have tried Googling this but so far i haven't been able to find anything but this is probably down to bad search terms.
It appears that this is an emerging standard called Web Components (Thanks #steveax for pointing me to this). From here I was able to then find this excellent tutorial on css-tricks , in particular the section on the Shadow Dom was very relevant. unfortunately according to canIUse.com it is only supported in Chrome and and Opera at the moment.

Recommendation for SWT/JFace Javascript Editor?

I'm building an app using SWT + JFace and I would like to integrate a Javascript editor (with Syntax Highlighting and Auto-Indent).
I'm looking for something simple like RSyntaxTextArea: just use the widget like as a TextArea and set the syntax to "Javascript".
So far I've come across examples with "JFace Text" but it seems I have to implement the Javascript part myself. Also, I don't want to integrate the whole Eclipse workbench if possible.
Do you know of any component that would do the job?
It's possible to use StyledText widget (so no dependency on JFace) to show syntax highlight (see Into the Deep End of the SWT StyledText Widget), but it's quite lot of work to do..
For additional example see Implements syntax coloring using the StyledText API.
It's also possible to use SWT_AWT bridge and put the RSyntaxTextArea to your application directly..
I found some interesting project, which might help you with the situation..
It's called The DJ Project (The Sweet library brings some rich components to SWT-based applications) and when you check the Gallery, you can find as last example SWT gui with javascript syntax highlighted text area.
The licence is LGPL, which is one of the best for any purpose..

Categories