td 首行缩进_Simditor编辑器，首行缩进功能
最近嘗試使用Simditor編輯器，想使用段落首行縮進，沒找到這個動能。所以用該編輯器自帶的向右縮進功能作為參照，做出了首行縮進的插件。
想要讓首行縮進的樣式不被過濾掉，在編輯器的設置里邊需要給P標簽添加text-indent，設置項為allowedStyles。具體設置方法可以查看Simditor官方網站。
設置允許樣式的時候，要保留編輯器默認的設置。p標簽的默認樣式有左邊距和對齊方式：
this._allowedStyles = $.extend({
...,
p: ['margin-left', 'text-align'],
...,
}, this.opts.allowedStyles);
那么，在建立編輯器時的設置，p標簽允許的樣式再添加一項，text-indent。三個都寫全才行。還有，在工具欄添加相應的按鈕。按鈕的命名在插件js文件中定義。
new Simditor({
...,
allowedStyles: {
...,
p: ['margin-left', 'text-align', 'text-indent']
...,
},
toolbar: [
...,
'indentfl',
'indentfr',
...,
],
...,
});
允許的樣式和工具欄按鈕已經設置好了，可以添加插件了。插件js文件，在引入編輯器主文件之后任意位置引入就行了。
以下是插件js文件，我給它取文件名為simditor-indentfirstline.js：
(function() {
var SimditorIndentfl,SimditorIndentfr,
hasProp = {}.hasOwnProperty,
extend = function(child, parent) {
for (var key in parent) {
if (hasProp.call(parent, key)) child[key] = parent[key];
}
function ctor() {
this.constructor = child;
}
ctor.prototype = parent.prototype;
child.prototype = new ctor();
child.__super__ = parent.prototype;
return child;
};
SimditorIndentfr = (function(superClass) {
extend(SimditorIndentfr, superClass);
function SimditorIndentfr() {
return SimditorIndentfr.__super__.constructor.apply(this, arguments);
}
SimditorIndentfr.prototype.name = 'indentfr';
SimditorIndentfr.prototype.title = 'indentfr';
SimditorIndentfr.prototype.icon = 'indentfr';
SimditorIndentfr.prototype.opts = {
indentWidth: 2,
indentUnit: 'em'
};
SimditorIndentfr.prototype._init = function() {
SimditorIndentfr.__super__._init.apply(this, arguments);
return this.setIcon("angle-double-right");
};
SimditorIndentfr.prototype.setIcon = function(icon) {
return this.el.find("span").removeClass().addClass("fa fa-" + icon);
};
SimditorIndentfr.prototype.command = function() {
var $blockNodes, $endNodes, $startNodes, nodes, result;
$startNodes = this.editor.selection.startNodes();
$endNodes = this.editor.selection.endNodes();
$blockNodes = this.editor.selection.blockNodes();
nodes = [];
$blockNodes = $blockNodes.each(function(i, node) {
var include, j, k, len, n;
include = true;
for (j = k = 0, len = nodes.length; k < len; j = ++k) {
n = nodes[j];
if ($.contains(node, n)) {
include = false;
break;
} else if ($.contains(n, node)) {
nodes.splice(j, 1, node);
include = false;
break;
}
}
if (include) {
return nodes.push(node);
}
});
$blockNodes = $(nodes);
result = false;
$blockNodes.each((function(_this) {
return function(i, blockEl) {
var r;
r = _this.indentBlock(blockEl);
if (r) {
return result = r;
}
};
})(this));
return result;
}
SimditorIndentfr.prototype.indentBlock = function(blockEl) {
var $blockEl, $childList, $nextTd, $nextTr, $parentLi, $pre, $td, $tr, marginLeft, tagName;
$blockEl = $(blockEl);
if (!$blockEl.length) {
return;
}
if ($blockEl.is('p, h1, h2, h3, h4')) {
$blockEl.css('text-indent', this.opts.indentWidth+this.opts.indentUnit);
} else {
return false;
}
return true;
}
SimditorIndentfr.prototype.indentText = function(range) {
var text, textNode;
text = range.toString().replace(/^(?=.+)/mg, '\u00A0\u00A0');
textNode = document.createTextNode(text || '\u00A0\u00A0');
range.deleteContents();
range.insertNode(textNode);
if (text) {
range.selectNode(textNode);
return this.editor.selection.range(range);
} else {
return this.editor.selection.setRangeAfter(textNode);
}
};
return SimditorIndentfr;
})(Simditor.Button);
SimditorIndentfl = (function(superClass) {
extend(SimditorIndentfl, superClass);
function SimditorIndentfl() {
return SimditorIndentfl.__super__.constructor.apply(this, arguments);
}
SimditorIndentfl.prototype.name = 'indentfl';
SimditorIndentfl.prototype.title = 'indentfl';
SimditorIndentfl.prototype.icon = 'indentfl';
SimditorIndentfl.prototype.opts = {
indentWidth: 2,
indentUnit: 'em'
};
SimditorIndentfl.prototype._init = function() {
SimditorIndentfl.__super__._init.apply(this, arguments);
return this.setIcon("angle-double-left");
};
SimditorIndentfl.prototype.setIcon = function(icon) {
return this.el.find("span").removeClass().addClass("fa fa-" + icon);
};
SimditorIndentfl.prototype.command = function() {
var $blockNodes, $endNodes, $startNodes, nodes, result;
$startNodes = this.editor.selection.startNodes();
$endNodes = this.editor.selection.endNodes();
$blockNodes = this.editor.selection.blockNodes();
nodes = [];
$blockNodes = $blockNodes.each(function(i, node) {
var include, j, k, len, n;
include = true;
for (j = k = 0, len = nodes.length; k < len; j = ++k) {
n = nodes[j];
if ($.contains(node, n)) {
include = false;
break;
} else if ($.contains(n, node)) {
nodes.splice(j, 1, node);
include = false;
break;
}
}
if (include) {
return nodes.push(node);
}
});
$blockNodes = $(nodes);
result = false;
$blockNodes.each((function(_this) {
return function(i, blockEl) {
var r;
r = _this.outdentBlock(blockEl);
if (r) {
return result = r;
}
};
})(this));
return result;
}
SimditorIndentfl.prototype.outdentBlock = function(blockEl) {
var $blockEl, $parent, $parentLi, $pre, $prevTd, $prevTr, $td, $tr, marginLeft, range;
$blockEl = $(blockEl);
if (!($blockEl && $blockEl.length > 0)) {
return;
}
if ($blockEl.is('p, h1, h2, h3, h4')) {
/*marginLeft = parseInt($blockEl.css('margin-left')) || 0;
marginLeft = Math.max(Math.round(marginLeft
/ this.opts.indentWidth) - 1, 0)
* this.opts.indentWidth;*/
$blockEl.css('text-indent', '');
} else {
return false;
}
return true;
};
SimditorIndentfl.prototype.outdentText = function(range) {};
return SimditorIndentfl;
})(Simditor.Button);
Simditor.Toolbar.addButton(SimditorIndentfr);
Simditor.Toolbar.addButton(SimditorIndentfl);
}).call(this);
outdentText和indentText兩個函數的作用我沒有看全，似乎沒有用到，但我也沒有刪除。插件允許首行縮進的標簽有p標簽和h系列標簽，但在建立編輯器的時候，只添加了p標簽的允許樣式text-indent，所以也只有p標簽能用這個功能了。
工具欄按鈕我沒有找到合適的圖標，暫時用雙尖括號表示了。
總結
以上是生活随笔為你收集整理的td 首行缩进_Simditor编辑器，首行缩进功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： querylist.php下载,PHP
- 下一篇： 【webrtc】SDP序列化与反序列化