I have made my own plugin.I am using tinymce with it.Now, to specify the css file for tinymce we use content_css inside tinymce.init, but in my case i dont want to specify the css file path in tinymce file itself but want it to be looked up in my plugin.js file. How can i do that?
Done.Thought of sharing the solution here. In my plugin's js file which i have called plugin.js i have written
tinymce.PluginManager.add('matheditor', function(editor, url) {
function TinyMCEAdapter(){
var pluginPath = '../editor.html',
editOptions = null,
editedElementId = null;
editor.settings.content_css = '../themes/tangerine/css/equationeditor.css';
}}
here the parameter matheditor is the name of my plugin.We set the content_css for tinymce with the line
editor.settings.content_css = '../themes/tangerine/css/equationeditor.css';`
Check out this tutorial: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
You call loadjscssfile function as soon as your plugin is loaded.
Related
everyone.
The gravity form plugin is using standard File Input Element.
I can make it looks like the custom UI by adding custom css into File label tag and using the gform_field_content filter.
after that, how can I display the imputed file name like the following status?
as you see, the imputed filename Group 386.svg is showing.
how can I do this? or is there any other good way?
Regards
I found the solution myself.
I added the custom style to label by following this guide (W3 Custom File Upload
) https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp
after that, I added the js event to display the selected filename like the following.
// contat form, join us form
// customize file upload
jQuery(function () {
jQuery(document).on('gform_post_render', function () {
jQuery('.contact-form__form input[type=file], .join-us__form input[type=file]').on('change', function () {
const fileName = jQuery(this).val().split('\\').pop()
jQuery('label', jQuery(this).parent().parent()).html(fileName)
})
})
})
I have a next a method how compile and set in DOM my html:
export function initHTMLOperator(container) {
if (container.template) {
const template = SF.handlebars.compile(container.template);
const html = template(container);
const elem = document.getElementsByTagName(container.id)[0];
elem.innerHTML = html; // set compiled template
}
}
container.template has a template
container - it is object with variables for template.
After compilation I set html in DOM.
But i have a problem when changing input i recompile template and losing focus.
Is it possible to update a template in the DOM without innerHTML?
I mean update template but not set full html, only changes.
What you want is something like react and not handlebars then, you should use a virtual DOM and apply only changes, but handlebars doesn't provide such functionality. So no if you want your new template then you have to replace the whole content with something like innerHTML. But if the only problem is loosing your focus you can save it before replacing your content and reset the focus once the template has been replaced.
I am building a small module that replaces the default FileField in Silverstripe and changes it into a fancier upload (in the front end). I replace the class through the injector method in Yaml. This seems to be working all right.
However, I need to add some js and css that only has to be included when the specific field is used. I tried the forTemplate method and the constructor of the filefield class, but both do not result in the files being added to the html.
Is there a way to do this?
I am using SS 3.4
You can add requirements in the CMS by adding the following to your config.yml file, however this will add globally...
LeftAndMain:
extra_requirements_css:
- mymodule/css/mymodule.css
extra_requirements_javascript:
- mymodule/javascript/mymodule.js
Instead including the required source files just within the FormField constructor would include just when this field is shown...
Requirements::javascript("mymodule/javascript/mymodule.js");
Requirements::css('mymodule/css/mymodule.css');
You can also add code directly possibly including values from the PHP like this...
Requirements::customCSS('
#Form_FilterForm .field {
display:inline-block;
width:31%
}
');
Requirements::customScript('
jQuery(document).ready(function(){
//JS Code here
});
');
Or as above but it must be included in the header...
Requirements::insertHeadTags("
<style>
#Form_FilterForm .field {
display:inline-block;
width:31%
}
</style>
<script>
jQuery(document).ready(function(){
//JS Code here
});
</script>
");
I need to enable rowsPerPageOptions in documentLibrary paginator section.I found that paginator is configured in _setupHistoryManagers function in OOTB documentlist.js. so I have created documentlist-custom.js and overwrite entire function[_setupHistoryManagers] that exists in OOB documentlist.js and put it in my custom js file.it working fine.
But I want to know Is it the right way or Is there any way setting the adding this rowsPerPageOptions option in this.widgets.paginator function instead of copying whole _setupHistoryManagers function in custom js file?
using 4.2.2 version.
_setupHistoryManagers
{
// YUI Paginator definition
this.widgets.paginator = new YAHOO.widget.Paginator(
{
containers: [this.id + "-paginator", this.id + "-paginatorBottom"],
rowsPerPage: this.options.pageSize,
initialPage: this.currentPage,
rowsPerPageOptions: [25,50,75,100,500],
template: this.msg("pagination.template"),
pageReportTemplate: this.msg("pagination.template.page-report"),
previousPageLinkLabel: this.msg("pagination.previousPageLinkLabel"),
nextPageLinkLabel: this.msg("pagination.nextPageLinkLabel")
});
}
I understand that the target attribute of an <a> link cannot be specified by CSS. I would like to be able to generate external links in a Jekyll based markdown document with the following output:
the text
without resorting to something like this:
[the text](the url){:target"_blank" class="external"}
I don't want to hard-code the target in each link, because I might want to change it at some point, also it's noisy. So ideally I would have
[the text](the url){:class="external"}
...but then CSS cannot add the target="_blank".
So my idea would be a custom plugin that allows me to write
{% ext-link the-url the text %}
Does such a plugin exist? Are there better ways to achieve this?
When you need to do this on Github pagesand then cannot use plugins, you can do it with javascript :
// any link that is not part of the current domain is modified
(function() {
var links = document.links;
for (var i = 0, linksLength = links.length; i < linksLength; i++) {
// can also be
// links[i].hostname != 'subdomain.example.com'
if (links[i].hostname != window.location.hostname) {
links[i].target = '_blank';
links[i].className += ' externalLink';
}
}
})();
Inspired by this answer.
It seems writing a plugin is straight forward. This is what I have come up with:
module Jekyll
class ExtLinkTag < Liquid::Tag
#text = ''
#link = ''
def initialize(tag_name, markup, tokens)
if markup =~ /(.+)(\s+(https?:\S+))/i
#text = $1
#link = $3
end
super
end
def render(context)
output = super
"<a class='external' target='_blank' href='"+#link+"'>"+#text+"</a>"
end
end
end
Liquid::Template.register_tag('extlink', Jekyll::ExtLinkTag)
Example usage:
Exhibition at {% extlink Forum Stadtpark http://forum.mur.at %}.
HTML output:
<p>Exhibition at <a class="external" target="_blank" href="http://forum.mur.at">Forum Stadtpark</a>.</p>
There is a small Jekyll plugin to apply target="_blank", rel="nofollow", class names, and any other attributes of your choice to external links automatically:
Jekyll ExtLinks Plugin
A list of hosts to be skipped when applying rel can be configured if you want to keep some links untouched. This way, you don't have to mangle with Markdown anymore.
UPD: This plugin has been released to RubyGems now: jekyll-extlinks. Use gem install jekyll-extlinks to install it. Also available on GitHub.
My plugin can automatically force all external links to open in a new browser.
https://keith-mifsud.me/projects/jekyll-target-blank
And as of v1.1.0 you can also add optional extra CSS class names.