Open Javascript code in editor on click - javascript

I am trying to create an interactive tutorial for learning an API. I've been googling my options for an entire day now. I came across ace, code mirror etc. but I'm not sure how I can use them in my case.
What I wish to do is that when the user clicks a button, a javascript code linked to it should open up in an editor on the same webpage. This would aid the users to see how the code is working and give them scope to modify and learn.
I know its not a constructive question but any help is appreciated! Thanks!

you can just wantch here how it is done
They made it with knockout MVVM but you can use angular or anything else you like.

I used tags to store my code and displayed it using codemirror's setValue property mentioned by #georg.

Related

Add View Source Code Button

Is there any way to add view source code button to quilljs editor?
I looked into the documentation and no explanation for this or should be developed by the developer.
Any help will be appreciated.
Thanks
I haven't extensively looked at the api but I think you are best off rolling your own button. It seems quill.js allows you to add your own custom toolbars to the documentation. I would look at this page to do that. http://quilljs.com/docs/modules/toolbar/
You can add an on click on the button that simply gets the editor's html and puts it in an element using this. var html = editor.getHTML(); http://quilljs.com/docs/api/#quillprototypegethtml
Sorry to be brief, but if you need more info on how you can comment below.

KNockout JS - Loading external templates

Hi folks I am building a CRUD system very similar to this example http://jsfiddle.net/rniemeyer/WpnTU/.
Context:
I have several HTML pages that each contain the same table of data but showing different information (each page have their diffirent use).
On each row theres an edit button like yuo see in the example. Since the modal form is the same accross all the HTML pages I decided to create one HTML page containing the modal form. I then use jquerys load function like so $("#load_modal").load("pages/modal_form.html"); on each of the HTML pages.
Problem:
On a basic HTML page this is working out great. I tought this was a brilliant approach and gave myself a pat on the back. But now the problem I have is that when started implementing knockout it dosent seems to be working together very well. Modal dosent always pop up correctly and such.
My question:
At this point im not looking to figure out my code issue. I spent days and weeks staring at it and I came to the conclusion that I need to rethink my approach altogether. Im curios to hear some of your opnions on what would be the best aproach to tackle something like this.
Ideas so far:
I found this https://github.com/rniemeyer/knockout-amd-helpers/tree/master/examples But dosent use the latest knockout version and seems more complicated for something simple I need.
I also saw that using requireJS would be another idea but honestly these seem to complicate things for me.
Would anyone know of a simpler template solution or even have a whole different approach to this?
Using jQuery to modify your DOM is not going to work well in Knockout. You can use components to define the form HTML. Use an observable to switch which component is displayed.

How to filter in CKEditor?

How are you guys doing?
I am recently doing applying CKEditor to my corp's editor.
It's been great though I've got stuck in some problem.
I expect it to be the best even when we paste other contents from web or Word, but What blocks me doing is something kind of inline style tag, such as 'p style....' since it won't take its style away that my viewer doesn't seem to keep the same form.
I found out that filter.js would be the perfect solution for it. But there doesn't seem to be any way I can handle in my IDE since it doesn't exist.
How can I find a file called 'filter.js' or other plug-in so that I can handle the other way. this is the URL which would be help.
http://docs.ckeditor.com/source/filter.html#CKEDITOR-filter
Thanks.
Do I have to make new file called filter.js so I can edit on my own.
So confused. Hope to get some nice solution to it. Thanks.
CKEditor has a robust content filtering system called ACF (Advanced Content Filter). Read more about it here: http://docs.ckeditor.com/#!/guide/dev_acf and see the samples here: http://sdk.ckeditor.com/samples/acf.html. It's highly flexible so you can customize it to your needs.

Create a Custom Control using Javascript

I've been trying to do some research into this, but I haven't yet found anything related to this, so I've come here in hopes that someone might be able to point me in the right direction.
Is there any way at all that we can create our own HTML Elements?
I've seen a Custom ComboBox that was created using Javascript months back, but cannot find it anymore.
Basically, I'd like to create my own 'Control', that I can use for my pages. Maybe something that can be just 'plugged in' (although not a requirement). Any thoughts/ideas/advice/links?
Any help is really appreciated. Thank you!
If you want to write a JQuery plug-in but don't know where to start, have a look at this site: http://stefangabos.ro/jquery/jquery-plugin-boilerplate
He's written a boilerplate code for a jquery plug-in, with plenty of comments explaining what to do and how to expand it. It should make a good starting point for you.

What are some good pop-up dialog boxes for Ruby on Rails

I want to use modal pop-up windows in our web app in Ruby on Rails. Note that I don't want to create a new browser window, but a sub-window inside the existing webpage. We've tried things like TinyBox, but there are issues with returning error information from inside the controller. Any good method or tool that works well in ruby?
There's also prototype-window.
I've never used it myself (not yet at least) but have you tried RedBox?
I'm investigating ModalBox at the moment and it's looking promising.
There's a Google Group and Rails plugin which replaces the basic confirm popup with a modal dialog box.
Try TopUp! It is developed in a Rails application and you can get it from GitHub.
Please note that it is still beta. Feedback is always welcome ;)
Facebox, jquery, that Github use is the best one. There is also a prototype version.
I've used Lightbox Gone Wild for a while now, though I've modified it to display a DIV or other element that's already on the page (though hidden) and then return it to it's parent when the box is closed. I've used it make make Wizards that guide the user through a process.
I've used facebox_render for all my rails projects. It's really easy to use and provided complete helper. You can easily render html or javascript in your RESTful controller.
I have tried several of the ones mentioned above but after twiking it a bit I found that http://www.methods.co.nz/popup/popup.html works better for me, the only problem is that you have create an error routing similar to the one Rails uses, when returning to the popup window with errors the pop up window does not have a way to handle it

Categories