comparison src/bbcode/bbcode.js @ 46:289718f121e4

use bbcode editor
author Franklin Schmidt <fschmidt@gmail.com>
date Mon, 14 Nov 2022 18:43:38 -0700
parents 2d4f00755092
children 7ef9222474e2
comparison
equal deleted inserted replaced
45:2d4f00755092 46:289718f121e4
37 formData.append( 'UPLOADCARE_PUB_KEY', 'fe3d30f3088a50941d45' ); 37 formData.append( 'UPLOADCARE_PUB_KEY', 'fe3d30f3088a50941d45' );
38 formData.append( 'file', file ); 38 formData.append( 'file', file );
39 request.send(formData); 39 request.send(formData);
40 } 40 }
41 41
42 function getBbcodeDiv(node) { 42 function bb_getDiv(node) {
43 do { 43 do {
44 //console.log(node); 44 //console.log(node);
45 if( node.getAttribute('bbcode') !== null ) 45 if( node.getAttribute('bbcode') !== null )
46 return node; 46 return node;
47 } while( node = node.parentNode ); 47 } while( node = node.parentNode );
48 } 48 }
49 49
50 function bb_getTextarea(node) {
51 return bb_getDiv(node).querySelector('textarea');
52 }
53
50 function bb_uploaded(input,url,filename) { 54 function bb_uploaded(input,url,filename) {
51 let div = getBbcodeDiv(input); 55 let textarea = bb_getTextarea(input);
52 let textarea = div.querySelector('textarea');
53 textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select'); 56 textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
54 textarea.focus(); 57 textarea.focus();
55 } 58 }
56 59
57 function bb_add(input,openTag,closeTag) { 60 function bb_add(input,openTag,closeTag) {
58 let div = getBbcodeDiv(input); 61 let textarea = bb_getTextarea(input);
59 let textarea = div.querySelector('textarea');
60 let start = textarea.selectionStart; 62 let start = textarea.selectionStart;
61 let end = textarea.selectionEnd; 63 let end = textarea.selectionEnd;
62 textarea.setRangeText(closeTag,end,end); 64 textarea.setRangeText(closeTag,end,end);
63 textarea.setRangeText(openTag,start,start); 65 textarea.setRangeText(openTag,start,start);
64 let len = openTag.length; 66 let len = openTag.length;
65 textarea.setSelectionRange(start+len,end+len); 67 textarea.setSelectionRange(start+len,end+len);
66 textarea.focus(); 68 textarea.focus();
67 } 69 }
68 70
69 function bbcodeCreate(div,options) { 71 function bbcodeCreate(div,options) {
70 if( typeof(div) === 'string' ) 72 if( typeof(div) === 'string' ) {
71 div = document.querySelector(div); 73 div = document.querySelector(div);
74 if(!div) throw 'selector not found';
75 }
76 options = options || {};
72 let content = options.content || ''; 77 let content = options.content || '';
73 let save = options.save; 78 let save = options.save;
74 let cancel = options.cancel; 79 let cancel = options.cancel;
75 let html = `\ 80 let html = `\
76 <div bbcode> 81 <div bbcode>
77 <textarea oninput="bb_fixTextarea(this)"></textarea> 82 <textarea name=bbcode oninput="bb_fixTextarea(this)">${content}</textarea>
78 <div buttons> 83 <div buttons>
79 <button type=button onclick="bb_add(this,'[b]','[/b]')" title="Bold"><img src="/bbcode/icons/format_bold.svg"></button> 84 <button type=button onclick="bb_add(this,'[b]','[/b]')" title="Bold"><img src="/bbcode/icons/format_bold.svg"></button>
80 <button type=button onclick="bb_add(this,'[i]','[/i]')" title="Italic"><img src="/bbcode/icons/format_italic.svg"></button> 85 <button type=button onclick="bb_add(this,'[i]','[/i]')" title="Italic"><img src="/bbcode/icons/format_italic.svg"></button>
81 <button type=button onclick="bb_add(this,'[u]','[/u]')" title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button> 86 <button type=button onclick="bb_add(this,'[u]','[/u]')" title="Underline"><img src="/bbcode/icons/format_underlined.svg"></button>
82 <button type=button onclick="bb_add(this,'[s]','[/s]')" title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button> 87 <button type=button onclick="bb_add(this,'[s]','[/s]')" title="Strikethrough"><img src="/bbcode/icons/format_strikethrough.svg"></button>
102 div.innerHTML = html; 107 div.innerHTML = html;
103 if(save) 108 if(save)
104 div.querySelector('button[save]').addEventListener('click',save); 109 div.querySelector('button[save]').addEventListener('click',save);
105 if(cancel) 110 if(cancel)
106 div.querySelector('button[cancel]').addEventListener('click',cancel); 111 div.querySelector('button[cancel]').addEventListener('click',cancel);
112 let textarea = div.querySelector('textarea')
113 bb_fixTextarea(textarea);
107 } 114 }