使用 HTMX 从服务器获取文本更新 Quill Editor 的内容

pcplayer

于 2024-10-02 06:19:00 发布

阅读量167

点赞数 2

文章标签：前端 HTMX Quill AJAX

本文链接：https://blog.csdn.net/pcplayer/article/details/142677430

版权

使用 HTMX 可以用很简单的代码，通过 AJAX 的访问，向 WEB SERVER 请求数据。

如果请求来的数据直接用来更新一个 <div></div> 的内容，无需写代码，很简单就能搞定。代码如下：

<button hx-get="GetContent" hx-target="#MyLabel" hx-swap="innerHTML">更新DIV内容</button>
     <div id="MyLabel">

上述代码的解释：

1. 服务器端有一个 http://127.0.0.1:8080/GetContent 的 URL，访问它可以获得一个 HTML 字符串。比如：<strong>这是一个</strong>测试文字。

2. hx-target= 后面的 MyLabel 就是底下那个 <div id="MyLabel">；

3. hx-swap="innerHTML" 说的是把 HTMX 通过 HTTP GET 从服务器拿到的那串字符串，替换那个 DIV 的 innerHTML；

上面的代码，页面上呈现一个按钮，点击按钮，页面上就显示出从服务器端获得的字符串。

但是，Quill Editor 的内容不能这样直接替换

我测试过，直接这样替换，肯定不行。

必须是采用 JavaScript 去调用 Quill 的实例对象来填入内容。代码如下：

const quill = new Quill("#editor", {
                modules: {
                toolbar: [
          { header: [1, 2, 3, 4, 5, 6, false] }, // 标题
          'bold',             // 加粗
          'italic',           // 斜体
          'blockquote',       // 引用
          'link',             // 超链接
          'image',            // 插入图片
          'video',            // 插入视频
          'code',             // 行内代码
          'code-block',       // 代码块
          { list: 'bullet' }, // 无序列表
          { list: 'ordered'}, // 有序列表
          'strike',           // 删除线
          { 'align': [] },    // 对齐方式
          'formula'           // 公式
        ]
                },
                theme: 'snow'
            });


//创建好 quill editor 对象实例后，用以下代码可以把内容写进去：

        s = 'hello <strong>world</strong>';
        quill.root.innerHTML = s;

如何把 HTMX 从服务器读取的内容写进 quill Editor 里面去？

这个问题嘛，我问了问 ChatGPT，它回答的结果不能正确执行，但是给了我思路。来回修改代码测试了一下，发现以下代码是可以运行的：

按钮的 HTML 代码（包含 HTMX 的用法）如下

   <button hx-get="/GetContent" hx-swap="none" hx-on="htmx:afterSwap: updateQuill(event)">
      从服务器读取文本内容
   </button>

上面的按钮，绑定了 HTMX 的 AJAX 方法，然后调用 UpdateQuill 函数，把获取到的文本内容放进 Quill Editor 里面。这里一定要加上 hx-swap="none" 否则按钮上面的文字也会被替换掉。

UpdateQuill 函数，代码如下：

       function updateQuill(event) {
            // 从 HTMX 事件中获取响应内容
            var newContent = event.detail.xhr.responseText;
            quill.root.innerHTML = newContent; // 更新 quill editor 的内容
            console.log(qll.root.innerHTML);

        }