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

使用 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',            
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值