I've download a plugin for tinymce editor for Joomla. I've pasted all files inside the plugin folder of tinymce under Joomla. After, the readme claims:
Then in the tinymce init function make sure you include the Bold lines.
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_toolbar_location : "top",
auto_resize:false,
extended_valid_elements: "textarea[name|class|cols|rows]",
remove_linebreaks : false,
width:720,
plugins : 'preview,codehighlighting',
theme_advanced_toolbar_align : "right",
theme_advanced_buttons1_add : " fontselect,fontsizeselect,zoom",
theme_advanced_buttons2_add : "preview,separator,forecolor,backcolor",
theme_advanced_buttons3_add_before : "tablecontrols, codehighlighting"
});
</script>
where do I need to paste that code?
The instructions are poorly written in the site you provided therefore I'm not too sure where you have to inset that code in your question.
I would personally use the Code Highlighter Joomla extension. We have used his on our site and it works like a charm.
You need to place this kind of code where your tinymce configaration is stored / read from.
To find out where this is - here is a tutorial with detailed explanations.
Related
I don't find this information in documentation: How to configure this button in contextmenu ?
Screenshot is from official website, so i guess is not impossible :)
To get that Open Link option to appear you need to do a couple of things:
Load the contextmenu plugin
Load the link plugin
Set the link_context_toolbar option to true (it is false by default as documented online https://www.tinymce.com/docs/plugins/link/#link_context_toolbar)
A minimal configuration for this would look like this:
tinymce.init({
selector: "textarea",
plugins: [
"contextmenu link"
],
toolbar: "link",
link_context_toolbar: true
});
Note: The link_context_toolbar option first existed in TinyMCE 4.5 so this won't work in older TinyMCE releases.
I'd like to have intellisense for bootstrap specifically but even for the css styles I write in my project. I've got references in a project.json and a bower.json but they do not seem to be making the references available.
You can install HTML CSS Support Extension.
ext install vscode-html-css
This will add Intellisense in your HTML files:
You don't need to configure anything for local files, just close and reopen vscode after installing. For remote css files, you can add the following
"css.styleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
in the settings.json
Here is the common steps (not only for Bootstrap) to enable css IntelliSense in VS Code:
Step 1: Go to https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
or https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion
(Installation steps are already there)
Step 2: Click Install button that appear on the top of the website (screenshot below)
Step 3: After click, browser will show a pop-up window to access VS Code. Open it with VS Code.
Step 4: Click again the "install" button that appear inside the VS Code.
Step 5: After restarting the software, click the bottom left icon shown in the below image:
Step 6: Press "ctrl+[space]" inside the class quotes, you will get the complete class names from the attached stylesheets.
In the latest version of VS Code the IntelliSense in comments and strings have been disabled by default. Below are the two options to bring back "24/7 IntelliSense" functionality or customize it to your own liking.
First make sure you have installed the HTML CSS Support Extension mentioned by dwonisch above.
Control + ',' to go to settings or click File -> Preferences -> Settings.
Click workspace settings tab and enter the following JSON code:
{
"editor.quickSuggestions": {
"comments": false, // <- no 24x7 IntelliSense in comments
"strings": true, // but in strings and the other parts of source files
"other": true
}
}
The other option is to hit ctrl + space within the CSS quotes to activate the intelliSense. Example:
<div class="(ctrl+space)"> </div>
just add this 2 packeges and you are done.. !!!
Just install this extension in VS Code.
IntelliSense for CSS class names in HTML
Unfortunately, this feature is not currently available in VS Code. However, it has been added as a feature request for upcoming updates. You can track the issue on Github.
Open Visual Studio Code.
Use CTRL+, to get to the Workspace Settings
At your Right side window you will see something like this:
Another words paste this URL
{
"folders": [
{
"path": "D:\\Visual Studio\\AndreyCourse\\the-complete-web-developer-in-2018\\DocumentObjectModel"
}
],
"settings": {
"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
}
}
Enjoy The Bootstrap Intellisense :-)
For React use install this extension in VS Code
1: install IntelliSense for CSS class names in HTML
but this extension works on class property as default so update the settings to work on className.
2: create a extensions.json file in .vscode folder and add the below object
{
"recommendations": [
"Zignd.html-css-class-completion",
"html-css-class-completion.JavaScriptLanguages"
]
}
"Zignd.html-css-class-completion" for class property
"html-css-class-completion.JavaScriptLanguages" for className property
I am using Latest version of VS Code 2022 1.72.2. I have installed below Extension all the HTML, CSS and Bootstrap intelligence working fine.
IntelliSense for CSS class names in HTML
Turn comments on if required in setting by pressing ctrl+,
"editor.quickSuggestions": {
"comments": true,
On the tinymce editor there is this code
// Theme options
"styleselect,formatselect,fontselect,fontsizeselect",
Are this select boxes
styleselect,formatselect,fontselect,fontsizeselect
part of a plugin or are they in a separate .js file.
I solved it this way.I opened
/var/www/tinymce/jscripts/tiny_mce/themes/advanced/editor_template.js
and i knew what advanced control was named for instance theme_advanced_blockformats:
This is the control with the block formats.To change their display names i put in this code
theme_advanced_blockformats : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
and it worked.
There is that topic on tinymce website on theme_advanced_styles which serves as an excellent example http://www.tinymce.com/wiki.php/Configuration:theme_advanced_styles
I am unfortunately lost, I am trying to install an image upload plugin to my tinyMCE editor and after some research I chose : http://justboil.me/tinymce-images-plugin/
I followed the instructions and added the folder to my tinyMCE plugin directory, configured my settings with the config.php file but when it comes to activating it and adding the button in tinyMCE I am lost.
The site talks about using this code somewhere but I even with some research i still cannot find what I need to do, could anyone point me is to where I would add the code?
<script type="text/javascript">
tinyMCE.init({
theme : "advanced",
relative_urls : false,
plugins : "jbimages",
theme_advanced_buttons1 : "jbimages,|"
// Other TinyMCE options
});
</script>
Thank you.
Assuming that the config.php file you mention contains the tinyMCE configuration parameters, then all you need to do is add jbimages to one of your *theme_advanced_buttons* config items in the position on the toolbar where you want it to appear.
If however the config.php file doesn't contain the full TinyMCE configuration, then it would appear whoever integrated TinyMCE into your application has hidden that functionality and you will need to talk to them or tell us what product you are using TinyMCE in.
I have a problem with the tinyMCE editor thats included with Joomla! 1.5 . I want to have the editor displayed in Simple mode, but I want to include the hyperlink button and I do not want the Format and Styles dropdown list to be included, I tried to switch from Advanced and Extended and adjusted every option included but I just could not get it to display the hyperlink button without displaying the Format and the Styles dropdown menu? Is there anything I can do about this, maybe hacking and modifying the code etc? Any advise is accepted. Thanks!!
When you think you all you need to do is to configure tinymce the right way - that is not the case.
You can use a slightly stripped down version of the advanced theme (maybe coming close to what you want); id do not know joomla that well, but it might be that you need to set the config variables in another way:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
theme_advanced_buttons1 : "bold,italic,underline,link,unlink,bullist,blockquote,undo",
});
For sure you can code it yourself to make it work with the simple plugin (you would need to search through the core code in order to find the important parts in the code), but i would try to take the easier way.