原生JS编写简单的编辑器

使用vue编写的,没有任何依赖,可改写其它形式
轻量级编辑器只是在document.execCommand()方法做了包装,不兼容的浏览器器生成的标签是一致的,所以的富文本的选择要根据项目决定

实现了一点功能,写了个dome,加深对富文本原理的理解

template

<div class="page-editor"><div class="editor-wrapper"><div class="toolbar"><ul @click="menuHandle"><li v-for="(item,index) in menuList" :key="index" :data-index="index"><a href="javascript:;" :class="[{'ban-operate': item.isActive}]"><i :class="['iconfont',item.icon]"></i></a></li></ul></div><div class="body" contenteditable="true" ref="editor" v-focus="true"@keyup.enter="enterHandle"@keyup.delete="deleteHandle"></div></div>
</div>

 template: tpl,data() {return {newNode:null,lastRange:null,selection:window.getSelection(),isIE:window.navigator.userAgent.indexOf("MSIE")>=1,menuList:[{icon:"icon-zitibiaoti",detail:"标题",isActive:false},{icon:"icon-jiacu",detail:"加粗",isActive:false},{icon:"icon-xieti",detail:"倾斜",isActive:false},{icon:"icon-youxuliebiao",detail:"有序列表",isActive:false}]}},created(){},mounted(){this.initEditor();},methods:{initEditor(){this.$refs.editor.innerHTML = "<p><br/></p>"},enterHandle(){let range = this.getRange();let el = this.getNode(range.commonAncestorContainer);if(range.collapsed) {if (el.nodeName === "DIV") {let p = document.createElement("p");p.innerHTML="<br>";el.parentNode.replaceChild(p,el);};}},deleteHandle(){const that = this;if(!that.$refs.editor.innerHTML){that.$refs.editor.innerHTML = "<p><br/></p>"}},menuHandle(el){let target = this.getTarget(el,"LI"),index = this.dataSet(target,"index");switch (index) {case 0:this.menuList[index].isActive= !this.menuList[index].isActive;this.titleBtn(this.menuList[index].isActive);break;case 1:this.menuList[index].isActive= !this.menuList[index].isActive;this.blodBtn(this.menuList[index].isActive);break;case 2:this.menuList[index].isActive= !this.menuList[index].isActive;this.italicBtn(this.menuList[index].isActive);break;case 3:this.menuList[index].isActive= !this.menuList[index].isActive;this.olListBtn(this.menuList[index].isActive);break;}},titleBtn(isFouce) {console.log(isFouce);if(isFouce){let insertHtml = "<span style='font-size:28px;'></span>";this.addHtml(insertHtml);}else{this.clearForm();}},blodBtn(isFouce){if(isFouce) {let insertHtml = "<span style='font-weight:600;'></span>";this.addHtml(insertHtml);}else{this.clearForm();}},italicBtn(isFouce){if(isFouce) {let insertHtml = "<i></i>";this.addHtml(insertHtml);}else{this.clearForm();}},olListBtn(isFouce){if(isFouce) {let range = this.getRange();document.execCommand("insertOrderedList");if (range.collapsed) {let el = range.commonAncestorContainer;while (el.nodeName !== "P") {el = el.parentNode;};let replaceNode = el.firstChild.cloneNode(true);el.parentNode.replaceChild(replaceNode, el);}this.clearRange(range);}else{this.clearForm();}},clearForm(){let range = this.getRange();let pNode = range.endContainer.parentNode.parentNode;if(pNode){let str = pNode.innerHTML.replace(/\u200B/g,'');range.selectNode(pNode);      //创建范围的内容range.extractContents();let fNode = document.createDocumentFragment();let newNode = document.createElement(pNode.nodeName);if(pNode.attributes['style']){let styles = pNode.attributes['style'].value;newNode.style= styles;}fNode.appendChild(newNode);if(str.indexOf("<br>")>-1){str = str.replace(/\<br>/g,'');}newNode.innerHTML = str+'\u200B <br>';range.insertNode(fNode);};range.setEndAfter(range.endContainer.parentNode);range.collapse(true);},getHtml(){return this.$refs.editor.innerHTML;},setHtml(val){this.$refs.editor.innerHTML = val;},clearHtml(){this.$refs.editor.innerHTML="<p><br></p>";},getRange(){if(this.selection.rangeCount>0){return this.selection.getRangeAt(0);};},addHtml(html){let range = this.getRange();let fragment = range.createContextualFragment(html);let node = fragment.firstChild;range.insertNode(fragment);if(!node.firstChild){let text = document.createTextNode("\u200B");node.appendChild(text)};range.setStart(node.firstChild,1);range.setEnd(node.firstChild,1);range.collapse(true);this.clearRange(range);},clearRange(range){this.lastRange = range.cloneRange();range.detach();range = null;this.selection.removeAllRanges();this.selection.addRange(this.lastRange);},dataSet(el,name){let index;if(el){if (el.dataset) {index = parseInt(el.dataset[name]);} else {index = parseInt(el.getAttribute('data-'+name));}return parseInt(index);}},getTarget(el,targetName) {let target = el.target;while(target.nodeName!==targetName){target = target.parentNode;};el.stopPropagation();return target;},getNode(el){while(el.nodeType!==1){el = el.parentNode;};return el;}},directives: {focus: {inserted: function (el,binding) {if(binding.value){el.focus();}}}}

less

.page-editor{position: relative;border: 1px solid #c9d8db;margin: 15px;.editor-wrapper{position: relative;background: #fff;}.toolbar{border-bottom: 1px solid #eee;background: #fff;ul li{position: relative;display: inline-block;font-size: 0;}ul li a{display: inline-block;width: 46px;height: 40px;outline: 0;color: #333;font-size: 14px;line-height: 40px;vertical-align: middle;text-align: center;text-decoration: none;}ul li a i{font-size: 18px;}}.body{font-size: 16px;font-family: arial,sans-serif;line-height: 1.6;color: #333;outline: 0;word-wrap: break-word;padding: 22px 15px 40px;min-height: 300px;cursor: text;position: relative;z-index: 1;background: 0 0;}.body{ol{margin-left: 15px;}}.ban-operate{background-color: #909399;}}

原生JS编写简单的编辑器相关推荐

原生API编写简单富文本编辑器001
原生API编写简单富文本编辑器001 系列文章快速阅读: 富文本编辑器开发系列-1-基础概念富文本编辑器开发系列2-document.execCommand 的API 富文本编辑器开发系列3-sel ...
原生js编写的todos
原生js编写的todos 如果有什么问题,可以直接问我 <!DOCTYPE html> <html><head><meta charset="UTF ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...
原生js编写小米购物车
原生js编写小米购物车案例思路一.将数据渲染到下方ul中 1.遍历数据添加到li标签内二.渲染购物车内容,将ul中li添加到购物车.添加点击事件 1.加入购物车内容1.判断购物车内需不需要添加此 ...
深圳java培训：使用原生JS重构简单的音乐播放器
深圳java培训:使用原生JS重构简单的音乐播放器上次,我们使用Jquery开发了一款简单的音乐播放器(如下图), 后来学生希望能够用原生的JS重构一次, 那么,下面就来看看如何使用原生的JS重构吧 ...
用p5.js编写简单的动态图形——波纹扩散
用p5.js编写简单的动态图形--波纹扩散第一次使用p5.js写程序,如有错误请指出,多多指教. 没有下载p5.js的小伙伴可以直接使用网页版的,简单注册一个账号之后就可以保存代码啦. 网站:htt ...
js html颜色代码,原生js编写的浏览器安全色网页拾色器色盘生成颜色代码
原生js编写的浏览器安全色网页拾色器 by js.alixixi.com #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPic ...
利用HTML+WEBSQL（sqlite）完成创建数据库，完成对数据的增删改查（使用原生JS编写）
前端和数据在日常编写一些页面的时候总希望能够把"用户生产"的数据保存下来到数据库中.今天学习了如何用WEBSQL(可以理解为浏览器自带的SQLite数据库)进行数据的保存以及在前 ...

原生JS编写简单的编辑器

原生JS编写简单的编辑器相关推荐

最新文章

热门文章