html中加入代码编辑器,让HTML textarea支持类似代码编辑器书写

Love The Way You Lie 2022-10-06 05:51 160阅读 0赞

var stopEvent = function (evt) \{

if (evt.preventDefault)

evt.preventDefault();

if (evt.returnValue)

evt.returnValue = false;

return false;

\};

String.prototype.trim = function () \{

return this.replace(/(^\\s\*)|(\\s\*$)/g, '');

\};

String.prototype.lastChar = function () \{

return this.charAt(this.length - 1);

\};

String.prototype.fristChar = function () \{

return this.charAt(0);

\};

String.prototype.toUnicode = function () \{

var temp,

i = 0,

r = '',

len = this.length;

for (; i

temp = this.charCodeAt(i).toString(16);

while (temp.length

temp = '0' + temp;

r += '\\\\u' + temp;

return r;

\};

String.prototype.countOf = function (reg) \{

if (undefined !== reg)

return (this.match(reg) || \[\]).length;

return 0;

\};

String.prototype.countOfTab = function () \{

var reg = /\\u0020\{4\}/g;

return (this.match(reg) || \[\]).length;

\};

String.prototype.countOfTabEnter = function () \{

var reg = /\\u0020\{4\}\\u000a/g;

return (this.match(reg) || \[\]).length;

\};

String.prototype.countOfTabInCloseTag = function () \{

var reg = /\\u007b\\u000a\*\\u0020\{4\}\\u000a\*\\u007d/g;

return (this.match(reg) || \[\]).length;

\};

window.onkeydown = function (evt) \{

evt = evt || window.event;

var keyCode = evt.keyCode,

tab = 9,

enter = 13;

var target = evt.target,

selectionStart = -1,

selectionEnd = -1,

tabKey = '\\u0020\\u0020\\u0020\\u0020',

doubleTabKey = tabKey + tabKey,

enterKey = '\\u000a',

value = '',

prefix = '',

suffix = '';

if (target && target.tagName === 'TEXTAREA') \{

selectionStart = target.selectionStart;

selectionEnd = target.selectionEnd;

value = target.value;

if (selectionStart

return;

\} else \{

prefix = value.substring(0, selectionStart);

suffix = value.substring(selectionEnd);

\} else \{

return;

//tab

if (keyCode === tab) \{

value = prefix + tabKey + suffix;

selectionStart += 4;

selectionEnd = selectionStart;

target.value = value;

target.setSelectionRange(selectionStart, selectionEnd);

return stopEvent(evt);

//enter

if (keyCode === enter) \{

//\{\}

var frist = prefix.trim().lastChar(),

last = suffix.trim().fristChar(),

count = prefix.countOf(/\\u000a/g);

if (('\\u003b' === frist || '\\u0029' === frist || '\\u007b' === frist) && '\\u007d' === last) \{

if (count === 0) \{

value = prefix + enterKey + tabKey + enterKey + suffix;

selectionStart += 5;

\} else if (count > 0) \{

var tabs = prefix.substring(prefix.lastIndexOf('\\u000a'), selectionStart).countOfTab(), i = 0, tabStr = '';

for (; i

tabStr += tabKey;

value = '';

value += prefix;

value += enterKey;

value += tabStr;

if ('\\u003b' !== frist) \{

value += tabKey;

\++tabs;

if (enterKey !== suffix.fristChar()) \{

value += enterKey;

value += tabStr;

value += suffix;

selectionStart += 1 + (tabs \* 4);

\} else \{

value = prefix + enterKey + suffix;

\++selectionStart;

selectionEnd = selectionStart;

target.value = value;

target.setSelectionRange(selectionStart, selectionEnd);

return stopEvent(evt);

\};

目前只支持tab键和enter键，后续会加上智能匹配功能

html中加入代码编辑器,让HTML textarea支持类似代码编辑器书写

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML CSS 代码书写规范

相关 ace编辑html,Ace代码编辑器：将整个代码呈现为HTML？

相关 html 编辑器代码高亮,JS代码高亮编辑器 ace.js

相关 html中加入代码编辑器,让HTML textarea支持类似代码编辑器书写

相关 html编辑器汇总

相关 HTML HTML 编辑器 (stage1-9)

相关 textarea标签实现html转义textarea标签显示html代码

相关 HTML MarkDown编辑器实现

相关 HTML基础 --- HTML编辑器

相关 html编辑器有哪些