The Quill documentation says:
Users have already used [Quill] to add embedded slide decks, interactive checklists, and 3D models.
In the interest of learning Quill better, can anyone point to specific examples of these types of Quill projects on the web?
Related
I am planning to develop a blogging platform using the MERN stack, and I need a rich text editor for editing the blog posts. The editor should be programmer-friendly. I was thinking about an editor like that StackOverflow is currently using, where we can add code snippets and run them at the same time.
So are there any react libraries that provide that kind of functionality with a rich text editor?
Or do I have to get a library like react quill and modify it according to my requirements? And I want to know whether it is possible to add such functionality.
suggestions are greatly appreciated.:)
there's few good editors you can use for that purpose. below are some of my recommendations
if you want a github like editor ( the github markdown editor ) https://uiwjs.github.io/react-md-editor/ this will be a really good choice. it comes with code highlighting and all those cool features by default with GitHub inspired styles.
in case you are more interested in to stack-overflow type editor i can recommend you the Stack Overflow's Combination Rich Text / Markdown Editor. you can find it from https://editor.stackoverflow.design/
if you are more interested on simplicity and want something more simple without lot of features i can recommend you https://www.npmjs.com/package/react-markdown-editor-lite this editor. for the most part its all right
also there's many more other choices like Facebook's draft.js. but i think above text editors will be better choice for your use case.
What is the easiest way to implement WYSWYG in react that can support formatting as what we have here on stackoverflow that we can easily format code blocks or even better as what we can see on medium site?
You can try Draft.js
Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
I have created an website/application using Angular2. The infrastructure is all set, I have routing completed, sass being processed etc.
I have sections (components) on this website that will display current web standards for our designs (buttons, forms, copy). The purpose of this site is to give our developers a copy/paste solution for markup and sass.
We will most likely create our own css library but they will still need a good visual reference of what each class does and a copy/paste solution.
I know how to develop all the standards, what I don't know how to do is have the DOM display options for the user to copy/paste the code. I could manually enter the code into or tags but this will be hard to maintain and not very clean approach. I'd like to find some solution that will utilize my code and create these tags at run time.
Googling this question leads down the road of using living style guide generators, which i don't want to use... why? I like having the functionality of controlling my own layout and scaling my standards as I see fit with our own technology.
Any ideas?
After exploring this even further I ended circling yet again on documentation tools (KSS) where I would need to rebuild my entire style guide for this functionality using markdown and or JDOCs.
Solution!
Use CodePen, its free to signup however there are some nice to have features for a monthly fee. I easily created my code here using SASS, HTML and CSS libraries. CodePen has a great EMBED feature whereas I could copy/paste html or iframe right to my styleguide.
Problem is now solved, and we have have a dynamic Web & UI Styleguide.
Hope this method helps others in my situation.
I'm just starting out looking at Composite C1. I installed the Open Cph Starter site, and I've seen how to edit, navigate, etc.
Under Media Archive I created a new folder and added my images. Is there a way to direct the Bootstrap Carousel to cycle through the images in my new folder rather then the Sample Media folder?
Composite's available documentation is pretty thorough and helpful. I would highly recommend that you read through it all as it will give you a much better idea of how to best use the Composite CMS. It's a fantastic piece of software with amazing capabilities at customisation and extension, but without knowledge on these topics you may fall short on attempting implementations.
The specific piece of functionality you are targeting is called 'Functions' within Composite. The Carousel you are talking about is most likely implemented using a 'Function'. To change the target folder for the 'Function' you would have to open up the Composite Admin interface, edit your page, and then double click on the 'Carousel Function'. This should display a 'popup' function box editor, with which you can change the target folder selection.
Again this is the basic functionality of Composite described in their documentation. You can view the documentation for functions here: http://docs.composite.net/Functions
I would highly recommend that you read through all their basic user level documentation.
We are working on a Mind map based webapp as our final year college project. It will be a website where users will be able to create mind maps collaboratively. The user interface will be very similar to what https://bubbl.us/beta/ and hxxp://www.mindmeister.com/ have.
In a nutshell, the users will have access to whiteboard and drawing tools to create mind maps on a whiteboard. The changes made by one user will be visible to other session users. e.g. A session has three users A, B and C. If A changes mind map, it will be visible on whiteboards of B and C.
We were considering Flex, Openlaszlo few days ago but having limited time (about 3 months) for project completion, we binned those. For Flex we will have to learn Actionscript3 and for Openlaszlo there is no IDE support. So both of them won't be good choices.
We have shortlisted Silverlight and Vaadin frameworks as viable choices but we are confused as we don't have any experience with either of them. We need to take these points into consideration while selecting a framework:
Time frame for project - about 3 months, give or take 2-3 weeks
Learning curve for framework - should be easy (Very relative term indeed..In the context, we are familiar with VB6, PHP, Javascript and Core Java)
Necessary graphics related features supported - such as whiteboard, drag-drop widgets, animations(need not be fancy stuff) etc.
Availability of tutorials and good documentation
There are 2 open source mind mapping applications that can be useful for this webapp.
Silverlight - hxxp://silverdraw.codeplex.com/ (a webapp) - More like a POC design.
Java - hxxp://www.xmind.net/ (a desktop app) - Most of the mindmapping features we need are present. If we use Vaadin, we can re-use some code which is a huge plus point.
We are open to other suitable frameworks. Which framework would you choose?
P.S.: Excuse for obscure URLs'. New users are limited to only one hyperlink.
Disclaimer: I'm a member of the Vaadin Team, and do not know Silverlight very well.
I believe both Silverlight and Vaadin would be good candidates for your application, and for both the biggest challenge will be the client-side implementation of the visual mind-map component.
I took a quick look at XMind and it seems to be Swing based, so I'm afraid that the only way to re-use that would be to wrap the mapping component into an applet. You can easily do this with Vaadin, but it will require the Java plugin in the browser.
If you consider implementing the mindmap component without plugins, you have the following options:
Use the Vaadin core components (eg. the Tree, live example here) to visualize the mind map. Vaadin supports drag & drop, so this would be very fast to implement, and you would need to work with only server side Java stuff.
Create a HTML5 component with Vaadin integration for the mind-map. You can do this with the HTML5 canvas, and wrapping it in a Vaadin component is easy, but it'll require that you code the component with GWT. There are several examples on how to manipulate the canvas with Vaadin and GWT.
Create a SVG component with Vaadin integration for the mind-map. As far as I know SVG supports interactive stuff a little better than Canvas, and there are examples on how to interact with SVG using GWT and Vaadin. Note that the support for SVG is lacking especially with the older IE versions.
All of these options are feasible to implement within your timeframe (depending on what extra functionality you want). The first option is by far the easiest to do, but it might not be fancy enough for your requirements.
We have strived to make Vaadin as easy to learn and use as possible, and I daresay that our documentation is very good. In addition we have a very lively community filled with helpful experts. If you need more information on Vaadin just come over to our forums and we'll help you out.
You are kind off answering your own question. Use vaadin it will be a little extra work but then your saving huge amount of time on the mindmap coding.