图片管理-JCE编辑器

星期日, 27 12月 2020
上传,管理和插入图像
关于图像管理器
图像管理器接口
插入/更新图像
上传一个图像
高级选项
创建一个翻转映像

Image Manager interface

图像管理器的界面,像所有的管理器插件(图像管理器扩展,文件管理器,媒体管理器等),由两个部分组成:  Attributes (属性)和File Browser(文件浏览).

Attributes属性

属性含3个选项卡区域,点击对应名字的按钮即可进入相应的选项卡界面。默认是图像选项卡界面, 包括当前文章图像主要属性的字段,或者要插入当前文章的图像。

Image图像

设置图像的常规属性包括链接、说明和尺寸. See Inserting an image

Rollover翻转

创建翻转类型的图像. 参考 Creating a Rollover image

Advanced高级

设置图像的高级属性,可参考 Advanced Options

File Browser文件浏览

The Image Manager File Browser has the same basic features as the other Manager plugins, with tools for creating new folders, uploading images and deleting, renaming, copying and moving files and folders. For more information on the File Browser features, see the File Browser section.

File Browser

插入图像

  1. 在文件浏览器中找到要插入的图像,点击图像名称 。在图像属性中URL, 替代文字和尺寸等字段就更新显示出来了;
  2. 调整图像属性。下面的动画显示的左对齐,环绕图片5像素距离。右侧有更新预览。
  3. 点击对话框右下方的 Insert按钮.。

Insert an image

URL 插入链接

URL字段表示图片的链接属性,使用的是服务器相对路径.

Alternate Text 替代文字

替换属性, 对图像的简要说明。.

Dimensions 尺寸

以像素表示的图像的高度和宽度。 如果点选了proportional,改变一个的值,另外一个会自动变化。默认状态插入的图片没有高度和宽度,除非原始值被编辑过。.

Margin 边距(文字与图片的距离)

代表图像和环绕文字之间的空格量 (像素) 。如果点选了Equalize(相等),所有间距使用同一数值。

Alignment 对齐

图像相对于环绕文字的位置。.

Border 线框

创建图像边框样式:宽度、样式和颜色。 

To Update and Image 更新和图像

When the Image Manager opens, all relevant fields are updated with the image's attributes.

The folder where the image resides is opened and the image selected. The image's properties are displayed in the Details view.

At this point you can change the image by selecting a new one (follow the steps above) or alter any of the fields in any of the tabs.

Click the Update button to update the image with the changes.

上传图像

  1. 点击Upload按钮打开图像上传对话框 
    Upload dialog
  2. 点击 Browse 按钮 找到要上传的图像(可一次上传多张图片)
    Upload select files
    也可以把要上传的图像拖拽到对话框中
    Upload drag & drop
  3. 图像被添加到上传列表中,每个图像名称都可以修改。点击 trash(垃圾桶)图标可从列表中去除该图像。 
  4. 点击Upload按钮开始上传图像。每个图像下面有以百分比形式的上传进度显示。 所有图像上传完成后,对话框自动关闭。如果某个图像上传失败,在其名字下方会有提示。

The Advanced tab contains fields to set additional attributes for an image.

Advanced tab

Style 样式

Represents the style attribute. Will be populated with styles set in the Image tab (margin, float etc). Additional styles can be added using the style element syntax, eg: text-align:right;vertical-align:middle;

Classes 样式类

A list of classes from your Joomla! template that can be applied to the image. Classes can be selected by clicking the drop-down icon, or typed into the field seperated by a space.

Title 标题

Represents the title attribute. Used as a description of the image.

Id 序号

Set the id attribute of the image.

Language Direction 语言方向

Text direction of the element.

Language Code 语言代码

Language code of the element eg: en-GB

Image Map

Id of the associated image map.

Long Description 详细描述

URL to a html or text document containing a detailed description of the image. To select and existing html file, or upload one to use, click on the File Browser icon on the right of the field.

什么是翻转图像

翻转图像的意思是当鼠标移到图像上时图像发生变化。例如  (把鼠标放到下图上)

winter

由于事件属性可执行 javascript,使用事件属性创建移入效果。注意在Editor Profile中要打开这一功能。打开后在图像管理其中才能显示翻转选项卡。.

As event attributes are able to execute javascript, these should only be enabled in profiles assigned to trusted users.

To enable Event Attributes

  1. From the JCE Control Panel, click on the Editor Profiles button, then click on a profile to edit, eg: "Default"
  2. Click on the Editor Parameters tab, then on the Advanced tab.
  3. Set the Allow Event Attributes option to Yes. The Allow Event Attributes option will not be visible but will automatically be enabled if the Allow Javascript option is enabled.Enable the Allow Event Attributes option

The Rollover Image Tab

Rollover tab

The Rollover tab contains two input fields, Mouseover and Mouseout.

Mouseover 鼠标移入

Represents the onmouseover event attribute. This is the image displayed when the mouse cursor is placed over the image.

Mouseout 鼠标移出

Represents the onmouseout event attribute. This is the image displayed when the mouse cursor is moved off the image. This is also usually the defualt image.

Create a Rollover image

  1. Select the image that is to be the default image, ie: the one that is displayed in the content item.
  2. Click the Rollover Image tab.
  3. Select the image that you would like as the mouse over image.
  4. You can now go back to the Image tab and adjust the parameters as required.
  5. Click Insert.

Remove a Rollover image

To remove a Rollover image, delete the contents of the Mouseover field in the Rollover tab.

 

5476 次