-
Notifications
You must be signed in to change notification settings - Fork 10
/
rich-text-editor.source-b-b-code.html
94 lines (85 loc) · 3.63 KB
/
rich-text-editor.source-b-b-code.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Demo</title>
<link href="rich-text-editor.min.css" rel="stylesheet">
</head>
<body>
<h1>Convert HTML Source to BBCode</h1>
<p><textarea>Lorem ipsum [b]dolor[/b] sit amet.</textarea></p>
<p><button onclick="console.log(editor.get());">Get Value</button></p>
<script src="rich-text-editor.min.js"></script>
<script>
// RBBCTE: Rich Markdown Text Editor
var RBBCTE = function(target, config) {
var $ = new RTE(target, config);
// HTML to BBCode
$.HTML_BBCode = function(content) {
function _(s, t, content) {
return content.replace(new RegExp('<' + s + '(?:\\s[^<>]*?)?>([\\s\\S]*?)<\\/' + s + '>', 'g'), function($, a) {
return '[' + t + ']' + a + '[/' + t + ']';
});
}
content = _('strong', 'b', content);
content = _('b', 'b', content);
content = _('em', 'i', content);
content = _('i', 'i', content);
content = _('code', 'code', content);
content = _('del', 's', content);
content = content.replace(/<a(\s[^<>]*?)?>([\s\S]*?)<\/a>/g, function($, a, b) {
var href = (a.match(/ href="((?:\\"|[^"])*?)"/i) || [])[1];
return '[url=' + href + ']' + b + '[/url]';
});
content = content.replace(/(?:<br(\s[^<>]*?)?\s*\/?>){2,}/g, '\n\n');
content = content.replace(/<br(\s[^<>]*?)?\s*\/?>/g, ' \n'); // hard break
content = content.replace(/<\/p>\s*<p(\s[^<>]*?)?>/g, '\n\n');
content = content.replace(/<\/p>|<p(\s[^<>]*?)?>/g, "");
return content;
};
// BBCode to HTML
$.BBCode_HTML = function(content) {
function _(s, t, content) {
return content.replace(new RegExp('\\[' + s + '\\]((?:\\\\.|[^' + s + '\\n])*?)\\[\\/' + s + '\\]', 'g'), function($, a) {
return '<' + t + '>' + a + '</' + t + '>';
});
}
content = _('b', 'strong', content);
content = _('i', 'em', content);
content = _('code', 'code', content);
content = _('s', 'del', content);
content = content.replace(/\[url=(.*?)\]([^\s]*?)\[\/url\]/g, function($, a, b) {
return '<a href="' + b + '" rel="nofollow" target="_blank">' + a + '</a>';
});
content = content.replace(/<\/p>\s*<p(\s[^<>]*?)?>/g, '\n\n');
content = content.replace(/<\/p>|<p(\s[^<>]*?)?>/g, "");
content = content.replace(/<br(\s[^<>]*?)?\s*\/?>/g, '\n');
content = content.replace(/\n\n\n*/g, '<br><br>'); // create the fake `<p>` tag(s) for editor view
content = content.replace(/ \n/g, '<br>'); // line break
return content;
};
// Re-write the filter function
$.f = $.HTML_BBCode;
// Convert BBCode to HTML
$.view.innerHTML = $.BBCode_HTML($.get("", 0));
$.source.addEventListener("blur", function() {
$.view.innerHTML = $.BBCode_HTML($.get("", 0));
}, false);
$.view.addEventListener("paste", function() {
setTimeout(function() {
var v = $.get("", 0);
$.set("");
$.i($.BBCode_HTML(v));
}, 1);
}, false);
return $;
};
</script>
<script>
var editor = new RBBCTE(document.querySelector('textarea'), {
tools: ['b', 'i', 'a', 'x']
});
</script>
</body>
</html>