前端入门-富文本编辑器(一)

背景需求

技术需求：扩展 富文本编辑器  功能

技术调研

目标：本着不重复造轮子，集中精力解决业务逻辑。 其实主要是没技术实力....

方向：寻找开源的富文本编辑器； 发现 各个开源的都差不多(技术菜，看不出区别)，传统的编辑器太庞大，适合移动端的较少

结果：公司最近在搞tower,发现他们公司有个开源的simditor，就拿过来试了试，发现还不错呢

现状：too young too simple , 自行搜索‘富文本编辑器都是坑’

扒开来看

官方demo下载，一切ok

我的需求：调用某个方法可以插入自定义图片； 秉着钻（拼）研（死）精（一）神（搏），改写插入横线模块源码，果然可以插入图片，有戏

  HrButton.prototype.command = function() {
    var $hr, $newBlock, $nextBlock, $rootBlock;
    $rootBlock = this.editor.selection.rootNodes().first();
    $nextBlock = $rootBlock.next();
    if ($nextBlock.length > 0) {
      this.editor.selection.save();
    } else {
      $newBlock = $('
').append(this.editor.util.phBr);
    }
     $hr = $('').insertAfter($rootBlock);//原来的代码:$hr = $('
').insertAfter($rootBlock);

照葫芦画瓢

扩展: 在Simditor对象原型里边增加一个function   ，如

	Simditor.prototype.insertJQNode($node)//参数为一个jquery 封装的dom对象 

这样我就可以在js中随意调用 new Simditor().insertJQNode($(""))来插入图片了。

下边就是具体扩展方式，按照Simditor的规范去定义prototype

(function(root, factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD. Register as an anonymous module.
		define([ "jquery", "simple-module", "simditor" ], function($,
				SimpleModule) {
			return (root.returnExportsGlobal = factory($, SimpleModule));
		});
	} else if (typeof exports === 'object') {
		// Node. Does not work with strict CommonJS, but
		// only CommonJS-like enviroments that support module.exports,
		// like Node.
		module.exports = factory(require("jquery"), require("simple-module"),
				require("simditor"));
	} else {
		root['Simditor'] = factory(jQuery, SimpleModule);
	}
}(this, function($, SimpleModule) {

	
	Simditor.prototype.insertJQNode = function($node) {

		//主要代码在这..........................

	};

	return Simditor;

}));

现在框架搭起来了，就差insertJQNode 方法的实现：

	Simditor.prototype.insertJQNode = function($node) {

		if (!$node) {
			console.error("$node is null");
			return;
		}
		if (!this) {
			console.error("Simditor instance  is null");
			return;
		}
		this.focus();// 获取焦点

		var $newNode, $newBlock, $nextBlock, $rootBlock;
		// console.log(this['selection'].rootNodes())
		$rootBlock = this['selection'].rootNodes().first();//选中节点中的第一个节点
		$nextBlock = $rootBlock.next();//

		if ($nextBlock.length > 0) {//若选中多个节点，则在第一个节点后插入 
			$newNode = $node.insertAfter($rootBlock);
			this['selection'].save();
			this['selection'].restore();
		} else if ($rootBlock[0].outerHTML == '

') {//若是空行
			$newNode = $node.insertBefore($rootBlock);
			this['selection'].setRangeAtStartOf($rootBlock);

		} else {//某行的末尾
			$newNode = $node.insertAfter($rootBlock);
			$newBlock = $('
').append(this.util.phBr);
			$newBlock.insertAfter($newNode);
			this['selection'].setRangeAtStartOf($newBlock);
		}

		return this.trigger('valuechanged');

	};

小优化：屏蔽simditor默认对  img的处理

	Simditor.Toolbar.buttons.image = function() {
		return
	};

小功告成

调用方式

    var editor = new Simditor({
      textarea: $('#txt-content'),
      placeholder: '这里输入文字...',
      toolbar: toolbar,
      pasteImage: true,
      defaultImage: 'assets/images/image.png',
      upload: location.search === '?upload' ? {
        url: '/upload'
      } : false
    });

    var $img = $("
");    
    editor.insertJQNode($img);

完整代码 下载地址 

这算是个v1.0版本吧，里边很多细节都很粗糙，欢迎大家批评指正

下次把代码模块化，继续完善 

----------------------------------------