I am looking for a solution that allows me to insert an image and resize it in tinymce,any ideas?.
tinyMCE package comes by default with such feature. Plugin name is Image. The button should be in the toolbar on line 2. However you should use the advanced theme to activate it. In your tinyMCE.init( { ... } ); set theme : "advanced"
Related
We switched from CKEditor to the new TinyMCE editor in Connections 6 CR5. This was a huge improvement. But out of the box, TinyMCE misses some of the features from CKEditor. For example setting borders on images in a way that could be handled by end users (so no manual HTML/CSS changes).
How can we add such a feature to TinyMCE, that the users get some image property dialog that allows setting image borders?
The image plugin has a configuration property image_advtab, which is set to false by default. I tried to enable it and now we see the advanced tab in the image propertys, which allows setting a border (and also advanced attributes) easily:
To enable it, we need to re-add the plugin, since this allows to override it's variables. Add the following to the externalPlugins array in config.js (which is located in ${CUSTOMIZATION_DIR}/javascript/tiny/editors/connections/config.js):
{
name: "image",
url: pluginBaseDir + "image/plugin.min.js",
settings: {
image_advtab: true
}
}
pluginBaseDir is defined above the editor config:
var pluginBaseDir = "/connections/resources/web/tiny.editors.connections/tinymce/plugins/";
Along an upgrade from TYPO3 4.5->6.2, I encountered the following issue:
We have many existing images with text in the "Caption" field, which is in fact named "description". I wanted to rebuild the click-enlarge feature with a given lightbox script and adapt the content rendering by css_styled_content.
Now there is a newer setting in css_styled_content, which enables you to replace the odd/old "click enlarge" behaviour by a regular lightbox (fancybox, colorbox, anybox) style link.
This comes in very handy. But some lightbox scripts need a title on the link to display that caption when enlarging the image.
How to add that caption to the click-enlarge link?
Just add the field file:current:descriptionto the link's ATagParams:
tt_content.image.20.1.imageLinkWrap.linkParams.ATagParams.dataWrap = class="{$styles.content.imgtext.linkWrap.lightboxCssClass}" rel="{$styles.content.imgtext.linkWrap.lightboxRelAttribute}" title="{file:current:description}"
I wanted to migrate my existing add-on for firefox and chrome to crossrider in order to have it also with safari and IE, but i've a few doubts that mayble Schlomo (or any Crossrider developercan) can help me to solve them.
Questions :
Can i add a popup pane when someone clicks on the add-on button showing some kind of options inside it?
Can i add a blinking icon to the actual icon showing some kind of event happened like incoming chat or so?
Is there a way to add the red text box like in chrome showing at the bottom right of the icon some kind of text?
Thanks a lot!
When you pose the question like that, I can only hope the following answers will serve to allay your doubts and enlighten :)
First off, I would recommend familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
In answer to your specific questions:
You can use the button popup feature and build the required options in there. Take a look at the Button Popup Menu demo extension to get you started.
Whilst you can't make the button blink, you can alternate the button icon to make it look like blinking (see example).
In short, yes. Simply use the appAPI.browserAction.setBadgeText and appAPI.browserAction.setBadgeBackgroundColor methods (see example).
The following example bring together the key elements in the background.js code required to achieve the solutions mentioned. Look at the popup.html file in the Button Popup Menu for an example of how to build the options page.
appAPI.ready(function() {
var sid, // Blink interval id
alt=0, // Blink alternation state
icon = { // Blink icons
0: 'icons/icon0.png',
1: 'icons/icon1.png'
};
// Set the initial icon for the button
appAPI.browserAction.setResourceIcon(icon[0]);
// Sets the popup for the button
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
if (true) { // blink condition, set to true for this example
// Blink icon
sid = appAPI.setInterval(function() {
alt = 1 - alt;
appAPI.browserAction.setResourceIcon(icon[alt]);
}, 1 * 1000);
} else {
appAPI.clearInterval(sid);
}
if (true) { // show button text condition, set to true for this example
// Add red text box to icon
appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
}
});
[Disclosure: I am a crossrider employee]
how can I init tinyMCE before the element it is to apply to is not yet visible?
So yeah, this doesn't work in my case.
tinyMCE.init({
Assuming you are dynamically adding the textarea triggered from some action, then you can use the TinyMCE command "mceAddControl" to add TinyMCE to the page.
For example, if the textarea ID is "myText" then you add the editor control with
tinyMCE.execCommand('mceAddControl', true,"myText");
Of course, you need to setup the editor settings prior to adding the control. This is done by setting the setting attribute of the control. For example
tinyMCE.settings = {
theme: 'advanced',
....
};
How do you change the default font type and font size in TinyMCE?
I'm using the advanced skin and I've changed the body, td, pre style in default/content.css but it still doesn't change.
Well, there are several content.css and only one is used to style your editor depending on your configuration settings.
You should use the content_css configuration option and name an own css file where you can overwrite the editors defaults (the content.css you were recently looking for). In your init function use something like
content_css: "http://localhost/css/my_tiny_styles.css",
and in my_tiny_styles.css or whatever file you choose you use
font-family: myfont1, myfont2, sans-serif;
Here's another way to resolve this problem.
By adding your own custom styles into our CSS file by defining tinymce id.
#tinymce .mceContentBody p {
font-family: your_font_name !important;
}
If you want to change the default of the dropboxes rather than the display css only, with tinyMCE 4 it is now:
setup : function(ed) {
ed.on('init', function(ed) {
ed.target.editorCommands.execCommand("fontName", false, "Calibri");
ed.target.editorCommands.execCommand("fontSize", false, "11pt");
});
}
EDIT:
this is the setup option of the init function as explained here:
https://www.tinymce.com/docs/configure/integration-and-setup/#setup
For people having troubles adding a stylesheet because of path troubles or whatever reason, this should do it pretty simple:
setup : function(ed) {
ed.on('init', function(){
$(this.getDoc()).find('head').append('<style>p{margin:0;}</style>');
});
}
Note I used jQuery, but can of course be done without it as well.
Here's how to do it without touching CSS or any other codes.
Use the plugin 'TinyMCE Advanced'
Activate it in settings.
More detailed instructions here.