Planning to use view helpers in my JMVC application. Tried to implement select_tag helper function in my ejs file but failed to obtain required results.
Below is the code
In Controller :
this.choice= [{value: 1, text: 'First Choice'},
{value: 2, text: 'Second Choice'} ];
this.element.html(initView({choice:this.choice}));
In Ejs file :
<%= select_tag('elementId', 1, this.choice) %>
Reference
https://code.google.com/p/embeddedjavascript/wiki/ViewHelpers
Do we need to steal any packages ? is there any sample code ?
To get access to the helpers I did three things...
I updated the first line of file jquerypp/view/helpers/helpers.js from:
steal('jquerypp/view/ejs').then(function($){
to
steal('jquerypp/view/ejs').then(function(){
I stole 'jquerypp/view/helpers' in the controller.
Finally, in the ejs instead of
<%= select_tag('elementId', 1, this.choice) %>
I used
<%== select_tag('elementId', 1, this.choice) %>
to force ejs to render the select block as part of the page instead of rendering an escaped quoted version.
I guess, you have to include this file: https://code.google.com/p/embeddedjavascript/source/browse/trunk/src/view.js
There are all helpers. So steal it :)
Related
I am using TailwindCSS with TWIG files. The purgecss works fine inside CSS files and also inside "normal" markup like
<div class="font-bold text-blue"></div>
But we are developing mostly Drupal TWIG templates and a lot of our TWIG files setting classes to an attributes array. And the bellow doesn't work.
attributes.addClass(['font-bold', 'bg-blue']);
or
{% set classes = ['font-bold', color == 'blue' ? 'bg-blue'] %}
This is my purgecss configuration:
gulp.task(
"styles",
gulp.series("sass", function () {
const postcssimport = require("postcss-import");
return gulp
.src("src/styles.css")
.pipe(sass().on("error", sass.logError))
.pipe(
postcss([
postcssimport(),
tailwindcss("./tailwind.config.js"),
autoprefixer,
])
)
.pipe(
purgecss({
mode: "layers",
content: ["templates/**/*.twig", "src/scss/**/*.scss"],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
})
)
.pipe(gulp.dest("./css"));
})
);
Do you have any idea about this?
Thank you.
The TailwindCSS Intellisense plugin for VS code has an experimental setting that lets you set custom regex expressions that fire autocomplete. It's announced by the plugin's author here:
https://github.com/tailwindlabs/tailwindcss-intellisense/issues/129#issuecomment-735915659
I use these 2 regular expressions to activate autocomplete for {% set classes = [] } and <element{{ attributes.addClass() }}> respectively:
"tailwindCSS.experimental.classRegex": [
["classes =.+\\[([^\\]]*)\\]","'([^']*)'"],
["addClass\\(([^\\)]*)\\)","'([^']*)'"]
]
This goes into the main settings.json file for VS Code.
I'm using Tinymce 5.9.1 with template plugin.
I made a new template like this code with special css code :
templates: [
{title: 'green-box', description: 'box tiny green', content: '<div class="tiny-green-box"> Content </div><div class="p-1"></div></br>'},],
It works when edit content in one line. when i want to put multiple line there is a problem.
Tinymce duplicates template for every new line.
for example if i type line1 and press ENTER it will create new div and result will be something like this :
you can see in html code it repeates many time :
putting content inside an extra <p></p> tag can solve this problem.
final code must be something like this :
templates: [
{
title: 'green-box',
description: 'box tiny green',
content: '<div class="tiny-green-box"><p> Content </p></div><div class="p-1"></div></br>'
}
,],
The result HTML code will be like this :
<div class="tiny-green-box">
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
</div>
Admins and editors on one of my sites wants to include some javascript embeds like twitter, facebook, instagram or whatever, on pages. I thought it would be really easy to just set the extended_valid_elements to allow the script tag in the html editor of tinyMCE, but it apparently doesn't work.
I've added this to my config
HtmlEditorConfig::get('cms')->setOption(
'extended_valid_elements',
'script[charset|defer|language|src|type|async]'
);
And I've checked that it's passed to the ssTinyMCEconfig variable in my dom.
So far so good. But when I try to post a simple script in to my HTML-editor, it strips it. Does anyone know how this can be fixed?
Thank you!
Rather than manage custom scripts through the TinyMCE editor we could add a text variable to $db to manage the custom scripts through a plain TextareaField.
The following code works for SilverStripe 3.4:
class Page extends SiteTree {
private static $db = array(
'CustomScript' => 'Text'
);
public function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab('Root.CustomScript',
TextareaField::create('CustomScript', 'Custom Script')
->setRows(30)
->addExtraClass('code')
->setAttribute('spellcheck', 'false'));
return $fields;
}
}
Here is some custom css for the CMS to make the script input fields display the text with a monospace font.
mysite/css/cms.css
.field.code textarea {
max-width: 100%;
font-family: "Courier New", Courier, monospace;
color: #000000;
background: #ffffff;
}
We enable the custom css in the cms with the following code in our config.yml file:
mysite/_config/config.yml
LeftAndMain:
extra_requirements_css:
- 'mysite/css/cms.css'
In our Page.ss template in the head tag, or at the bottom of the body tag, or whether we would like the custom script, we put the following to load our custom script:
<% if $CustomScript %>
$CustomScript.RAW
<% end_if %>
If we want site wide custom scripts we could also add this field to the Settings tab by extending our SiteConfig:
mysite/code/extensions/CustomSiteConfig.php
class CustomSiteConfig extends DataExtension {
private static $db = array(
'CustomScript' => 'Text'
);
public function updateCMSFields(FieldList $fields) {
$fields->addFieldToTab('Root.CustomScript',
TextareaField::create('CustomScript', 'Custom Script')
->setRows(30)
->addExtraClass('code')
->setAttribute('spellcheck', 'false'));
}
}
We enable this SiteConfig extension in our config.yml file:
mysite/_config/config.yml
SiteConfig:
extensions:
- CustomSiteConfig
In our Page.ss template in the head tag, or at the bottom of the body tag, we put the following to load our site wide custom script:
<% if $SiteConfig.CustomScript %>
$SiteConfig.CustomScript.RAW
<% end_if %>
I was able to get around the issue for Twitter embed by simply including the relevant script links in my header. This embedded the twitter-tweet blockquote code that I pasted into TimyMCE.
I am stuck here and would very much appreciate help. I have a form in a razor view with a input field for current city which looks like this:
#Html.LabelFor(x => x.UserModel.CurrentCity)
#Html.TextBoxFor(x => x.UserModel.CurrentCity, new { #data_bind = "value: UserModel.CurrentCity ", #class = "city", #data_val = "true", #data_val_required="City is required" })
#Html.ValidationMessageFor(x => x.UserModel.CurrentCity)
I want autocomplete for this field and am using jquery token input plugin for this like:
$(".city").tokenInput('#Url.Action("AutocompleteCity", "Settings")',{ minChars: 2, tokenLimit: 1, hintText: "Type in a city" });
$(".city").tokenInput("add", {name: viewModel.UserModel.CurrentCity()});
Everything works fine except the clientside unobtrusive validation. The form gets posted even if CurrentCity is empty.
I also tried to change the MVC helpers to plain html:
<input data-val="true" data-val-required="City is required" type="text" class="city" data-bind = "value: UserModel.CurrentCity, attr: { name: 'UserModel.CurrentCity', id: 'UserModel.CurrentCity'}" />
<span class="field-validation-valid" data-valmsg-for="UserModel.CurrentCity" data-valmsg-replace="true"></span>
This approach prevents the form from being submitted but the validation-error class is not injected into the span and the error message does not show up.
Any suggestions?
The original input element you created is hidden. You will likely need to enable validation of hidden elements: jquery.validate v. 1.9 ignores some hidden inputs or https://stackoverflow.com/a/13295938/173225.
I created an ArticleController to render a form with fields: title (text) and content (textarea), and everything works well until I add class="tinymce" to the textarea field in the template. then I get this error:
'An invalid form control with name='form[content]' is not focusable.'
I followed the documentation to add the 'class' attribute and the editor renders fine in the browser, its just when I submit the form I get the error.
Any ideas what could be causing this?
{{ form_errors(form) }}
{{ form_widget(form.title) }}
{{ form_widget(form.content, { 'attr': {'class': 'tinymce' }} ) }}
{{ form_rest(form) }}
<input type="submit" />
Apparently there is an issue with chrome regarding the attribute 'required = "true"'.
http://code.google.com/p/chromium/issues/detail?id=45640
I added 'formnovalidate = "true"' attribute to the submit button input field and it works fine
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor",
setup : function(ed) {
ed.onChange.add(function(ed, l) {
tinyMCE.activeEditor.getElement().value = tinyMCE.activeEditor.getContent();
});
}
});
I tried the suggestion from Musefan, and it only partly worked, but it got me experimenting.
Here's something that works for me. Tested on Firefox 10.0.1, IE9, and Chrome 17.
Where I'm setting tinyMCE.activeEditor.getElement().value = 'test' it can be any value other than ''. Not sure why that's true.
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "tinymce",
setup : function(ed)
{
// This is needed when the textarea is required for html5
ed.onInit.add(function(ed)
{
tinyMCE.activeEditor.getElement().value = 'test'
});
},
});
The error happens when the WYSIWYG hides your textarea but the textarea is set to required field. You can set 'required' => false on your content textarea control when you build the form in order to disable browser's required check.
$builder->add("content", "textarea", array('required' => false));
tinyMCE will normally update the contents of the hidden textarea during the onsubmit-Event.
This event, however, is not fired when html5-validation is used and any input is invalid.
Therefore you will never get an empty and required textarea with tinyMCE on top to validate correctly unless you enforce the textarea to be updated before html5-validation starts.
I built a workaround for this bug which hopefully will be merged into the original repo anytime soon: https://github.com/stfalcon/TinymceBundle/pull/19
Building on musefans's response above.
I came here because I'm using Simple Form, Twitter Bootstrap, and tinymce-rails. If you're using tinymce-rails this setup you need to edit the line noted in is answer to your tinymce.yml file. Your final file should look similar to this.
theme_advanced_toolbar_location: top
theme_advanced_toolbar_align: left
theme_advanced_statusbar_location: bottom
theme_advanced_buttons3_add:
- tablecontrols
- fullscreen
plugins:
- table
- fullscreen
mode:
- specific_textareas