Review Squire:一个高效的HTML5富文本编辑器

Squire是一款轻量级的HTML5富文本编辑器，专为应用程序的富文本输入表单和简单文档创建设计。它支持多种浏览器，包括Opera 10、Firefox 3.5、Safari 4、Chrome 9和IE8，但在这些版本中运行效果最佳。Squire不适用于创建和编辑所见即所得的网页，但对于许多网络应用来说是一个理想的选择，因为它提供了简洁而强大的功能，且拥有MIT许可证，允许灵活重用。

Squire由FastMAIl团队开发，目的是简化他们的网络邮件编辑器需求。FastMail是一个优秀的基于云的电子邮件服务，以其对用户隐私的重视而闻名。团队发现现有的编辑器，如TinyMCE，虽然适用，但并非专为编写邮件设计，因此他们决定构建Squire。Squire的压缩和gzip后的JavaScript文件大小仅为11.5 KB（未压缩为34.7 KB），无任何依赖，非常轻便。

Squire利用选择和范围API来操作DOM，减少了跨浏览器的兼容性问题。其工作原理是让浏览器尽可能多地处理任务，而在需要控制或存在显著差异的地方进行干预。安装Squire只需将构建目录的内容复制到你的应用中，编辑`document.htML`的样式，并通过“标签而非``元素来使用编辑器。</p> <p>Squire的演示展示了如何使用编辑器，包括如何处理简单的命令（如加粗文本）和需要用户输入的复杂命令（如<a class="external" href="https://daohang.syekeji.com/tag/%e8%ae%be%e7%bd%ae" title="查看与 设置 相关的文章" target="_blank">设置</a>字体大小）。此外，演示还使用了一个自定义的Bootstrap样式的<a class="external" href="https://daohang.syekeji.com/tag/%e5%b7%a5%e5%85%b7" title="查看与 工具 相关的文章" target="_blank">工具</a>栏，通过jQuery和Ajax实现动态交互。</p> <p>如果你对Squire感兴趣，可以访问其GitHub代码库和FastMail的博客了解更多详情。希望这个简要介绍能帮助你在自己的应用中有效地使用Squire。如果你有任何问题或反馈，欢迎在下方留言或通过Twitter @reifman与作者联系。</p> </div> <div class="post-tags my-3"><i class="iconfont icon-tags mr-2"></i><a href="https://daohang.syekeji.com/wordprssjiaoc" class="btn vc-l-cyan btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># Wordpress</a><a href="https://daohang.syekeji.com/tag/697" class="btn vc-l-cyan btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># AI</a><a href="https://daohang.syekeji.com/tag/ml" class="btn vc-l-blue btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># ML</a><a href="https://daohang.syekeji.com/tag/wordpress" class="btn vc-l-violet btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># WordPress</a><a href="https://daohang.syekeji.com/tag/%e5%b7%a5%e5%85%b7" class="btn vc-l-yellow btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># 工具</a><a href="https://daohang.syekeji.com/tag/%e5%ba%94%e7%94%a8" class="btn btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># 应用</a><a href="https://daohang.syekeji.com/tag/815" class="btn btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># 应用程序</a><a href="https://daohang.syekeji.com/tag/%e6%95%88%e6%9e%9c" class="btn vc-l-violet btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># 效果</a><a href="https://daohang.syekeji.com/tag/%e6%9e%84%e5%bb%ba" class="btn vc-l-yellow btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># 构建</a><a href="https://daohang.syekeji.com/tag/%e6%a0%87%e7%ad%be" class="btn vc-l-violet btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># 标签</a><a href="https://daohang.syekeji.com/tag/%e8%ae%be%e7%bd%ae" class="btn vc-l-red btn-sm text-xs text-height-xs m-1 rounded-pill" rel="tag" title="查看更多文章"># 设置</a></div><div class="text-xs text-muted"><div><span>©</span> 版权声明</div><div class="posts-copyright">文章版权归作者所有，未经允许请勿转载。</div></div> </div> </div> <div class="near-navigation rounded mt-4 py-2"> <div class="nav previous border-right border-color"> <a class="near-permalink" href="https://daohang.syekeji.com/3838.html"> <span>上一篇</span> <h4 class="near-title">从WordPress网站提取帖子指南</h4> </a> </div> <div class="nav next border-left border-color"> <a class="near-permalink" href="https://daohang.syekeji.com/3840.html"> <span>下一篇</span> <h4 class="near-title">创建WordPress登录页面:逐步指南</h4> </a> </div> </div> <h4 class="text-gray text-lg my-4"><i class="site-tag iconfont icon-book icon-lg mr-1" ></i>相关文章</h4> <div class="row mb-n4"> <div class="col-6 col-md-4"> <div class="card-post list-item"> <div class="media media-4x3 p-0 rounded"> <a class="media-content" href="https://daohang.syekeji.com/3413.html" target="_blank" data-src="https://daohang.syekeji.com/wp-content/uploads/2023/08/速业导航.png"></a> </div> <div class="list-content"> <div class="list-body"> <a href="https://daohang.syekeji.com/3413.html" target="_blank" class="list-title text-md overflowClip_2"> OpenAI 推出 Model Spec 拟议框架，探索生成 NSFW 内容等 AI 响应规范 </a> </div> <div class="list-footer"> <div class="d-flex flex-fill align-items-center"> <a href="https://daohang.syekeji.com/author/2" class="flex-avatar mr-1" target="_blank"> <img alt='' src='//daohang.syekeji.com/wp-content/uploads/avatars/2.jpg?_=1692633997' class=' avatar avatar-20 photo' height='20' width='20' /> </a> <a href="https://daohang.syekeji.com/author/2" class="d-none d-md-inline-block text-xs" target="_blank">SUYEONE</a> <div class="flex-fill"></div> <div class="text-muted text-xs"> <span class="views mr-1"><i class="iconfont icon-chakan mr-1"></i>1K</span> </div> </div> </div> </div> </div> </div> <div class="col-6 col-md-4"> <div class="card-post list-item"> <div class="media media-4x3 p-0 rounded"> <a class="media-content" href="https://daohang.syekeji.com/4539.html" target="_blank" data-src="https://daohang.syekeji.com/wp-content/uploads/2023/08/速业导航.png"></a> </div> <div class="list-content"> <div class="list-body"> <a href="https://daohang.syekeji.com/4539.html" target="_blank" class="list-title text-md overflowClip_2"> Spotify 成立内部创意机构 Creative Lab，测试生成式 AI 广告 </a> </div> <div class="list-footer"> <div class="d-flex flex-fill align-items-center"> <a href="https://daohang.syekeji.com/author/2" class="flex-avatar mr-1" target="_blank"> <img alt='' src='//daohang.syekeji.com/wp-content/uploads/avatars/2.jpg?_=1692633997' class=' avatar avatar-20 photo' height='20' width='20' /> </a> <a href="https://daohang.syekeji.com/author/2" class="d-none d-md-inline-block text-xs" target="_blank">SUYEONE</a> <div class="flex-fill"></div> <div class="text-muted text-xs"> <span class="views mr-1"><i class="iconfont icon-chakan mr-1"></i>575</span> </div> </div> </div> </div> </div> </div> <div class="col-6 col-md-4"> <div class="card-post list-item"> <div class="media media-4x3 p-0 rounded"> <a class="media-content" href="https://daohang.syekeji.com/3798.html" target="_blank" data-src="https://daohang.syekeji.com/wp-content/uploads/2023/08/速业导航.png"></a> </div> <div class="list-content"> <div class="list-body"> <a href="https://daohang.syekeji.com/3798.html" target="_blank" class="list-title text-md overflowClip_2"> 本文详细说明了用WordPress (wordpress lms)制作CMS栏目块的方法。 </a> </div> <div class="list-footer"> <div class="d-flex flex-fill align-items-center"> <a href="https://daohang.syekeji.com/author/2" class="flex-avatar mr-1" target="_blank"> <img alt='' src='//daohang.syekeji.com/wp-content/uploads/avatars/2.jpg?_=1692633997' class=' avatar avatar-20 photo' height='20' width='20' /> </a> <a href="https://daohang.syekeji.com/author/2" class="d-none d-md-inline-block text-xs" target="_blank">SUYEONE</a> <div class="flex-fill"></div> <div class="text-muted text-xs"> <span class="views mr-1"><i class="iconfont icon-chakan mr-1"></i>790</span> </div> </div> </div> </div> </div> </div> <div class="col-6 col-md-4"> <div class="card-post list-item"> <div class="media media-4x3 p-0 rounded"> <a class="media-content" href="https://daohang.syekeji.com/4685.html" target="_blank" data-src="https://daohang.syekeji.com/wp-content/uploads/2023/08/速业导航.png"></a> </div> <div class="list-content"> <div class="list-body"> <a href="https://daohang.syekeji.com/4685.html" target="_blank" class="list-title text-md overflowClip_2"> 7 月 15 日发售，华硕预告搭载 AMD Ryzen AI 300 系列 APU 的笔记本 </a> </div> <div class="list-footer"> <div class="d-flex flex-fill align-items-center"> <a href="https://daohang.syekeji.com/author/2" class="flex-avatar mr-1" target="_blank"> <img alt='' src='//daohang.syekeji.com/wp-content/uploads/avatars/2.jpg?_=1692633997' class=' avatar avatar-20 photo' height='20' width='20' /> </a> <a href="https://daohang.syekeji.com/author/2" class="d-none d-md-inline-block text-xs" target="_blank">SUYEONE</a> <div class="flex-fill"></div> <div class="text-muted text-xs"> <span class="views mr-1"><i class="iconfont icon-chakan mr-1"></i>590</span> </div> </div> </div> </div> </div> </div> <div class="col-6 col-md-4"> <div class="card-post list-item"> <div class="media media-4x3 p-0 rounded"> <a class="media-content" href="https://daohang.syekeji.com/4817.html" target="_blank" data-src="https://daohang.syekeji.com/wp-content/uploads/2023/08/速业导航.png"></a> </div> <div class="list-content"> <div class="list-body"> <a href="https://daohang.syekeji.com/4817.html" target="_blank" class="list-title text-md overflowClip_2"> 苹果 DockKit 原生追踪，影石 Insta360 Flow Pro AI 手机稳定器发布：899 元起 </a> </div> <div class="list-footer"> <div class="d-flex flex-fill align-items-center"> <a href="https://daohang.syekeji.com/author/2" class="flex-avatar mr-1" target="_blank"> <img alt='' src='//daohang.syekeji.com/wp-content/uploads/avatars/2.jpg?_=1692633997' class=' avatar avatar-20 photo' height='20' width='20' /> </a> <a href="https://daohang.syekeji.com/author/2" class="d-none d-md-inline-block text-xs" target="_blank">SUYEONE</a> <div class="flex-fill"></div> <div class="text-muted text-xs"> <span class="views mr-1"><i class="iconfont icon-chakan mr-1"></i>800</span> </div> </div> </div> </div> </div> </div> <div class="col-6 col-md-4"> <div class="card-post list-item"> <div class="media media-4x3 p-0 rounded"> <a class="media-content" href="https://daohang.syekeji.com/3901.html" target="_blank" data-src="https://daohang.syekeji.com/wp-content/uploads/2023/08/速业导航.png"></a> </div> <div class="list-content"> <div class="list-body"> <a href="https://daohang.syekeji.com/3901.html" target="_blank" class="list-title text-md overflowClip_2"> 微软测试 Win11 Copilot 新功能，让 AI 帮你快速找到想要的设置选项 </a> </div> <div class="list-footer"> <div class="d-flex flex-fill align-items-center"> <a href="https://daohang.syekeji.com/author/2" class="flex-avatar mr-1" target="_blank"> <img alt='' src='//daohang.syekeji.com/wp-content/uploads/avatars/2.jpg?_=1692633997' class=' avatar avatar-20 photo' height='20' width='20' /> </a> <a href="https://daohang.syekeji.com/author/2" class="d-none d-md-inline-block text-xs" target="_blank">SUYEONE</a> <div class="flex-fill"></div> <div class="text-muted text-xs"> <span class="views mr-1"><i class="iconfont icon-chakan mr-1"></i>900</span> </div> </div> </div> </div> </div> </div> </div> <!-- comments --> <div id="comments" class="comments"> <h2 id="comments-list-title" class="comments-title h5 mx-1 my-4"> <i class="iconfont icon-comment"></i> <span class="noticom"> <a href="https://daohang.syekeji.com/3839.html#respond" class="comments-title" >暂无评论</a> </span> </h2> <div class="card"> <div class="card-body"> <div id="respond_box"> <div id="respond" class="comment-respond"> <form id="commentform" class="text-sm mb-4"> <div class="visitor-avatar d-flex flex-fill mb-2"> <img class="v-avatar rounded-circle" src="https://daohang.syekeji.com/wp-content/themes/onenav/images/gravatar.jpg"> </div> <div class="comment-textarea mb-3"> <textarea name="comment" id="comment" class="form-control" placeholder="输入评论内容..." tabindex="4" cols="50" rows="3">