本快速入门指南介绍如何创建一个包含 TinyMCE 编辑器的 基本 Express JS 应用程序。

Tiny Cloud 用户应使用 Tiny Cloud 快速入门指南。

先决条件

此过程需要 Node.js（和 npm）。

步骤

  1. 在命令行或命令提示符中，创建一个基本的 Express JS 应用程序：

    npx express-generator --git --no-view my_tinymce_app

  2. 进入新创建的目录。

    cd my_tinymce_app

  3. 使用 --save 将 tinymce 包添加到您的 package.json 中。

    npm install --save tinymce

  4. 下载并安装 TinyMCE 和 Express JS Node 模块（及其依赖项）：

    npm install

  5. 使用文本编辑器打开 /path/to/my_tinymce_app/app.js 并添加以下路由：

    app.use('/tinymce', express.static(path.join(__dirname, 'node_modules', 'tinymce')));

    例如：

    var express = require('express');var path = require('path');var cookieParser = require('cookie-parser');var logger = require('morgan');var indexRouter = require('./routes/index');var usersRouter = require('./routes/users');var app = express();app.use(logger('dev'));app.use(express.json());app.use(express.urlencoded({ extended: false }));app.use(cookieParser());app.use(express.static(path.join(__dirname, 'public')));/* New Route to the TinyMCE Node module */app.use('/tinymce', express.static(path.join(__dirname, 'node_modules', 'tinymce')));app.use('/', indexRouter);app.use('/users', usersRouter);module.exports = app;

  6. 创建一个新的 JavaScript 文件，其中包含 TinyMCE 配置（tinymce.init），例如：

    Linux/macOS/Unix：

    touch public/javascripts/my-tinymce-config.js

    Windows：

    > type nul >public/javascripts/my-tinymce-config.js

  7. 将 TinyMCE 配置添加到新创建的 JavaScript 文件（my-tinymce-config.js）中：

    tinymce.init({
  selector: 'textarea#my-expressjs-tinymce-app',
  license_key: 'gpl',
  plugins: 'lists link image table code help wordcount'
});
    gpl 许可证密钥用于在 GNU 通用公共许可证 (GPL) 下自行托管 TinyMCE。要使用商业许可证或包含高级插件，请将 gpl 替换为有效的许可证密钥。详细信息，请参阅 设置许可证。

  8. 更新 public/index.html 以包含以下内容：

    • 文档类型声明，<!DOCTYPE html>。

    • 一个引用 tinymce.min.js 的 <script> 元素。

    • 一个引用 TinyMCE 配置（my-tinymce-config.js）的 <script> 元素。

    • 一个带有 id 属性的 <textarea> 元素，该属性与 TinyMCE 配置中的 selector 选项匹配（my-expressjs-tinymce-app）。

      例如：

      <!DOCTYPE html> <!-- Required for TinyMCE to function as intended -->
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TinyMCE Demo</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>

  <body>
    <h1>TinyMCE Demo</h1>
    <!-- Text area matching the selector specified in the TinyMCE configuration -->
    <textarea id="my-expressjs-tinymce-app">Hello, World!</textarea>

    <!-- Script element sourcing TinyMCE -->
    <script type="application/javascript" src= "/tinymce/tinymce.min.js"></script>
    <!-- Script element sourcing the TinyMCE configuration -->
    <script type="application/javascript" src= "/javascripts/my-tinymce-config.js"></script>
  </body>
</html>

  9. 使用 Node.js 开发服务器测试应用程序。

    • 要启动开发服务器，请导航到 my_tinymce_app 目录并运行：

      npm start

    • 访问 http://localhost:3000 查看应用程序。

    • 要停止开发服务器，请在命令行或命令提示符中选择并按 Ctrl+C。

后续步骤