|
|

楼主 |
发表于 2023-12-6 23:38
|
显示全部楼层
代码
- <style>
- h2 { text-align: center; }
- #ed_outer {
- width: 740px;
- height: 500px;
- border-radius: 6px;
- box-shadow: 3px 6px 12px darkgray;
- margin: 20px auto;
- position: relative;
- display: flex;
- flex-direction: column;
- }
- #ed_top, #ed_foot {
- border: 1px solid gray;
- border-radius: 6px;
- background: #f0f0f0;
- padding: 8px;
- display: flex;
- gap: 0 4px;
- align-items: center;
- }
- #ed_top {
- border-radius: 6px 6px 0 0;
- border-bottom-color: transparent;
- }
- #ed_edit {
- flex-grow: 1;
- border: 1px solid gray;
- box-sizing: border-box;
- position: relative;
- }
- #ed_foot {
- border-radius: 0 0 6px 6px;
- border-top-color: transparent;
- }
- #elm, #rDiv {
- width: 100%;
- height: 100%;
- background: white;
- padding: 8px;
- border: none;
- outline: none;
- overflow: hidden auto;
- resize: none;
- box-sizing: border-box;
- word-break: break-word;
- tab-size: 4;
- position: absolute;
- }
- #elm {
- font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
- background: #f8f8dc;
- display: none;
- }
- #rDiv > p {
- margin: 8px 0;
- padding: 0;
- }
- #rDiv > p:nth-of-type(1)) { margin: 0 0; }
- .btn {
- width: 30px;
- height: 30px;
- border: none;
- outline: none;
- padding: 0;
- cursor: pointer;
- }
- .btn:hover { border: 1px solid gray; }
- #font_color, #bg_color, #edlist {
- width: 20px;
- height: 20px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- }
- .grow1 {
- flex-grow: 1;
- text-align: right;
- }
- </style>
- <h2>mhEditor</h2>
- <div id="ed_outer">
- <div id="ed_top">
- <button id="code" class="btn" title="代码模式"></></button>
- <button id="bold" class="btn" title="加粗(Ctrl+B)"><b>B</b></button>
- <button id="italic" class="btn" title="斜体(Ctrl+I)"><i>I</i></button>
- <button id="underline" class="btn" title="下划线(Ctrl+U)"><u>U</u></button>
- <button id="strikethrough" class="btn" title='删除线'><del>D</del></button>
- <button id="removeformat" class="btn" title="清除格式">C</button>
- <span class="grow1"><a href="http://mhh.52qingyin.cn/">整站系统</a></span>
- </div>
- <div id="ed_edit">
- <textarea id="elm">Textarea</textarea>
- <div id="rDiv" contenteditable="true"><p><br></p></div>
- </div>
- <div id="ed_foot">
- <span class="grow1"></span>
- <button id="test" onclick='alert("感谢点击!")'>假装发布</button>
- </div>
- </div>
- <script>
- (function() {
- let codeState = false;
- let btns = document.querySelectorAll('.btn');
- let formatCode = (code) => {
- let regAr = [
- [/(<\/p>|<\/div>)(<)/g, '$1\n$2'],
- [/<div>(<br>)?<\/div>|<p><\/p>/g, ''],
- [/^[\t]*\n/gm, '']
- ];
- regAr.forEach((item) => {
- code = code.replaceAll(item[0],item[1]);
- });
- return code;
- };
- btns.forEach((item) => {
- item.onclick = () => {
- if(item.id === 'code') {
- if(codeState) {
- rDiv.innerHTML = elm.value;
- elm.style.display = 'none';
- rDiv.style.display = 'block';
- }else{
- elm.value = formatCode(rDiv.innerHTML);
- elm.style.display = 'block';
- rDiv.style.display = 'none';
- }
- codeState = !codeState;
- }else{
- document.execCommand(item.id,false,item.id);
- }
- elm.value = formatCode(rDiv.innerHTML);
- };
- });
- rDiv.oninput = () => elm.value = rDiv.innerHTML;
- })();
- </script>
复制代码
|
|