山西国人伟业网站,做黄漫画网站,做网站的专业公司,云南做商城网站多少钱长期以来#xff0c;作为用户我是富文本编辑器的使用者#xff0c;作为前端开发#xff0c;我也只是富文本插件的使用者#xff0c;对内部实现细节不甚了解#xff0c;使用上也只停留在调用插件提供的API#xff0c;实现一些业务逻辑。最近的项目#xff0c;需要开发一个… 长期以来作为用户我是富文本编辑器的使用者作为前端开发我也只是富文本插件的使用者对内部实现细节不甚了解使用上也只停留在调用插件提供的API实现一些业务逻辑。最近的项目需要开发一个简易富文本编辑器也算是让我有机会对其一窥究竟。 可编辑富文本的方式 我们知道form表单中的input、textarea之类标签是支持内容可编辑的但并不支持富文本如果在这些标签里粘贴带格式的内容会被去格式只保留文本内容。如果想设置可编辑富文本有两种方式 嵌入空页面的iframe并设置designMode属性值为“on”这样整个文档就变得可以编辑。iframenamerichtext srcblank.html/iframewindow.addEventListener(loadfunction ()frames(richtext).document.designMode on
});
复制代码需要在嵌入页面加载之后动态设置iframe文档的designMode属性。 使用contenteditable属性该属性最早是由IE实现且可以作用于页面中的任何标签只需要在文档里给标签设置以上属性即可无需嵌入iframe、设置js属性所以这种方式也是目前富文本编辑器插件中更多采用的方式 div classeditbox idrichtext contenteditablep/pp contenteditablefalse/p /
复制代码这样此div元素中包含的内容就可以编辑了当然也可以设置子元素(如第二个P元素)为不可编辑。通过js设置元素的该属性也可以改变编辑模式 var elm document.getElementById(richtext);
elm.contentEditable true;复制代码contenteditable属性有三个可能的值true表示打开编辑模式false表示关闭inherit表示从父元素继承此属性值。contenteditable属性兼容性较好在主流浏览器包括IE以及目前大部分的移动端浏览器上都得到支持。 操作富文本 常见的富文本编辑器插件如wangEditor、百度的UEditor都有各种丰富的菜单区域来设置编辑内容及格式如常规的设置标题、文字加粗、超链接等更胜者插入图片、视频及自定义的内容结构等而实现这些功能的API就是document.execCommand()这个方法是与富文本编辑器进行交互的主要方式。 语法 bool document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
复制代码返回值布尔型false表示操作不支持或未被启用aCommandName命令名称如“bold”aShowDefaultUI是否为该命令提供用户界面一般设为false主流浏览器没实现该功能aValueArgument某些命令的额外参数insertImage命令需要提供插入的图片的url所有支持的commands可查阅MDN其中与剪贴板相关的命令copy、cut、paste各浏览器实现差异较大使用时需关注浏览器差异。 常用的命令举例 // 加粗
document.execCommand(bold, false, null);
// 超链接
document.execCommand(createlink, false, https://www.kaola.com);
// 格式化为h1标题
document.execCommand(formatblock, false, h1);复制代码【注意】虽然所有浏览器都支持以上命令但这些命令生成的html结构仍有差别。如bold命令IE和Opera会使用strong标签包裹文本而Safari和Chrome则使用b标签firefox使用span。 与命令相关的方法 queryCommandEnabled 返回布尔值用于检测是否可以针对当前选择的文本或当前光标位置执行某个命令var canBold document.queryCommandEnabled(bold);
复制代码queryCommandState 返回布尔值用于判断当前选择的文本是否已经应用了指定的命令var isBold document.queryCommandState(bold);
复制代码可以使用这个方法来设置编辑器中加粗、斜体等按钮的状态。 queryCommandValue 用于获取执行某个命令时传入的值即execCommand()方法的第三方参数富文本选区 Seletion Seletion对象是指用户选中的文本范围或鼠标的当前位置通过window.getSelection()来获取该对象。 Seletion对象的属性如下 anchorNode选区起点所在节点anchorOffsetanchorNode中包含在选区内的字符数focusNode选区终点所在节点focusOffsetfocusNode中包含在选区内的字符数isCollapsedboolean选区的起点与终点是否重合如果是可以认为当前没有内容选中rangeCount选区中包含的DOM范围的数量type描述当前选区的类型Selection对象的方法参阅MDN。这些方法在富文本编辑器插件里都是很有用的方法比如控制光标的方法collapse()、collapseToEnd()、collapseToStart()可以设置插入内容之后光标的位置 获取选区包含的文本的方法toString()getRangeAt(index)方法返回索引对应的选区中的DOM范围即range对象 来看一个例子 // 获取选区内容的位置
function getSelPos () {let sel window.getSelection()let rg sel.getRangeAt(0)let elmRect rg.getClientRects()[0]let editorRect $(.j-editor)[0].getBoundingClientRect() // 编辑器容器let pos {}if (elmRect) {// 选区内容居中位置距容器的左距离pos.x elmRect.left - editorRect.left elmRect.width / 2 pos.y elmRect.top - editorRect.top}return pos
}复制代码上述方法可以获取当前选区相对于编辑器容器的位置可以用来设置在选区附近出现的工具条等。 想实时监测选区的变化可以监听onselectionchange事件 // 高频事件做好节流
document.onselectionchange _.debounce(this.onSelect, 100)
复制代码处理paste内容 如果往富文本编辑器里粘贴内容是会把内容的样式也粘贴进来的浏览器自动会把应用到某个标签的样式内联到此标签的style属性。但更多的时候我们只是需要保留里面的部分格式需要针对剪贴板中的内容进行过滤、格式化以及特定内容保留等。 editorElem.on(paste, event {event.preventDefault();let clipboardData event.clipboardData || event.originalEvent event.originalEvent.clipboardData || {};let text clipboardData.getData(text/plain);let html clipboardData.getData(text/html);})复制代码通过侦听paste事件能获取到事件对象上的clipboardData对象获取粘贴的内容可以通过getData方法获取剪切版上的纯文本或html结构。 有了html结构就可以转成dom对象针对处理了。默认情况下剪贴板中的 下面重点说下对剪贴板中图片的处理。如果剪贴板中的网页元素包含图片即img标签如果直接粘贴到编辑器该图片的链接地址是原网页所在的图片地址这里就要考虑到如果外链别人网站的图片就有可能有朝一日这个图片不可用所以还是要放到自家的服务器上才放心。这里就涉及到已知一张图片的可访问的链接地址如何把该图片上传到自己的服务器上呢 不考虑兼容性给出一种可行的方案通过canvas画布获取图片的数据并将数据转为blob对象并进行上传。步骤如下 new一个Image对象设置src属性为已知图片的url在图片对象的onload事件里创建canvas画布通过其toDataURL方法获取图片数据将图片数据转为一个blob对象并调用图片上传接口上传该blob对象// 根据图片的url上传图片
export function uploadImgWithUrl(imgUrl, editor) {/*** 数据转blob对象*/function dataToBlob(data) {var bytes void 0;bytes data.split(,)[0].indexOf(base64) 0 ? window.atob(data.split(,)[1]) : unescape(data.split(,)[1]);var paramType data.split(,)[0].split(:)[1].split(;)[0];var uArr new Uint8Array(bytes.length);for (let i0; i bytes.length; i) {uArr[i] bytes.charCodeAt(i);}return new Blob([uArr], {type: paramType,name: blob.png});}var options this;return new Promise(function(resolve, reject) {var img new Image;img.setAttribute(crossOrigin, anonymous);img.onload function() {var canvas document.createElement(canvas);canvas.width img.width;canvas.height img.height;canvas.getContext(2d).drawImage(img, 0, 0);var data canvas.toDataURL(image/png);var blob dataToBlob(data);blob.name blob.jpg// 调用编辑器的上传图片接口 or 也可自行实现一个图片上传方法editor.uploadImg.uploadImg([blob], function(result){if (result result.body) {var link result.body.imageUrlList || [];var item {resourceType: image,imageUrl: link[0]}resolve(item);}})};img.onerror function() {reject();Message.error(图片不允许跨域访问请手动下载后添加)};imgUrl -1 ! imgUrl.indexOf(?) ? imgUrl time (new Date).getTime() : imgUrl ?time (new Date).getTime();img.src imgUrl;});
}复制代码以上是将在线的图片上传到服务器的一种解决方法也在项目中进行了实践。对于剪贴板内存中的图片内容可以通过getAsFile()方法来获取进而上传 // 处理内存中的图片
if (clipboardData.items[0]) {let item clipboardData.items[0]let type item.type;let regResult type.match(/image\/(.)/)if (regResult) {let blob item.getAsFile();// 调用编辑器的通用上传接口editor.uploadImg.uploadImg([blob])}
}复制代码最后 以上只算上对富文本编辑器的基本知识点进行了初步的梳理如果想自己造轮子撸一个编辑器出来需要解决的问题还有很多可以看下知乎上的讨论为什么都说富文本编辑器是天坑里面提到实现一个令人满意的编辑器需要各种填坑以及良好的设计模式路漫漫其修远兮…… 参考文献 JavaScript标准Selection操作html元素contenteditable属性如何定位光标和设置光标关于 HTML5 的文件上传处理兼容以及 BLOB 对象的使用《JavasSript高级程序设计》 - 富文本编辑文件和二进制数据的操作by lzf 尽量关注网易考拉前端团队微信公众号
