登录 注册

<   tinyMCE使用实例，全面说明如何使用

2025-09-04

TinyMCE 是一个非常流行且功能强大的富文本编辑器，它允许你在网页上创建 WYSIWYG（What You See Is What You Get）的编辑体验。本文将全面说明 TinyMCE 的使用实例，从基础集成到高级配置，帮助你掌握其核心用法。

1. TinyMCE 的核心概念


在使用 TinyMCE 之前，理解几个核心概念是很重要的：

* JavaScript 库: TinyMCE 是一个 JavaScript 库，你需要将其添加到你的网页中。
* 初始化: 你需要通过 JavaScript 代码来初始化 TinyMCE，告诉它哪个 textarea 元素需要被替换成富文本编辑器。
* 配置: TinyMCE 提供了大量的配置选项，允许你自定义编辑器的外观、功能、工具栏、插件等。
* 内容: TinyMCE 编辑器操作的是 HTML 内容，用户输入的内容最终会被转换为 HTML。

2. 基础集成


最简单的集成方式是直接通过 CDN 引入 TinyMCE，然后初始化它。

步骤 1: 在 HTML 文件中引入 TinyMCE

在你的 index.html 文件中，在 <head> 或 <body> 的末尾添加以下代码：

html
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE 实例</title>
</head>
<body>

<h1>我的富文本编辑器</h1>

<!-- 这是一个 textarea 元素，TinyMCE 将会替换它 -->
<textarea id="mytextarea">在这里输入你的内容...</textarea>

<!-- 引入 TinyMCE 的 CDN -->
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

<!-- 初始化 TinyMCE 的脚本 -->
<script>
tinymce.init({
selector: '#mytextarea' // 指定需要被 TinyMCE 替换的 textarea 的 CSS 选择器
});
</script>

</body>
</html>


说明:

* https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js: 这是 TinyMCE 的 CDN 链接。
* no-api-key: 在开发和测试阶段，你可以使用 no-api-key。但为了在生产环境中使用，你需要注册并获取一个 API Key，然后替换 no-api-key。
* tinymce/6: 指定 TinyMCE 的版本号。
* selector: '#mytextarea': 这是 TinyMCE 最核心的配置项。它告诉 TinyMCE 哪个 textarea 元素需要被初始化为富文本编辑器。这里的 #mytextarea 是一个 CSS 选择器，指向 id 为 mytextarea 的元素。

运行:

将上述 HTML 代码保存为一个 .html 文件，并在浏览器中打开它。你将看到一个带有编辑工具栏的富文本编辑器，并且你可以直接在其中编辑内容。

3. 获取 API Key (生产环境)


为了在生产环境中使用 TinyMCE，你需要一个 API Key。

1. 访问 TinyMCE 官方网站。
2. 注册一个免费账户。
3. 登录后，在你的账户仪表板中找到 API Key。
4. 将 CDN 链接中的 no-api-key 替换为你自己的 API Key。

例如，如果你的 API Key 是 your_api_key_here，那么 CDN 链接会变成：

html
<script src="https://cdn.tiny.cloud/1/your_api_key_here/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

4. 常用配置选项


tinymce.init() 方法接受一个配置对象，你可以通过这个对象来定制编辑器的行为和外观。以下是一些常用的配置选项：

4.1. selector (必填)


* 说明: 指定要初始化为 TinyMCE 编辑器的 textarea 元素的 CSS 选择器。
* 示例:
javascript
tinymce.init({
selector: '.my-editor' // 选择所有 class 为 my-editor 的 textarea
});

4.2. plugins


* 说明: 指定要加载的 TinyMCE 插件。插件提供了额外的功能，例如文件上传、媒体插入、代码编辑等。
* 示例:
javascript
tinymce.init({
selector: '#mytextarea',
plugins: 'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount'
});

* advlist: 高级列表（有序/无序）
* autolink: 自动链接
* lists: 列表
* link: 插入/编辑链接
* image: 插入/编辑图片
* charmap: 特殊字符映射表
* print: 打印
* preview: 预览
* anchor: 锚点
* searchreplace: 查找替换
* visualblocks: 可视化块（显示 HTML 结构）
* code: 显示/编辑 HTML 源代码
* fullscreen: 全屏模式
* insertdatetime: 插入日期/时间
* media: 插入媒体（视频、音频）
* table: 表格
* paste: 粘贴选项
* help: 帮助
* wordcount: 字数统计

4.3. toolbar


* 说明: 定义显示在编辑器顶部的工具栏按钮。你可以通过空格分隔按钮的名称。
* 示例:
javascript
tinymce.init({
selector: '#mytextarea',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
plugins: 'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount'
});

* |: 分隔线
* formatselect: 格式选择（段落、标题等）
* bold, italic, backcolor: 加粗、斜体、背景颜色
* alignleft, aligncenter, alignright, alignjustify: 文本对齐
* bullist, numlist: 无序列表、有序列表
* outdent, indent: 减少缩进、增加缩进
* removeformat: 清除格式
* help: 帮助

4.4. height 和 width


* 说明: 设置编辑器的高度和宽度。
* 示例:
javascript
tinymce.init({
selector: '#mytextarea',
height: 400, // 单位是像素
width: '100%!'(MISSING) // 可以使用百分比
});

4.5. menubar


* 说明: 是否显示菜单栏（File, Edit, Insert, View, Format, Tools, Table, Help）。
* 示例:
javascript
tinymce.init({
selector: '#mytextarea',
menubar: false // 隐藏菜单栏
});

4.6. branding


* 说明: 是否显示 TinyMCE 的品牌信息（通常在右下角）。
* 示例:
javascript
tinymce.init({
selector: '#mytextarea',
branding: false // 隐藏品牌信息
});

4.7. statusbar


* 说明: 是否显示状态栏（字数统计、大小调整等）。
* 示例:
javascript
tinymce.init({
selector: '#mytextarea',
statusbar: false // 隐藏状态栏
});

5. 获取和设置编辑器内容


TinyMCE 提供了 getContent() 和 setContent() 方法来操作编辑器的内容。

示例:

html
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE 内容操作</title>
</head>
<body>

<textarea id="mytextarea"><h1>这是一个标题</h1><p>一些<b>粗体</b>内容。</p></textarea>

<button onclick="getContent()">获取内容</button>
<button onclick="setContent()">设置内容</button>

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#mytextarea',
plugins: 'code', // 只需要 code 插件来方便查看
toolbar: 'undo redo | code'
});

// 获取 TinyMCE 实例
const editor = tinymce.get('mytextarea');

function getContent() {
if (editor) {
const content = editor.getContent();
alert('编辑器内容:\n' + content);
// 或者将内容显示在页面上的其他地方
// document.getElementById('output').innerText = content;
}
}

function setContent() {
if (editor) {
const newContent = '<p style="color: blue;">这是新设置的内容！</p>';
editor.setContent(newContent);
}
}
</script>

</body>
</html>


说明:

* tinymce.get('mytextarea'): 这个方法用于获取特定 textarea 对应的 TinyMCE 编辑器实例。
* editor.getContent(): 获取当前编辑器中的 HTML 内容。
* editor.setContent(newContent): 设置编辑器的内容。

6. 多编辑器实例


如果你在页面上有多个 textarea 需要被初始化为 TinyMCE 编辑器，你可以这样做：

HTML:

html
<textarea class="editor1">第一个编辑器</textarea>
<textarea class="editor2">第二个编辑器</textarea>


JavaScript:

javascript
tinymce.init({
selector: '.editor1', // 初始化第一个编辑器
plugins: 'lists link image',
toolbar: 'bold italic | lists'
});

tinymce.init({
selector: '.editor2', // 初始化第二个编辑器
plugins: 'table',
toolbar: 'table | redo undo'
});


或者使用通配符（需要 API Key，如果直接使用 CDN 的 no-api-key 可能会有问题）：

javascript
tinymce.init({
selector: 'textarea', // 选择页面上所有的 textarea
plugins: 'lists link image',
toolbar: 'bold italic | lists'
});

7. 常用插件的深入使用

7.1. Image Plugin (image)


* 功能: 允许用户上传图片，或者从 URL 插入图片。
* 配置: images_upload_url (指定图片上传的 URL)。
* 示例 (服务器端需要有处理图片上传的接口):

HTML (JS部分):
javascript
tinymce.init({
selector: '#mytextarea',
plugins: 'image',
toolbar: 'image',
images_upload_url: '/upload-image', // 你的图片上传接口地址
// 如果需要自定义上传参数，可以使用 images_upload_handler
/*
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;

xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/upload-image'); // 你的图片上传接口地址

xhr.onload = function() {
var json;

if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}

json = JSON.parse(xhr.responseText);

if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}

success(json.location);
};

formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());

xhr.send(formData);
}
*/
});


服务器端 (Node.js + Express 示例):
javascript
const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();

// 配置 Multer 用于文件上传
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/'); // 图片上传到 uploads 文件夹
},
filename: function (req, file, cb) {
cb(null, Date.now() + path.extname(file.originalname)); // 文件名加上时间戳
}
});
const upload = multer({ storage: storage });

// 图片上传接口
app.post('/upload-image', upload.single('file'), (req, res) => {
// req.file 包含了上传文件的信息
// 这里的 'uploads/' 目录需要提前创建
res.json({ location: '/uploads/' + req.file.filename }); // 返回图片 URL
});

app.listen(3000, () => {
console.log('Server listening on port 3000');
});

注意: 你需要安装 express 和 multer 依赖，并创建 uploads 目录。

7.2. Media Plugin (media)


* 功能: 允许用户插入视频、音频等媒体文件，通常是通过 URL 嵌入。
* 示例: 默认情况下，media 插件会提供插入视频的选项。你只需要在 plugins 和 toolbar 中包含 media。

7.3. Table Plugin (table)


* 功能: 提供创建和编辑表格的工具。
* 示例:

HTML (JS部分):
javascript
tinymce.init({
selector: '#mytextarea',
plugins: 'table',
toolbar: 'table | undo redo'
});

7.4. Code Plugin (code)


* 功能: 允许用户直接编辑 HTML 源代码。
* 示例:

HTML (JS部分):
javascript
tinymce.init({
selector: '#mytextarea',
plugins: 'code',
toolbar: 'code | undo redo'
});

8. 自定义按钮和菜单项


你可以自定义工具栏按钮，甚至创建自己的按钮。

示例: 创建一个自定义按钮，用于插入当前日期

1. 注册一个命令 (Command):

javascript
tinymce.init({
selector: '#mytextarea',
setup: function (editor) {
editor.addCommand('insertDate', function () {
const today = new Date();
const formattedDate = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
editor.insertContent(formattedDate);
});
},
toolbar: 'insertDate | bold', // 在工具栏中添加自定义按钮
buttons: ['insertDate'] // 声明自定义按钮
});


2. 注册一个按钮 (Button):

javascript
tinymce.init({
selector: '#mytextarea',
setup: function (editor) {
editor.ui.registry.addButton('insertDate', { // 注册一个名为 insertDate 的按钮
text: 'Insert Date', // 按钮显示的文本
icon: 'calendar', // TinyMCE 的内置图标（也可以是自定义 SVG）
tooltip: 'Insert current date', // 鼠标悬停时的提示
onAction: function () { // 点击按钮时执行的函数
editor.execCommand('insertDate'); // 执行之前注册的命令
}
});

editor.addCommand('insertDate', function () { // 注册命令
const today = new Date();
const formattedDate = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
editor.insertContent(formattedDate);
});
},
toolbar: 'insertDate | bold',
plugins: 'lists link image' // 确保有 image 插件以便使用 'calendar' 图标
});


创建自定义菜单项:

javascript
tinymce.init({
selector: '#mytextarea',
menubar: 'file edit insert view format tools table help', // 确保菜单栏显示
setup: function (editor) {
editor.ui.registry.addMenuItem('insertDateMenu', { // 注册一个菜单项
text: 'Insert Date',
icon: 'calendar',
tooltip: 'Insert current date',
onAction: function () {
editor.execCommand('insertDate');
}
});

// 添加到 "Insert" 菜单
editor.addMenuGroup('my-custom-group'); // 可选，用于分组
editor.addMenuItem('my-custom-menu', { // 添加一个自定义菜单
text: 'My Custom Menu',
icon: 'template',
menu: [
{ text: 'Insert Date', value: 'insertDate', icon: 'calendar' } // 菜单项，value 对应命令
],
onAction: function(api) { // 点击菜单本身（如果菜单项是数组）
// 可以不做什么，或者做其他操作
}
});
editor.addCommand('insertDate', function () { // 注册命令
const today = new Date();
const formattedDate = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
editor.insertContent(formattedDate);
});
},
toolbar: 'insertDate | bold',
plugins: 'lists link image'
});

9. 事件处理


TinyMCE 提供了许多事件，你可以在这些事件发生时执行自定义逻辑。

常用事件:

* init: 编辑器初始化完成后触发。
* change: 编辑器内容发生变化时触发。
* input: 用户输入时触发。
* exec: 命令执行时触发。
* focus: 编辑器获得焦点时触发。
* blur: 编辑器失去焦点时触发。

示例: 监听内容变化并显示字数

javascript
tinymce.init({
selector: '#mytextarea',
plugins: 'wordcount', // 确保 wordcount 插件被加载
toolbar: 'bold | wordcount',
setup: function (editor) {
editor.on('Change', function () { // 监听 'Change' 事件
const wordCount = editor.plugins.wordcount.getCount();
console.log('内容已更改，字数:', wordCount);
// 可以更新页面上的字数显示
document.getElementById('word-count-display').innerText = `字数: ${wordCount}`;
});
editor.on('init', function() { // 监听 'init' 事件
const initialWordCount = editor.plugins.wordcount.getCount();
document.getElementById('word-count-display').innerText = `字数: ${initialWordCount}`;
});
}
});


HTML:

html
<textarea id="mytextarea">初始内容...</textarea>
<p id="word-count-display"></p>

10. 主题 (Themes)


TinyMCE 有不同的主题，例如 silver (默认) 和 oxide。你可以在初始化时指定主题。

javascript
tinymce.init({
selector: '#mytextarea',
theme: 'silver' // 或 'oxide'
});

11. 国际化 (i18n)


TinyMCE 支持多语言。你需要下载相应的语言包，然后指定语言。

1. 下载语言包: 从 TinyMCE 官网下载语言包文件（例如 zh_CN.js）。
2. 放置语言包: 将下载的语言包文件放在你的 TinyMCE 目录中，或者通过 language_url 指定路径。
3. 配置语言:

javascript
tinymce.init({
selector: '#mytextarea',
language: 'zh_CN', // 设置语言为中文
language_url: '/tinymce/langs/zh_CN.js' // 指定中文语言包的路径（如果放在自定义目录）
});


如果你是直接从 CDN 加载，并且你的 API Key 是有效的，TinyMCE 会自动从 CDN 加载语言包。只需设置 language 即可：

javascript
tinymce.init({
selector: '#mytextarea',
language: 'zh_CN',
// language_url: 'https://cdn.tiny.cloud/1/your_api_key_here/tinymce/6/langs/zh_CN.js' // 也可以直接指定 CDN 路径
});

12. 与前端框架集成 (Vue, React, Angular)


在现代前端框架中，通常会有专门为 TinyMCE 封装的组件，这使得集成更加方便。

12.1. Vue.js


可以使用 @tinymce/tinymce-vue 库。

1. 安装:
bash
npm install @tinymce/tinymce-vue


2. 使用:
vue
<template>
<div>
<Editor
v-model="content"
api-key="YOUR_API_KEY"
init={{
height: 500,
menubar: false,
plugins: 'lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>
<button @click="getHtml">获取 HTML</button>
<button @click="setHtml">设置 HTML</button>
</div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue';

export default {
components: { Editor },
data() {
return {
content: '<h2>My Editor Content</h2><p>This is initial content.</p>',
};
},
methods: {
getHtml() {
alert(this.content);
},
setHtml() {
this.content = '<p style="color: red;">New content set from button!</p>';
}
}
};
</script>

12.2. React


可以使用 react-tinymce-editor 或 @tinymce/tinymce-react。

1. 安装:
bash
npm install @tinymce/tinymce-react


2. 使用:
jsx
import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';

function App() {
const editorRef = useRef(null);

const log = () => {
if (editorRef.current) {
console.log(editorRef.current.getContent());
}
};

const setContent = () => {
if (editorRef.current) {
editorRef.current.setContent('<p>New content set from React!</p>');
}
};

return (
<>
<Editor
apiKey="YOUR_API_KEY"
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<p>This is the initial content of the editor.</p>"
init={{
height: 500,
menubar: false,
plugins: 'lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>
<button onClick={log}>Log editor content</button>
<button onClick={setContent}>Set editor content</button>
</>
);
}

export default App;

12.3. Angular


可以使用 @tinymce/tinymce-angular 库。

1. 安装:
bash
npm install @tinymce/tinymce-angular


2. 在 app.module.ts 中导入 EditorModule:
typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { EditorModule } from '@tinymce/tinymce-angular'; // 导入 EditorModule

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
EditorModule // 添加到 imports
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


3. 在组件中使用:
typescript
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<h2>TinyMCE in Angular</h2>
<editor
[init]="{
plugins: 'lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
height: 300
}"
[(ngModel)]="content"
></editor>
<button (click)="getHtml()">Get HTML</button>
<button (click)="setHtml()">Set HTML</button>
`
})
export class AppComponent {
content: string = 'Initial content in Angular';

getHtml() {
alert(this.content);
}

setHtml() {
this.content = '<p style="font-weight: bold;">Content updated from Angular!</p>';
}
}

13. 总结


TinyMCE 是一个高度可配置的富文本编辑器。通过掌握其基础集成、核心配置选项、事件处理以及插件的使用，你可以轻松地将强大的编辑功能添加到你的 Web 应用中。

关键点回顾:

* CDN 集成: 最简单的入门方式。
* API Key: 生产环境必需。
* selector: 指定要编辑的 textarea。
* plugins 和 toolbar: 控制编辑器的功能和界面。
* getContent() / setContent(): 获取和设置编辑器内容。
* 事件: 监听编辑器状态并执行自定义逻辑。
* 框架集成: 使用官方提供的组件可以简化集成过程。

通过不断地探索 TinyMCE 的文档和配置选项，你可以构建出满足你特定需求的强大编辑器。
AI问答 发表 上传 拍照
BBSGOOD.COM ©2025  运行时间：