简介与入门 \ 自定义界面(UI)

此页更新时间:2019-02-10 16:25

此页英文文档:https://www.tiny.cloud/docs/general-configuration-guide/customize-ui/

本节介绍如何定义编辑器的外观(不是各种按钮)。

主题(Themes)与皮肤(Skins)

前排提醒:TinyMCE提出了主题和皮肤两个概念,这与通常情况下只有一种的情况相悖,以至于很难区分二者的关系。在TinyMCE中,皮肤用于更改编辑器的外观,例如颜色、边距、填充、字体、图标等等。而主题则负责编辑器的框架构建、如编辑器上下左右,垂直水平、内外部等行为。
译者补充:皮肤skins更接近我们平时直觉所理解的意思。二者分别位于themes目录和skins目录中。skins里存放的是css,而themes里存放的是js,这样看就很容易分出区别了。

“Silver”是TinyMCE的默认主题。用户可以轻松自定义菜单或工具栏,而无需编辑主题。主题创建需要更深入地了解TinyMCE的API,这里不会深入介绍。

TinyMCE v5 的默认皮肤是“oxide”,它包含浅色版本和深色版本。默认oxide是浅色版。下面的例子将使用深色版皮肤。

tinymce.init({
    selector: '#tinydemo',
    skin: 'oxide-dark',
});

设置编辑器的宽高

宽(width)高(height)

这应该是最常用的选项,二者分别为width和height,width默认是100%,height通常为200px。

如参数只提供数字,则默认单位为像素(px),如提供了单位,TinyMCE会以css模式去理解它。单位支持px/%/em/vh/vw

例:

tinymce.init({
    selector: '#tinydemo',
    width: 300,
    height: 300,
});
译者提醒:这里有个坑!如果你用width:'300'这种字符串写法是完全不起作用的。TinyMCE应该是只判断了值的类型是Number还是String。

限定可编辑区域宽高的最大最小值

很好记:max_height, max_width, min_height, min_width ,用法同上,不再赘述。

注:此参数设置的是可编辑区域,而不是整个编辑器

当你使用autosize插件时,以上这些参数可能会不起作用,请注意。

resize配置选项

在编辑器右下角有一个可以拖动的标记,鼠标按住它可以改变编辑器的大小。

默认resize: true

可选值为:true(仅允许改变高度), false(完全不让你动), 'both'(宽高都能改变,注意引号)

如要禁止用户拖动改变编辑器大小,设为false即可。

使用content_css自定义可编辑区域

content_css该参数可允许你自定义TinyMCE编辑区域内的样式。该参数的值是你的css文件路径,可使用绝对路径或相对路径。

注意,该参数的作用巨大!对于文章发布系统,我们希望在创作文章时看到的样子是什么样子,发布出来就是什么样子。但往往后台css和前台css是完全不同的,其它编辑器几乎只能使用自己独立的外观,而TinyMCE这点做的尤其好,在非内联(inline)模式下也提供了很好的解决方案。

tinymce.init({
    selector: '#tinydemo',
    content_css : '/mycontent.css' ,
});

该选项还允许使用多个css文件作为参数:

content_css : 'mycontent.css,mycontent2.css'

也支持使用数组作为参数:

content_css : ['mycontent.css', 'mycontent2.css']

隐藏状态栏

状态栏指的是编辑器最底下、左侧显示dom信息、右侧显示Tiny版权链接和调整大小的那一条。

好吧,通过我的描述,你已经知道状态栏能干什么了,如果不想让它显示,向下面这样设置就好:

statusbar: false

译者:本节对原文做了较大的改变,添改了部分新内容,同时也删去了部分过时内容,此文翻译时间为19年2月初,请读者注意。

下一节是上传图片和文件