TinyMCE 富文本编辑器 ━━ 基本配置

基本配置

在对 TinyMCE 配置的介绍中,我们将讨论基于传统表单的布局中通常使用的最重要的选项,以及如何将 TinyMCE 用作内联编辑器的示例。

将 TinyMCE 脚本添加到页面后,需要考虑三个配置方面:

  1. 选择器配置
  2. 插件配置
  3. 工具栏和菜单配置

 

关于代码段示例的说明

在整个参考文档中,我们使用代码片段展示正在讨论的主题的示例实现。以下是整个文档中的代码片段的一些示例。

片段通常如下所示:

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    plugin: 'a_tinymce_plugin',
    a_plugin_option: true,
    a_configuration_option: 400
});

片段始终包含 selector 值 ‘textarea’ 。你需要根据 HTML 更改此值

 

选择器配置

选择器配置是 TinyMCE 集成的最关键配置选项。选择器配置允许您使用 CSS selector 语法来确定页面上的哪些元素可以通过 TinyMCE 进行示例化。

换句话说,这是为 TinyMCE 可编辑区域指定 CSS 选择器的位置。

在 TinyMCE 的常规编辑模式中使用此选项时,所选元素将替换为 iframe 并且 TinyMCE 将在此上下文中执行所有操作。

这是替换 textarea 页面上所有元素的示例:

tinymce.init({
    selector: 'textarea'
});

你还可以匹配 ID 属性。以下是在页面上替换textarea 元素的 ID'editable' 示例:

tinymce.init({
    selector: 'textarea#editable'
});

或者:

tinymce.init({
    selector: '#editable'
});

 

 

插件配置

plugins 可以让你在编辑器中启用插件功能。由于几个 TinyMCE 插件为用户提供了有用的功能,因此必须考虑你希望包含哪些插件。
幸运的是,启用插件功能很容易。只需要将 plugins 键添加配置中并提供逗号,空格分隔的字符串或字符串数​​组作为值。例如:

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    plugins : 'advlist autolink link image lists charmap print preview'
});

 

工具栏和菜单配置

TinyMCE 带有一组默认的工具栏控件,例如粗体,斜体和文本对齐按钮。但是,在大多数集成中,需要更改工具栏配置以满足你的需要。

默认工具栏控件

在我们开始配置工具栏之前,让我们看看默认的工具栏按钮。你可以从他们的名字中找出他们做的事情。

newdocument, bold, italic, underline, strikethrough, alignleft, aligncenter, alignright, alignjustify, styleselect, formatselect, fontselect, fontsizeselect, cut, copy, paste, bullist, numlist, outdent, indent, blockquote, undo, redo, removeformat, subscript, superscript

默认的TinyMCE工具栏和菜单栏状态

toolbar 选项允许选择工具栏上显示的按钮,以及这些项目的顺序和分组。

工具栏选项提供了一个以空格分隔的 toolbar 值列表,以指定应出现在 TinyMCE 工具栏上的控件。要在此列表中创建组,请在要创建”|”的控件组之间添加管道字符。

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    toolbar: 'undo redo | styleselect | bold italic | link image',
});

如果想禁用 toolbar, 可以设置 toolbar 的值为 false

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    toolbar: false
});

也可以指定多个工具栏,此时应该为 toolbar 选项提供一个 array 类型的值。也可以使用数字后缀指定多个 toolbar

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    toolbar: [
        'undo redo | styleselect | bold italic | link image',
        'alignleft aligncenter alignright'
    ]
});

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    toolbar1: 'undo redo | styleselect | bold italic | link image',
    toolbar2: 'alignleft aligncenter alignright'
});

 

快速浏览菜单和菜单栏控件

就像 toolbar 一样,menu也有一个选项。实际上,有两个与菜单相关的选项:menumenubar

默认菜单控件

newdocument, undo, redo, visualaid, cut, copy, paste, selectall, bold, italic, underline, strikethrough, subscript, superscript, removeformat, formats

这两个选项(快速浏览菜单和菜单栏控件)之间的区别在于menubar影响菜单栏上放置的项目这些项目menu会影响菜单下拉列表中显示的各个项目。此外,menu可以更精细地控制菜单。例如,可以使用创建自己的菜单项标题menu

在下面的代码片段中,我们的菜单栏只包括菜单项FileEditView但是,这也会加载每个相应菜单中包含的默认项目。例如,Edit加载 “undo”, “redo”, “cat”, “copy”, “paste” 和 “select all”。

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    menubar: 'file edit view'
});

如果你想创建一个Edit菜单,并且仅包含剪切,复制,粘贴项目,则可以使用menu例如:

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    menu: {
        view: {title: 'Edit', items: 'cut, copy, paste'}
    }
});

甚至可以创建自己的菜单标题。在下面的代码段中,我们创建一个标题为 “Happy” 的菜单,并包含“源代码”项。

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    menu: {
        view: {title: 'Happy', items: 'code'}
    },
    plugins: 'code'  // required by the code menu item
});

 

同样的,如果想隐藏菜单栏可以这么设置:

tinymce.init({
    selector: 'textarea',  // change this value according to your HTML
    menubar: false,  // removes the menubar
});

 

基本配置示例

使用上面的配置选项,将能够实例化 TinyMCE 并执行初始自定义以符合你要求的编辑器。TinyMCE 还有许多其他配置选项可用于进一步定制和扩展编辑器。

以下是一个基于 Tiny Cloud 编辑器的基本配置的示例代码

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src='https://cloud.tinymce.com/stable/tinymce.min.js'></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myTextarea',
    theme: 'modern',
    width: 600,
    height: 300,
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'save table contextmenu directionality emoticons template paste textcolor'
    ],
    content_css: 'css/content.css',
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
  });
  </script>
</head>

<body>
  <textarea id="myTextarea"></textarea>
</body>
</html>

 

上面示例代码的配置详解

首先,我们选择 textarea 带有 id 为 myTextarea 的元素作为编辑器的容器

selector: '#myTextarea',

 

接下来选择一个主题,这里选择的是现代主题(这是默认主题),主题不是必需的。

theme: 'modern',

 

这里我们设置可编辑区域的宽度和高度(以像素为单位)。这些必须是数值。

width: 600,
height: 300,

 

这里设置我们需要加载的插件

plugins: [
    'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
    'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
    'save table contextmenu directionality emoticons template paste textcolor'
],

 

接下来,我们设置可编辑区域的样式 content_css样式应该是您的网站 CSS 的(非常)精简版本,包括标题样式(H1-H6),表格布局,边距,元素周围的填充(图像,段落)等。

content_css: 'css/content.css',

最后,我们要选择向用户公开的工具栏按钮。可以使用逗号或空格作为分隔符。

toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',

 

以上便是一个基于 Tiny Cloud 的编辑器的基本配置示例的详解

 

以上部分内容来自 TinyMCE 官方文档:https://www.tiny.cloud/docs

About: Mr.zhang

成谜于写 bug 无法自拔~


发表评论

邮箱地址不会被公开。 必填项已用*标注