如何在同一页上拥有多个独立的Trix / ActionText富文本区域实例？

在同一页上拥有多个独立的Trix / ActionText富文本区域实例，可以通过以下步骤实现：

引入Trix / ActionText富文本编辑器的相关库文件和样式表。
在HTML页面中创建多个独立的容器（例如div元素）来承载每个富文本区域实例。
在JavaScript中，为每个容器创建独立的Trix / ActionText富文本编辑器实例。
配置每个富文本编辑器实例的选项，如编辑器样式、工具栏按钮、插入图片、自定义链接等。
使用适当的事件监听器，对每个富文本编辑器实例的内容变化进行响应和处理。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="trix.css">
    <script type="text/javascript" src="trix.js"></script>
</head>
<body>
    <div id="editor1"></div>
    <div id="editor2"></div>

    <script type="text/javascript">
        // 创建第一个富文本编辑器实例
        var editor1 = document.getElementById("editor1");
        var trixEditor1 = new Trix.Editor(editor1, {
            // 配置选项
        });

        // 创建第二个富文本编辑器实例
        var editor2 = document.getElementById("editor2");
        var trixEditor2 = new Trix.Editor(editor2, {
            // 配置选项
        });

        // 监听内容变化事件
        trixEditor1.addEventListener("trix-change", function(event) {
            // 处理第一个富文本编辑器的内容变化
        });

        trixEditor2.addEventListener("trix-change", function(event) {
            // 处理第二个富文本编辑器的内容变化
        });
    </script>
</body>
</html>

上述示例中，通过在HTML页面中创建了两个div元素，分别用于承载两个独立的富文本编辑器实例。然后，在JavaScript中使用Trix.Editor类创建了两个富文本编辑器实例，并分别配置了对应的选项。最后，使用addEventListener方法监听了每个编辑器实例的trix-change事件，以便在内容发生变化时进行相应的处理操作。

这是一种常见的实现方式，使得同一页上的多个Trix / ActionText富文本区域实例可以独立地进行编辑和操作。这样的设计适用于需要在同一页上处理多个独立文本内容的场景，例如新闻编辑、博客写作等。对于更复杂的需求，可以根据实际情况进行定制和扩展。