Generally new to web design and watching some tutorials on creating some backend for a project, getting really tired of writing out the manually, I see youtubers do .classname and then the class with the div appears, but for some reason it isn't working for me? Any help would be appreciated.
Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.
Cheers.
Go to settings
Go to emmet under the Extensions section.
Click on 'Edit in settings.json'.
Write the following inside the 'emmet.includeLanguages' tag. Otherwise, paste the whole statement.
"emmet.includeLanguages": { "javascript":"javascriptreact" }
Save the settings.json file.
Those videos are likely using emmet. VS Code includes built-in support for emmet completions in html files. For example, typing .classname in an html file will trigger an emmet suggestion that expands to <div class="classname"></div> when you accept it
If you do not see this working:
Make sure the document is in the html language mode
Try manually triggering suggestions after .classname using ctrl+space
Make sure you have not disabled Emmet
I tried everything written in the answers but it wouldnt work, I had to do the following;
go to settings in the bottom left, search for 'emmet'
scroll down to and tick:
'Trigger expansions on Tab'
then it works by typing .divClassName + Tab
Check out this Cheat Sheet for VSC:
Cheat sheet for VSC
Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn't work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.
The above answers didn't help me because VS code already came with Emmet installed, but I was missing the information on how to actually trigger it.
For an html element
Type the element e.g. div, h1, whatever, then press tab to complete it
For a class
Type the class name beginning with a dot then press tab to complete it.
For example type .myclass and hit tab and you'll get <div class="myclass"></div>
Note: if your class has spaces, use a dot in place of the space (e.g. for "my great class", you should type ".my.great.class" and hit tab)
Source
This information is from here
Tried mentioned thing from emmet vs code document
go-to .vscode >> settings.json
add line "emmet.triggerExpansionOnTab": true
it worked for me for reference : Emmet in visual studio code
Is it possible to configure the toolbar buttons styleselect and fontsizeselect
to use custom icons rather than the default text they have? and if so how. all the examples I've come across so far involve defining your own custom button to add on, which seems like a lot just to replace some text with an icon.
One way you can change these is to use a language file for en_US and put replacements there. To make this work you need to do 2 things:
1 - Add a language configuration option to your init:
tinymce.init({
selector: '#myTextArea',
language: 'en_US', //Force custom translations of button/menu text in English.
...
});
2 - Add a en_US.js file to your langs folder within TinyMCE.
This file is where TinyMCE looks for language translations so if you tell TinyMCE explicitly to use the en_US language it will look in the langs folder for a JS file of the same name as the language. You can then put updated translations in that file:
tinymce.addI18n('en_US',{
"Formats": "Custom Formats Text",
"Font Sizes": "Custom Font Size Text"
});
To see all your options for what you can change just grab a language file from here: https://www.tinymce.com/download/language-packages/ The label on the left is the "key" and the value on the right is the "value". The "key" is effectively what you get in English when you don't include a reference to a language in the tinymce.init({}) call..
I want to change TinyMCE format buttons texts. i.e. "header1/2/3/..." or "paragraph".
Edit : found what I was looking for, I had to go to mytheme/inc/shortcodes/tinymce.php. Not sure if this file is a default one though.
I have a drupal site built by a freelancer, there are few things which were confusing.
When I click the edit button for a node, I see the CkEditor - I tried adding HTML tags and some css to tags. Then I saved it. I found few more changes have to be done, so I clicked the edit button on the respective node and I found the tags/css I added were missing.
Similarly I clicked the edit button for some other node and I did not do anything, I just clicked the save button. The output was completed distorted(because few css was missing and some tags were missing too).
P.S - Am very new to Drupal and this might be a basic question. Please bear with me.
Set the text filter to "Full html" then click on "source" to insert html tags and css. Otherwise (surely a better solution) install the Ace editor, a very useful module with a syntax highlighter for html, php, and more.
TinyMCE 3.5.8
I merely need to create a button (and module) that acquires a user-entered value from a popup and places it between two tags, e.g., [bib][/bib]
I am having trouble finding a "step-by-step" for doing this, including what files, where code goes, etc. This must be rather simple?
I have replaced all of the occurrences of "example" with my module name in the "Example" module, but that is where my information ends.
If someone would be so kind !
P.S.: It would be even better if the form field would javascript validate for "integer", but maybe I ask too much?
download the tinymce development version
use tiny_mce_dev.js instead of tinymce.js for developement in order to get more usefull error messages
create an own tinymce plugin (this is not that difficult) that opens a popup
get the content of a popup field
insert it at the right place in the editor
You should have a look at other tinymce plugins (in the plugins directory under the tiny_mce dir) to get to know how some things work. There are many plugins, some of them use popups.
I.E. the searchreplace popup