Im looking to create an input field on a web application that is similar to the one we use here for posting questions, where you can put list items, make font bold/italic etc
Does anybody know here know of the code to do this? or could they point me in the right direction of code snippets/hints...ive tried using google chromes 'inspect element' function but cannot find the actual code behind it except that they have a class and id
The languages I can work with are JavaScript, HTML, CSS, VBScript. Ideally I wouldnt want to abstract from these languages at this time if possible.
Stack Exchange uses Markdown, a WYSIWYM (What you see is what you mean) markup language. The original implementation is in Perl, although ports to many other server-side languages are also available.
The editor you're looking at is a modified version of wmd, combined with showdown.js, a JavaScript implementation of the original Markdown language that allows client-side rendering of Markdown text into HTML which allows you to see the preview when writing and editing posts here.
Related
I am working with a web project where I have full control on the "client web page" (I can add or modify HTML / CSS / JS)
The content management system is, however, not under our control. That CMS exposes one text box where I can input some description text that will be displayed on client web page but does html sanitization which remove all html tags. This prevent me from styling my text field.
Basically
<h2 class="red-text">Some Text I Wanna Style</h2>
Become just Some Text I Wanna Style
I trust that there is some way around this as I have full access to the client side which means I can implement my own "markup system" like BBCode?
[b]bolded text[/b]
Where I can find the tag and use JS to transform it to appropriate CSS class.
My question is that: Am I approaching this issue the correct way? Is there any standard/common method/library to solve this kind of problem?
Edit: I do not have access to the server side, only the client side
If you're only using light markup, then try using Markdown! Its ridiculously popular and has a million libraries in every language conceivable (most of all JS).
Almost certainly the easiest thing to use, given the simplicity of the libraries that exist for it. If its suitable for this project, I highly recommend it :)
I imagine that some libraries support extending the syntax with your own, custom rules too!
I'm willing to make an easy to use web-interfaced report builder. Basically, I would be like a big html form with some custom logic (if you check this box then that part of the form appears/disappears), uploading of images and rich text (bold, italic, colors). The user should be able to extract a pdf (that might be either server or client rendered). Some parts of the page should appear in the final pdf, some not. I need to control the page-breaks.
I could build a totally custom web-page for that and plug the result in a custom template in PDFjs, but I was curious if some solutions already exist for this problem. I've looked into jsreport and it's nice, but it is too complicated for my users to edit html directly. I would need more of a wrapper with simple fields. PDF forms, on the other end of the spectrum, are too rigid (an frankly, a pain to deal with) for my use-case.
To me, it feels like this problem is common enough, and should appear in enough companies that some rich template solution (or at least, general approach) might exist somewhere. Are you aware of such solution ? If not, what general tools would you use ? (PDFjs, Prosemirror, ..)
Thanks for your help !
I'm developing a Rails web app using the contentEditable feature of HTML 5, in the style of Google Docs and others. This works well for simple typing, but breaks whenever the user tries to paste text from Word or another webpage. The resulting HTML will be littered with style attributes and will look like it was literally cut and pasted from the source.
I need to filter the HTML some way. This can be done client-side, giving a smooth interface for the user where pasted material fits instantly into my app's style.
Of course, the user can override my filtering. So to protect myself fully from tag soup hell, I would need to perform the same filtering again, server-side. This is similar to the form validation problem.
I don't want to duplicate the filtering logic in both jQuery (client-side) and Ruby (server-side) but I don't know if there's any good way to avoid it. So far I have identified two possibilities:
Implement all filtering server-side, access it from the client by AJAX. This will put a heavy load on the server.
Implement filtering fully in JS, run on client and on server through Node.js. I don't know if there is enough similarity between the two platforms to implement a shared filtering routine. Libraries like Cheerio look promising though.
Has anyone solved a similar problem before? I would appreciate any guidance to keep my app as DRY as possible.
I'm looking for a FOSS Javascript widget which allows you to add/remove search criteria using a GUI.
My basis is the search criteria in Mac OS X Finder, but I know I've seen similar systems elsewhere:
alt text http://img714.imageshack.us/img714/579/screenshot20100429at805.png
The basic idea is that each row corresponds to one field in your database, and depending on the type of that field you would get different search options when you select it. You click the + and - buttons to add or remove fields.
Anybody aware of something like this that's already out there? Preferably written to work with YUI, but I don't mind transliterating from a JQuery or Dojo widget.
#lukecyca asked me to post a link to my implementation. This was written for an open source (GPL) project sponsored by a company that I no longer work for, so I can't guarantee that these links will stay up, but here goes.
The source code is currently on BitBucket. There's a client side (Javascript) library that is probably what you're most interested in, but there's also a server side (PHP) component that may be useful. It's pretty messy code (tightly coupled and really rushed), so I'm not sure it will even be useful, but there is a bit of documentation to help explain it. It's also been modified quite a bit since I left.
There's a demo server that's usually running if you want to see it in action. Please note that the username and password for the demo are listed on that page.
I've got page to edit some html code from db, to do that I use openwysiwig http://www.openwebware.com/wysiwyg/demo.shtml which hosts over textarea, functions implemented in editor to insert images and hyperlinks aren't quite suitable for me, so I need to find some piece of code which help me to change/insert text to that area from outside the editor itself.
I've tried to find a solution but I could't find anything valuable; I've only learned that openwysiwig creates iframe over host textarea or something like that; besides that nothing what would solve my problem.
Dunno why FCKEditor got down~voted but it most certainly can do what you need. It has a very usable javascript API which allows you to insert elements into the editor area fairly easily. it integrates well with a wide variety of server tech also and includes a well designed plugin architecture for expansion. Has a lot of support and sample code, and I've used it in tricky ajax-driven environments and am very happy with its capabilities. I can't find any usable Javascript api documents for openwysiwyg. You should be able to get FCK up and running in under an hour I would think
This isn't very helpful perhaps, but something like tinymce or fckeditor is much better documented. I suggest changing.