add 4.3 content for option image_caption
This commit is contained in:
r12s
+86
-19
@@ -5,17 +5,13 @@ description: Insert an image into TinyMCE.
|
||||
keywords: photo
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// adds menu control (under Insert menu)
|
||||
|
||||
// adds toolbar control
|
||||
|
||||
This plugin enables the user to insert an image into TinyMCE's editable area.
|
||||
|
||||
Note that this is not drag-drop functionality and the user is required to enter the path to the image, the image description, dimensions and whether image proportions should be constrained (via a checkbox). Some of these settings can be preset using the plugin's configuration options.
|
||||
Note that this is not drag-drop functionality and the user is required to enter the path to the image (and optionally the image description, dimensions and whether image proportions should be constrained (via a checkbox)). Some of these settings can be preset using the plugin's configuration options.
|
||||
|
||||
The `image` plugin also adds a toolbar control and an `Insert/edit image` menu item under the `Insert` menu.
|
||||
|
||||
@@ -41,25 +37,68 @@ tinymce.init({
|
||||
|
||||
These configuration options affect the execution of the `image` plugin. Many of the settings here will disable dialog box features used to insert or edit images. A predefined list of images can also be provided to enable quick insertion of those images.
|
||||
|
||||
If you wish to align the image, you can also use the text align buttons while images are selected.
|
||||
|
||||
#### Q: Where are the advanced image options?
|
||||
### `image_caption`
|
||||
|
||||
Use the Style Formats option instead, which is much more powerful.
|
||||
> New in 4.3
|
||||
|
||||
```
|
||||
style_formats: [
|
||||
{title: 'Image Left', selector: 'img', styles: {
|
||||
'float' : 'left',
|
||||
'margin': '0 10px 0 10px'
|
||||
}},
|
||||
{title: 'Image Right', selector: 'img', styles: {
|
||||
'float' : 'right',
|
||||
'margin': '0 10px 0 10px'
|
||||
}}
|
||||
]
|
||||
This option lets users enable captions for images. When this option is enabled the image dialog will have an extra checkbox called "Caption". When a user checks the checkbox the image will get wrapped in an HTML5 `figure` element with a `figcaption` inside it. The user will then be able to type caption content inside the editor.
|
||||
|
||||
**Type:** `Boolean`
|
||||
|
||||
**Default Value:** `true`
|
||||
|
||||
**Possible Values:** `true`, `false`
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_caption: true
|
||||
});
|
||||
```
|
||||
|
||||
If you wish to align the image, you can also just use the text align buttons when having images selected.
|
||||
Below is an example of the HTML created when a user selects the caption checkbox.
|
||||
|
||||
```html
|
||||
<figure class="image">
|
||||
<img src="url" alt="" />
|
||||
<figcaption>Caption</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
Note that the `figure` element needs some custom CSS added to render properly. This is what we use in the internal `content.css` within TinyMCE, which can be overridden with your own custom [`content_css`]({{ site.baseurl }}/editor-configuration-settings/content-appearance/#content_css) stylesheet.
|
||||
|
||||
```css
|
||||
figure.image {
|
||||
display: inline-block;
|
||||
border: 1px solid gray;
|
||||
margin: 0 2px 0 1px;
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
figure.align-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
figure.align-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
figure.image img {
|
||||
margin: 8px 8px 0 8px;
|
||||
}
|
||||
|
||||
figure.image figcaption {
|
||||
margin: 6px 8px 6px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
### `image_list`
|
||||
|
||||
@@ -73,6 +112,7 @@ This option lets you specify a predefined list of sources for images. `image_lis
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_list: [
|
||||
{title: 'Dog', value: 'mydog.jpg'},
|
||||
@@ -89,6 +129,7 @@ You can also configure a URL with JSON data. The format of that list is the same
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_list: "/mylist.php"
|
||||
});
|
||||
@@ -100,6 +141,7 @@ tinymce.init({
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_list: function(success) {
|
||||
success([
|
||||
@@ -120,10 +162,13 @@ This option adds an "Advanced" tab to the image dialog allowing you to add custo
|
||||
|
||||
**Possible Values:** `true`, `false`
|
||||
|
||||
**Example:**
|
||||
|
||||
```js
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_advtab: true
|
||||
});
|
||||
@@ -141,6 +186,7 @@ This option lets you specify a predefined list of classes to add to an image. It
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_class_list: [
|
||||
{title: 'None', value: ''},
|
||||
@@ -166,6 +212,7 @@ This options allows you disable the image description input field in the image d
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_description: false
|
||||
});
|
||||
@@ -187,6 +234,7 @@ This options allows you disable the image dimensions input field in the image di
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_dimensions: false
|
||||
});
|
||||
@@ -208,6 +256,7 @@ This options allows you enable the image title input field in the image dialog.
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_title: true
|
||||
});
|
||||
@@ -225,7 +274,25 @@ This option allows you to specify a URL prefix that will be applied to images wh
|
||||
tinymce.init({
|
||||
selector: "textarea", // change this value according to your html
|
||||
plugins: "image",
|
||||
menubar: "insert",
|
||||
toolbar: "image",
|
||||
image_prepend_url: "http://www.tinymce.com/images/"
|
||||
});
|
||||
```
|
||||
|
||||
## Q: Where are the advanced image options?
|
||||
|
||||
Use the `Style Formats` option instead, which is much more powerful.
|
||||
|
||||
```js
|
||||
style_formats: [
|
||||
{title: 'Image Left', selector: 'img', styles: {
|
||||
'float' : 'left',
|
||||
'margin': '0 10px 0 10px'
|
||||
}},
|
||||
{title: 'Image Right', selector: 'img', styles: {
|
||||
'float' : 'right',
|
||||
'margin': '0 10px 0 10px'
|
||||
}}
|
||||
]
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user