I was wondering how one could create something that resembles a textfield, but can contain html elements in it. For example, something like what Stackoverflow uses for tags on its "Ask Question" page. Can this be done this done using a particular plugin/library or does it need to be created from scratch?
I have seen some solutions using the "contenteditable" property, but I am worried about cross browser compatibility. In fact it would appear that the Stackoverflow example does not use this. I have tried searching for info on how to do this but haven't found anything. Would be grateful if someone could point me in the right direction.
You don't need to create it from scratch. Here is the one I use: TinyMCE
You might also find this useful. But you dont need to make a new one. There are a plenty of open source options available.
Related
After weeks of trying and testing to find a solution for my needs I admit that I still have no idea how I can solve this problem.
It sounds simple: I want that a user is able to mention things in a text area similar to twitter.
The problem is that I can't seem to manage it to make it work. Every browser has its own specialties which are coming into my way and break things. I have tried multiple different attempts but none of them worked even on a single browser completely.. mixing text and HTML appears to be incredibly hard to do.
So here I am. Asking you guys for any kind of help. Whether it's a library you can recommend me that is already doing what I need here, or if you did something similar and can tell me what exactly you did to make this work on multiply browsers.
My current solution looks something like this: Hitting # will insert a input text field into a div contenteditable everything is working nice so far unless the whole thing is the first element of a row. If the caret is also at position 0 and the user hits Enter, then something dies inside the browser which removes the whole input box without further notice or any events - at least not on Chrome. That was the most promising solution that I was able to come up with. Don't think I didn't try to save it by inserting e.g. a native Text with a zero-whitespace-character but that doesn't work either. It works better - but not completely.
I'm really frustrated by now and this is holding my whole project back which has this key feature that has to work properly - mainly because the information put there is going to be persisted as XML but that is a completely different story.
I really hope somebody can help me to get a solution for this. Bear in mind that I am actually using GWT 2.8.0 but I would not mind to use/wrap a JavaScript library at this point ..
I am trying to bind tagsinput with source option but it is not working. I am not understanding what I am missing there. Its a small code which I took from their official site http://www.jqueryscript.net/demo/Nice-Tags-Manager-Plugin-with-jQuery-Bootstrap-Bootstrap-Tags-Input/examples/. Also there is no error on console. fiddle
$(document).ready(function () {
$('#aa').tagsinput({
source:['ams','bms','lite']
})
});
This might not be the answer you are looking for but I feel that I must share my experience. I've tried A LOT of these third-party javascript tagging systems (including yours). Some didn't workedl; some did but some functionality was missing, etc. The solution that I've found to work best is selectize.js. It has most of the required functionality, here is some of it:
Add and remove items in any order without touching your mouse.
You can choose whether the user can create new tags or use only the ones you've provided for them
You can limit the count to your tags
It has a nice interface
It is fairly simple to use
I know this doesn't answer your question but I just feel obliged to tell you given the fact that I've wasted so much time searching for that kind of thing.
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.
I'm currently trying to fix a few bugs on a website that has been built by some guys.
The thing is, I'm having trouble seeing the point of a few things they've done.
The website has a <div> with an onclick="window.location='foobar'" and inside it an <a> tag. Both lead to the same place.
Is there a reason for that?
Thank you!
Some developers are better than others.
More importantly, developers are human and make mistakes. You've found one.
regarding why a developer would use <button onclick="location='somewhere'">, there's a lot of bad advice on the internet, even on stackoverflow, even by high rep users (not trying to pick on j08691, just making a point).
Additionally, button elements may not contain a elements per the specification, so a nested anchor is invalid.
With all that said, the page probably still works. The thing that makes HTML really powerful is its ability to fail gracefully. Instead of erroring out or preventing the entire page from working, the browser is able to make things work, even when the developer does something silly like writing invalid HTML.
I only see downsides:
The user can't use right-click copy link. It will just copy the javascript
Bots from search engines won't follow the link
Users that have javascript disabled can't navigate using that link
However if I understand you correctly, then there is <a href="foobar"> around it?
If that is true, then that would render the disadvantages I have listed above to not apply.
In this case the author of the website may have used this technique as some sort of a hack to style something on multiple browsers the same way...
There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.