I need a plugin to replicate the functionality I've been enjoying using magicSuggest.
I have found many autocomplete plugins for Vue but none that come bundled with tags.
Try any of the examples on this page to see how your selection is saved as a tag in the input.
http://nicolasbize.com/magicsuggest/examples.html
I am after a plugin that will work with Vue js 2.0
I found this gem, looks like a keeper. http://monterail.github.io/vue-multiselect/
You can also check dropdown provided by semantic-ui here, This can be easily integrated with VueJS.
Also discovered this one, http://sagalbot.github.io/vue-select/
Looks very similar to vue-multiselect.
Try this vue-multiselect. Its supporting many options like tagging, search, multiple select, single select, asynchronous search, vuex and more.
https://github.com/shentao/vue-multiselect
npm install vue-multiselect --save
<script src="https://unpkg.com/vue-multiselect#2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.0/dist/vue-multiselect.min.css">
Related
i'm trying to add <script> ... </script> to HTML element in Neos CMS, could you please tell me how to do it, because HTML element in Neos CMS doesn't accept js. Is there any alternative how to do it please. Thanks for any recommendations.
There is a package available with wich the editor can add source code like that. But be careful with this feature as with great power (of the editor) comes great responsibility!
Depending on what your use case is, it may be more secure to provide a custom NodeType for the editor which then adds this JS code via fusion.
One thing you may want to think about is loading things from external sources might be problematic for GDPR compliance.
I am working with the Hybris CMS Cockpit (only as a user, not an admin) and I have built a page with the content slots.
However I am trying to insert some JavaScript into the page. I cannot see where I am mean't to add the JavaScript and I tried in-line <script> tags but they just get stripped out and turned to plain text.
Does anyone know if this is possible or will I have to ask an admin of the system to enable something?
You can add javascript but you will have to have a developer make some overrides to the configuration files (local.properties) of the environments you want to add javascript in.
The settings are:
xss.filter.rule.script_fragments=
xss.filter.rule.lonely_script_tags=
xss.filter.rule.lonely_script_tags2=
xss.filter.rule.javascript=
By doing this, the system will no longer strip those tags :)
Typhoid Marty is correct, however to expand on his answer:
The Hybris Cross Site Scripting (XSS) filter is stripping out your script tags.
You will probably want to simply disable it for the extensions where your users will be editing the site, specifically the CMSCockpit, HMC and HAC:
hac.xss.filter.enabled=false
hmc.xss.filter.enabled=false
cmscockpit.xss.filter.enabled=false
You can find more configuration options for the XSS filter in the documentation here:
https://wiki.hybris.com/display/release5/Web+Security+XSS+Filter
Answers suggested by #Typhoid Marty and #kabadisha will fix the issue. Adding another workaround here. script can be added into content of component even if xss filter is configured as xss.filter.enabled=true.
This can be achieved by creating an impex for component and importing it via hac as a script with 'Enable code execution' check as true.
Here's an example :
<script type="text/javascript">
function myFunction()
{
document.body.style.backgroundColor="lavender";
<!-- document.write(Date()); -->
alert(document.getElementById("hai"));
}
</script>
In fact, Hybris cockpit use ZK framework, views are ".zul" files.
I know Orchard contains a built-in set of options for TinyMCE with uploading media, but is there an equivalent for just uploading standard documents that is similar so users can link to them in the editor?
Have you tried TinyMCE Deluxe?
http://gallery.orchardproject.net/List/Modules/Orchard.Module.TinyMceDeluxe
You can use any of the official pluggins
You can use TinyMceDeluxe, as mentioned, which lets you use TinyMCE plugins. Then, you can use a TinyMCE plugin to get the functionality you need. Here are some of the options that I'm aware of:
MCFileManager
TinyBrowser
Ajax file/image manager
PDW File Browser
Is it possible to change Github's gists default styles programmatically or through some interface?
I don't know of any API or interface influencing the way gist are presented on GitHub.
If you include those gist in your blog, then of course some CSS local changes can make your gist different, as illustrated by this blog post, this CSS or this CSS.
However, this doesn't concern syntax highlighting.
You can only share those Gist with a custom stylesheet through, for instance Octopress, using a Sass port of Solarized syntax highlighting.
But again, that won't change those gist presentation on GitHub itself.
May i am late at party, but you can create your own CSS by editing the default one it with the color you want. I have done something same but instead of pasting all the css in the blog i prefer to link it
See if this works for you
<link href="https://cdn.rawgit.com/Killercodes/281792c423a4fe5544d9a8d36a4430f2/raw/36c2eb3e0c44133880485a143717bda9d180f2c1/GistDarkCode.css" rel="stylesheet" type="text/css">
You can also find it here: GistDarkCode.css I made it look all black
Edit:
I figured out that the markdown (*.md) documents are where still white this has been fixed in this new version 0.3.0 also the font size is increased to 14px to make it look bigger, try the new one below
<link href="https://cdn.rawgit.com/Killercodes/281792c423a4fe5544d9a8d36a4430f2/raw/42e5b91a60ea5e25b7bb42c0a315d9e740c92f0/GistDarkCode.css" rel="stylesheet" type="text/css">
For embedded Gists there is Pretty Gist
Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists.
Github repo
Yes there are different properties to control the default css of GitHub gist. I did various customizations in this project and made sure I define the properties after the embedded js - https://github.com/tebelorg/TA.Gist (PHP template that displays your GitHub gists as blog posts)
I am trying to figure out if there is a way to use LESS or SCSS without having to save the document or refresh the browser. At the moment I use CSS Edit which is great for live previews but I cant find a way to get the live previewing to work with LESS or SCSS. My ideal situation would be to get a truely live (or as close to) setup working with Textmate and my broswer. I have looked at a few options, WebPutty is great but it's in Beta and web based so I'd love a solution that could fit into my existing workflow.
Many thanks
This might be what you're looking for: livereload.com
I only just found this myself while Googling for the same problem, Haa!
It's currently only for 64-bit Macs. Its also in beta..
Windows version under dev.
Can't seem to find a link to the v1 that is mentioned on the site?
If you're using static files you can use this code taken from http://f.cl.ly/items/0y2G351r3O3T3j1b401u/Live-LESS-previewing-in-Espresso.html
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
However, if you are using localhost, I've not figured out how to get this to work yet.
Check out EDGE. http://getedge.io - it let's you live edit Sass and LESS files from Sublime Text or Textmate. No need to save the file - it updates as you type. You can sign up for the private beta right now.
There is no complete solution for what you are looking.
Chrome dev tools (with sass source maps enabled) is your best bet but I don't think you can do mixins
http://livestyle.emmet.io/ is another option you might want to try
Brackets works well with live changes but applies only for chrome
Here's what I do and it serves the purpose and works like a charm in mac/pc and linux
Have one terminal open that does sass --watch
Have another terminal/app that lets you run live-reload
Your sass will compile and as soon as your stylesheet changes all your browsers get refreshed
But you can't do style injection with this, meaning the page WILL refresh (if you want to theme dialogs, you will have to open them again) But there are other tools available for style injection as well
Hope this helps!
live.js is your solution :)
It doesn't not only work with html, js, css but also less.
You have to trick it with filetype of css:
<link rel="stylesheet/less" type="text/css" href="stylesheets/main.less.css">
Tried the bookmark version on rails local server. Works a breeze!
CssRefresh
My co-worker and I whipped up http://less2css.org the other day. Allows you to choose the version and see your less converted in realtime.
Hope it helps someone.
I think there is no such add-on right now, but I'm also a fan of Live CSS Editor (if that's what you meant by CSS Edit).
I think it would be useful to have something similar with SASS or LESS support, so I made a quick prototype for such Chrome add-on (analogue to Live CSS Editor). It includes syntax highlighting and LESS support with use of client-side LESS library. It's not user-friendly yet so not a candidate to the Chrome Store, but here is it's Google Code Project where it can be downloaded and loaded into Chrome as unpacked extension. I'll try to improve it over time, but anyone else can try too ;)
Screenshots and a bit more are in this blog post.