I'm looking for a js text edit toolbar, which allows for customization of base functions.
The best example is: Our platform employs a custom text parsing engine, and we use custom tags. Custom tags, even for basics like bold, etc. Therefore, I will need to change existing base formatting buttons to use our tags as opposed to html.
I have not been able to locate a solution, which allows the customization of these basic buttons. I can, of course use something mainstream, and rebuild all the base functionality in custom buttons. However, before doing that, I want to make sure there is not something already available.
Do you know of a solution which supports low level customization?
You can have look at this one: https://github.com/bergie/hallo
Related
Is it possible to have multi-line in select option value
In the multi line option I would like show first line in bold and rest of lines in regular font.
Is there any possible approach using HTML/CSS and Java script or
Do we have any library in React which can achieve the above
It is not possible with current support of the select tag in current HTML version. The only possible solution here is to use a custom made solution, both vanilla CSS or javascript options are available, and you have plenty of techniques to choose from.
Whenever I found myself in a need of creating a custom solution I like to look for inspiration in this article:
https://tympanus.net/Development/SelectInspiration/index.html
Once you decide to go with custom made solution it is always a good practise to implement at least basic Screen Reader support.
A good place to start: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Best_practices
From my experience in business projects I usually prefer to go with JS powered solution, especially in such where frontend is changing a lot. My favourite here: https://select2.org/ which is both easy to customize and powerful enough to meet even the most challenging requirements, and you can't forget about really good docs.
As I can see you included a reactjs tag in your question, so if you are planning to create a react solution I would go with:
http://jedwatson.github.io/react-select/
which is pretty similar in functionality to Select2
I would like to offer my users the ability to customize the look and feel of the website.
I am giving them a color picker to choose a color scheme. I would like to dynamically generate few matching colors and apply them.
My questions are:
1.) How can i generate a color scheme based on the choosen color ? (some matching colors and contrasting colors for the background)
2.) What are the best practices for achieving a themable interface ?
I am writing an AngularJS SPA app with pure HTML with REST API as backend.
Right now for my 2nd question, I am retrieving the color setting and applying them for body.
<body style="background:color:{{bgcolor}}; color:{{fgcolor}}">
I am looking for something more elegant.
You can do this with ngStyle as you have above... but as you noted, it's not very elegant.
The simple truth is that nothing in AngularJS itself is really designed to address this problem other than the ngStyle directive itself. However, while I haven't exactly seen a "best practice" for this, you might take some ideas from Drupal's "Color" module, which is one of its base/core modules. You can do the same thing in Angular very easily.
What this does is go back to stylesheets, which I'm assuming you skipped over because it didn't seem like an obvious solution for something dynamic. But they have a clever answer. In a piece of code, after the user picks a color, they write out a stylesheet with a unique ID for its filename. They put these in a directory where other user-uploaded assets are kept, so they don't mix with core site code (minimize the potential attack vector). Then they only need a simple rule in the page to include the stylesheet itself.
You can easily emulate all of this with Angular, although you'll need your server's help, of course. But the nice thing about it is it's much easier for you to maintain. Instead of having to "sprinkle" ngStyle directives all over the place (one on everything you want styled) and potentially having conflicts with other things you want to do on some of those elements, the stylesheet can work exactly the way it's supposed to: using classes to target specific elements. You can make a template stylesheet that's easy to maintain, so that's a natural fit... and the best part is, it's easy to hook everything up.
I'm looking for a javascript/css tooltip that can do the following:
Shows up when you hover over some page element (such as a help icon.)
Repositions itself based on the browser window (for example if it's on the far right of the page, it will show itself to the left of the page element, otherwise it'll show to the right of it. That way it won't go off of the page.)
You can hover over the tooltip and it won't disappear. This way you can select text or click on a hyperlink within the tooltip.
I'm using dojo but their dijit tooltip seems to be very inflexible, as it can only spawn off of another dijit element, most commonly a dijit button. I'd rather not having to reference a whole other javascript framework like jquery or prototype so hopefully someone has a way to do this using just one basic script.
Unfortunately for you, the tooltip style plugins available for Dojo are nowhere near the other frameworks (namely: jQuery). Because of this, you have three options:
Reinvent the wheel. Take what you learned from other tooltip scripts and build your own from scratch. This option takes the longest development time (and in the inevitable maintenance of cross-browser bugs).
Extend an existing plugin. You can take a current tooltip plugin for dojo (or perhaps a library agnostic plugin) and extend its functionality by adding your own scripts to it.
Use jQuery. This has already been said twice by others, but let me say it again. jQuery has a thriving plugin ecosystem, and if development/maintenance times are truly important to you, then jQuery should definitely be considered.
Again, assuming that you don't mind using jQuery (it's awesome!!) I played around with a few tooltips and found this one the best: http://flowplayer.org/tools/tooltip/index.html
Extensible with good documentation. Check out the 'position' config option and see if that does what you need.
Good luck!
If you do decide to use jQuery, qTip is a nice jQuery plugin that is very configurable and will probably meet your needs. http://craigsworks.com/projects/qtip/
I have been using several jQuery plugins, including jQuery TOOLS, Beauty Tips and Cluetip. I think all three meet your requirements.
If instead of a black box you want to know what's going on, I recommend this tutorial:
http://www.sohtanaka.com/web-design/simple-tooltip-w-jquery-css/
(and take a look at the comments section)
The dijit.Tooltip documentation gives two simple examples, the first attaching a tooltip to simple DOM nodes seems to meet your needs. The second happens to wire up the tooltip to another dijit-based widget (a button). Note that the property connectId takes a dom node reference or string id. Note that dijit may be used either programmatically or using a markup-based declaration.
Different tooltip implementations may have different functionality. Among other things, dijit.Tooltip provides ARIA accessibility for screen readers, keyboard access, bidi enablement, and automatic positioning around a node but within the boundaries of the screen.
I dont know whether I am reiventing the wheel.
I need to design an online WYSIWYG where users can make one/two/three-column layout page.The WYSIWYG should adjactly show the contents in design mode as well as preview mode.Therefore, the WYSIWYG should also have the supports for Header and Footer too.Therefore, the WYSIWYG will have at least three boxes(Header, Content,Footer) and in max it may contain six boxes.
IFRAME supports designmode (on/off) and it has content editable property and it also supported by most browsers. Though DIV also has the content editable properly in the latest browsers. Since there are many users who use IE6 still, probably choosing IFRAME is better(need your kind advice).
Now the question is whether I should use 6 IFrames or only one Ifrmae or no Iframe at all? Please suggest.
Thanks.
It sounds to me like you are trying to reinvent the wheel. You should be able to use one of the existing WYSIWYG editors with template support built-in. So I'd suggest you have a look at CKEditor, which probably has all the features you need.
Choose whatever existing editor that you like, but don't try to recreate one yourself, you'll become crazy.
I don't even know what do you understand as different between WYSIWYG and "Rich Text Editor", the main difference might be that no web-based editor can be really "What You Get", because there are lots of little problems.
Anyway, it seems that you want to create a page with one toolbar and several editing instances, I think that all the main editors does support that, but I would avoid using one based on a framework (YUI or Google closure) unless you are already using that framework.
Check instead the features of stand alone editors like CKEditor or TinyMCE. You'll hardly get anything better that those ones.
Don't reinvent the wheel! If you decide that you need to support designmode iframes as well as contenteditable, Google Closure Editor has a very performant implementation of multiple editing surfaces that only creates one iframe at a time.
I would look at YUI Editor from Yahoo, The YUI stuff does support a drag and drop column editing. I would say reuse in this case.
EDIT: Since you say you want to edit multiple areas per page you should also check out the YUI Editor's Multi edit example page
I was looking at what YUI had, http://developer.yahoo.com/yui/examples/button/btn_example07.html
Can anyone recommend a library/plugin they used to progressively enhance native select element dropdowns at the request of a client? I know it's impossible to style a dropdown in IE, so it's either this or Flash which I don't want to get into.
I'll still leave the regular dropdown in the source for non-JS users and serve the dropdown replica built out of non-form control elements.
Assuming you mean a different library than YUI, I like dojo's dijit.form.FilteringSelect.
Turns out it wasn't all that difficult, pretty much the same logic as a dropdown menu except with a little extra for the toggling bit.