I'm going to add dir:left to code tags.
<code dir="left">my inline code </code>
i know from here how to add style to custom format but i need to add this attribute (not style) to all code tags
ok.i found it. just needed to create a new plugin for tinymce:
tinymce.PluginManager.add('stylebuttons', function (editor, url) {
....
onClick: function () {
....
tinymce.activeEditor.dom.setAttrib(tinyMCE.activeEditor.dom.select('code'), 'dir', 'left');
},
}
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 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>
");
<div id="divProductItems"></div>
above div will be filled with some html + angularjs elements later after an ajax call from a seperate js file. But angularjs codes are not working properly at the moment. how can I fix this problem
function getProductItems() {
var productSelected = $('#hdnSelectedProducts').val();
callActionWithJson("/Item/ProductItem", function (data) {
$("#divProductItems").html(data); // here I add the dynamic code to the above div and (data) contains the dynamic html + angularjs directives
filterProductItem();
}, null, "pricingLevelId", $("#ddlPricingLevel").val(), "searchItem", $("#txtSearchItem").val(), "productId", (productSelected.length != null ? productSelected : 0));
}
You will need to compile the html you are inserting into the <div> take a look at the $compile documentation - https://docs.angularjs.org/api/ng/service/$compile
Need to inject $compile in your controller.
$compile($('#divProductItems'))($scope);
i have create one html help page like CMS and stored in database.
<content>
Contact us
</content>
In html file write this code
{{{helpPage}}}
Is it possible call dynamicUrl in html right now in <a> tag show
Contact us
I think the issue is that you want to be able to parse Spacebars template tags from a template string? If so,
Add carlevans719:dynamic-templates, then change
{{{helpPage}}}
to:
{{Template.dynamic template=dynamicTemplate}}
And in your template helpers, add:
dynamicTemplate: function () {
var content = getContentFromDB();
var template = new DynamicTemplate(content);
return template.name;
}
See: https://atmospherejs.com/carlevans719/dynamic-templates
EPiServer only:
Our clients are trying to add custom attributes to a div-tag in the TinyMCE editor - they switch to HTML mode, makes the changes and save the page. Then the attributes are removed. Washing HTML like this is standard behaviour of TinyMCE, and it is possible to configure it to allow custom tag attributes.
My question is how do I configure TinyMCE in EPiServer to allow custom HTML attributes? I don't see where I would be able to hook into the inititialization of TinyMCE. And adding div to the list of "safe" tags in episerver.config doesn't see to work either (see uiSafeHtmlTags).
Example:
<div class="fb-like" data-href="http://oursite" data-send="false"></div>
Becomes just
<div class="fb-like"></div>
From the TinyMCE documentation, on how to add custom attributes to tags: http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements
I have this class
using EPiServer.Editor.TinyMCE;
namespace SomeNamespace
{
[TinyMCEPluginNonVisual(
AlwaysEnabled = true,
EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[src|frameborder=0|alt|title|width|height|align|name]' }")]
public class ExtendedValidElements { }
}
and this in episerver.config:
<episerver>
....
<tinyMCE mergedConfigurationProperties="valid_elements, extended_valid_elements, invalid_elements, valid_child_elements" />
</episerver>
in a recent project. It should work the same if you change the iframe part to div[data-href|data-send].
You have 2 options:
First
[TinyMCEPluginNonVisual(EditorInitConfigurationOptions = "{ extended_valid_elements: 'div[title|data-test]' }")]
will allow title and data-test in div tag.
div[*] will allow all attribute in div tag.
Second
make your TinyMCE plugin inherits from IDynamicConfigurationOptions
implement function like this:
public IDictionary<string, object> GetConfigurationOptions(){
var customSettings = new Dictionary<string, object>();
customSettings.Add("extended_valid_elements", "div[*]");
return customSettings;
}
No need to configure anything in .config file (with EPiServer's default value, they are all fine).
Here are some helpful links to this question
http://www.kloojed.com/2010/05/customize-the-tiny-mce-editor-options-in-episerver-cms-6
http://krompaco.nu/2010/05/alter-default-initoptions-for-tinymce-in-episerver-6/
http://world.episerver.com/Modules/Forum/Pages/thread.aspx?id=45795
The following worked for me:
[TinyMCEPluginNonVisual(AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'div[*]' }", PlugInName = "ExtendedValidElements", ServerSideOnly = true)]
public class TinyMceExtendedValidElements
{
}
No changes in config.