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
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 am running laravel backpack 3.4 and created a custom select2 fieldtype from the standard one, I am now trying to based on an onchange event change the value selected on another select options but no change is happening
This is the field declararion
<select onchange="updateunit(this, '{{$field['name']}}' )" id="{{$field['name']}}_<% $index %>" data-index="<% $index %>"
ng-model="item.{{ $field['name'] }}"
[ngValue]="value"
#include('crud::inc.field_attributes', ['default_class' => 'form-control select2'])
>
<option value="">-</option>
#if (isset($field['model']))
#foreach ($field['model']::all() as $connected_entity_entry)
<option value="{{ $connected_entity_entry->getKey() }}"
>{{ $connected_entity_entry->{$field['attribute']} }}</option>
#endforeach
#endif
</select>
And this is the way I am trying to modify the select field selected option
function updateunit(object,name){
var fieldname;
fieldname = object.id;
fieldname = fieldname.replace('product_id','order_unit');
/* data:'_token = <?php echo csrf_token() ?>', */
$.ajax({
type:'POST',
url:'/getmsg',
data: {id:object.value},
async: false,
success:function(data) {
alert(fieldname);
alert(data.msg);
document.getElementById(fieldname).value = data.msg;
},
error:function(){alert('Unidade de Compra não está definida')},
});
This is not working, but I have not enough knowledge either on JS neither Angular to understand why this won't bind.
The elements that are created by your field configurations use the jquery select2 plugin to create a fancy select box. It does this by hiding the plain select element then displaying an html structure that builds the fancy dropdown etc in its place.
document.getElementById(fieldname).value = data.msg; will set the value of the hidden select field, but will not update the value shown by the plugin's fancy html dropdown.
To make the value that's display by the plugin change, we have to call .trigger('change') so the select element tells any listening javascript (ie the select2 plugin) that it's internal value has changed and the plugin should now update its display to match. ie, run this:
$('#'+fieldname).val(data.msg).trigger('change')
See more detailed documentation here
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 use ngJSTree first time.
I cannot see checkboxes. In Browser I see style as follows when examine html element:
<a class="jstree-anchor jstree-clicked" href="#" tabindex="-1" id="21_anchor">
<i class="jstree-icon jstree-checkbox" role="presentation"></i>...
Controller uses checkbox plugin:
plugins : ['types','themes', 'checkbox'],
checkbox : {
"override_ui": true,
"real_checkboxes": true,
"keep_selected_style" : false,
"visible": true
}
I use css from jstree.dist.themes.default.
JsTree should be easy to use.
Do I miss some part of configuration?
Problem was in my build environment. Just add file 32px.png to the same folder as the file style.css. Then it worked.
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.