一个富文本的相关api

最近做项目,遇到一个需要配合用户点击字段输入简单的sql来查询数据库的控件,类似于简单的phpmyadmin的功能,截图如下:

一个富文本的相关api 第1张

主要记录一下用到的方法

  1. 创建富文本

    	o.createEditor = function (param) {
    		/*param.editorBox,//插入编辑器的dom
    		
    		}
    		*/
    		var iframe = document.createElement('iframe');
    		//
    		iframe.frameBorder =0;
    		iframe.scrolling ="auto";
    		iframe.width ="100%";
    		iframe.height = 200;
    		param.editorBox.appendChild(iframe);
    		var ifr_win = iframe.contentWindow;
    		var ifr_doc = ifr_win.document;
    		var iframeDocument = iframe.contentDocument;
    		var editorContent = ' ';
    		ifr_doc.designMode = 'On'; //可编辑
    		ifr_doc.contentEditable = true;
    		ifr_doc.open();
    		ifr_doc.writeln('' + editorContent + '');
    		ifr_doc.close();
    		//绑定事件
    		ifr_doc.addEventListener("selectionchange", function (e) {
    			param.range = onselectionchange(e,ifr_win);
    		}, true);
    		ifr_doc.addEventListener("click", function (e) {
    			param.range = onselectionchange(e,ifr_win);
    		}, true);
    		ifr_doc.addEventListener("keydown", function (e) {
    			param.range = onselectionchange(e,ifr_win);
    		}, true);
    		param.iframe = iframe;
    		param.DOM = iframeDocument;		 
    		deleteNodeEditor(param);
    		return param;
    	}
  2. 给富文本里插入html

    这个方法比较重要。。

    o.insertHTML=function(param, html) {
    		var iframe = param.iframe;
    		iframe.contentWindow.focus();
    		var iframeDocument =param.DOM;
    		var selection = iframe.contentWindow.getSelection();
    		var range;
    		if (selection) {
    			range = selection.getRangeAt(0);
    		} else {
    			range = iframeDocument.createRange();
    		}
    		var oFragment = range.createContextualFragment(html),
    		oLastNode = oFragment.lastChild;
    		range.insertNode(oFragment);
    		range.setEndAfter(oLastNode);
    		range.setStartAfter(oLastNode);
    		selection.removeAllRanges(); //清除选择
    		selection.addRange(range);
    	}
  3. 删除元素

    o.deleteHTML=function(param, node) {
    		 //删除富文本的某个元素		 
    		  if(node && node.parentNode && node.tagName !=  'BODY'){
    			node.parentNode.removeChild(node);
    		}
    	}

大致的代码就这么多,下面这个链接是我自己的项目用到的editor.js

点击查看demo

参考文档

  1. 圆心哥哥的blog,关于获取textarea光标的

  2. 正美大大的:一步步教你实现富文本编辑器(第四部分)

本文标题:一个富文本的相关api
本文链接:https://56way.com/p/40.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。