web轻量级富文本框编辑
前言
主要介绍squire，wangeditor富文本编辑
以及用原生js 如何实现多个关键字标识
需求
如何标记多个关键字，取消关键字
第一种方法 原生 textarea 标记
准备资料参考：张鑫旭大大的博客 讲得非常的清楚哦
demo栗子：https://www.zhangxinxu.com/study/201104/range-miniblog-insert-topic.html
推荐文章：JS Range HTML文档/文字内容选中、库及应用介绍
知识点储备：range对象, getSelection MDN文档直通车
优点：原生实现的，不用额外引用第三方插件
缺点：功能稍微复杂一点 就难拓展了 全部自己写 花费的时间比较长
我的实践项目经验
痛点一：不可以插入<span style=’color:red’></span> 标记三四个关键字是没有问题的，但是多个后 会标记的不准 计算的位置不准确。有尝试用正则匹配，但是解决的不理想（这里还是个人写的有问题）
思路：通过range 可以得到当前选中文字的位置，得到的文本加入标识（比如插入话题是#），选中的文字获取的位置包括插入的标识。之所以会导致位置计算不准<span>这个也是要记上的。
但是这个长度也是固定的 不应该存在计算位置准确（由于写法很久以前了 也没有留存）希望在座的各位不会出现这种情况
核心代码
funGetSelected(element){ // console.log(element.selectionStart, element.selectionEnd) //获取选中内容 if (!window.getSelection) { //IE浏览器 return document.selection.createRange().text; } else { return { selectedText: element.value.substr(element.selectionStart, element.selectionEnd - element.selectionStart), startPos: element.selectionStart, endPos: element.selectionEnd }; } },
funTextAsTopic(textObj, textFeildValue, flag){ textObj.focus(); if (textObj.createTextRange) { var caretPos = document.selection.createRange().duplicate(); document.selection.empty(); caretPos.text = textFeildValue; } else if (textObj.setSelectionRange) { var rangeStart = textObj.selectionStart; var rangeEnd = textObj.selectionEnd; var tempStr1 = textObj.value.substring(0, rangeStart); var tempStr2 = textObj.value.substring(rangeEnd); textObj.value = tempStr1 + textFeildValue + tempStr2; if(flag == 'delete'){ textObj.value = textObj.value.replace(`<${textFeildValue}>`, textFeildValue) } textObj.blur(); return textObj.value } },
第二种方法 富文本框squire
如果你不是用vue 也不是用react 或者ang 这个插件完全足够了
官网链接：http://neilj.github.io/Squire/
优点：超级轻量 很灵活（比我接下来要介绍的 wangeditor 要 灵活）
缺点：虽然我找到了npm 安装包 但是import失败 官网文档上没有看到写
也没有看到哪个筒子写了 如何引用成功（原生js 页面是完全可以的）
其他的 倒是没有体验太多
贴主要代码 这个我有一个完全写好的demo 有需要的可以私信我
$(function() { // 创建对象 const editor = new Squire(document.getElementById('demo')); //监听粘贴事件 editor.addEventListener('willPaste', function(data) { const content = $(data.fragment).text(); // 停止粘贴 data.preventDefault(); // 转换成text添加到富文本 editor.insertHTML(content); }); // 按钮事件 $('#btn').on('click', function() { if (editor.getSelectedText().length == 0) { return; } if ($(editor.getSelection().commonAncestorContainer.parentNode).hasClass('colour')) { editor.setTextColour('') return; } // 将选中的文字设置成红色 editor.setTextColour('red'); //editor.insertHTML(`<span style="color: red;"><${editor.getSelectedText()}></span>`); // 聚合 const content = editor.getHTML().replace(/<\/span><span class="colour" style="color:red">/g, ''); editor.setHTML(content); }); // 关键字事件 $('#demo').on('click', '.colour', function() { alert('这是一个关键字点击事件,当前关键字是： '+$(this).text()); }); //$('#demo').on('mouseenter', '.colour', function() { //alert('这是一个关键字悬浮事件,当前关键字是： '+$(this).text()); //}); });
怎么引用都不会成功 由于我们的项目主要用的vue 框架（如果一定要用的话 应该要自己封装一层）
第三种方法富文本编辑 wangeditor
第二个框架的是完全满足我们的需求了，但是我自己懒得再去封装怎么在vue里面引用成功
有专门的学习手册：https://www.kancloud.cn/wangfupeng/wangeditor3/404586
源码开源：https://github.com/wangfupeng1988/wangEditor
优点：满足基本的富文本编辑，有专门的文档，还在维护
缺点：不可以自定义工具栏 方法没有这么灵活 需要变通一下才可以实现某些功能
我的实战项目经验
可以获取当前选中文本，可以取消标记，可以获取当前焦点最近的关键字。
核心主要代码
import E from 'wangeditor' //引用 var editor = new E(this.$refs.editor) editor.customConfig.onchange = (html) => { this.editorContent = editor.selection.getSelectionText() console.log(editor.selection.getSelectionText()) } editor.customConfig.menus = [ //配置菜单 'foreColor' ] editor.customConfig.colors = [ //配置颜色 'red','#000' ] editor.customConfig.onfocus = function () { } editor.create() document.getElementById('btn2').addEventListener('click', function () { // 读取 text let key = editor.selection.getSelectionText() //获取选中内容 }, false) document.getElementById('btn1').addEventListener('click', function () { //取消标记 let test = editor.selection.getSelectionStartElem()[0].style.color if(test == 'red'){ editor.selection.getSelectionStartElem()[0].style.color = '#000' } }, false) $('#editor').on('click', function() { //获取最近关键字 let texts = editor.selection.getSelectionStartElem()[0].innerText });
fannie式总结
延伸思考 就是有很多中标记 这个标记的内容 都要对应储存 不同颜色区分 可以取消标记这些之类的
还有web用富文本有一点点安全性问题哦