对选中文字在线设置格式

选中文字，在上方弹出操作按钮；对选中文字进行高亮或者字体等等设置；document.execCommand的使用

js, 文字处理

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 389
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const contentEditor = document.getElementById("contentEditor");
const showContent = document.getElementById("showContent");
let startX = 0;
let startY = 0;

/*  contentEditor.οnmοusemοve=function(e){
    console.log(e)
  }*/

contentEditor.onmouseup = function(event) {
    console.log(startX)
    var event = event || window.event;
    // var x = event.clientX;//鼠标的x坐标
    x = startX
        // var y = event.clientY + 10;
    var y = startY;
    var txt; //存文字的变量
    if (window.getSelection) { //获取选中的文字
        txt = window.getSelection().toString(); //转换为字符串
    } else {
        txt = document.selection.createRange().text; //IE的写法
    }
    // 判断是否选中了文字
    if (txt) { //所有字符串都为真，空为假，所有数字都为真，0为假
        showBox(x, y, txt); //调用函数
    }
}

document.onmousedown = function(event) {
    console.log("onmousedown");
    startX = event.clientX;
    startY = event.clientY - 40;
    var event = event || window.event;
    var targetId = event.target ? event.target.id : event.srcElement.id;
    console.log(targetId)
    if (targetId != "contentEditor") {
        showContent.style.display = "none";
    }
}

function showBox(mousex, mousey, contentText) { //相关操作
    setTimeout(function() {
        showContent.style.display = "block";
        showContent.style.left = mousex + "px";
        showContent.style.top = mousey + "px";
        // showContent.innerHTML = contentText;
    }, 1000)
}

function getSelectedText() {
    console.log(window.getSelection().toString())
    console.log(contentEditor)
    const keyword = contentEditor.textContent.substring(contentEditor.selectionStart, contentEditor.selectionEnd);
    console.log(keyword);
}

function deleteSty() {
    document.execCommand('delete') //删除选中的部分
}

function insertHorizontalRuleSty() {
    document.execCommand('insertHorizontalRule') //在插入点插入一个水平线（删除选中的部分）
}

function refresh() {
    debugger
    document.execCommand('bold')
    document.execCommand('copy')
    document.execCommand('fontSize', false, '30px')
}

编译

CSS

HTML

<button onclick="deleteSty()">删除</button>
<button onclick="insertHorizontalRuleSty()">插入水平线</button>
<button onclick="refresh()">改变</button>
<button onclick="getSelectedText()">getSelectedText</button>

<div contenteditable="true" id="contentEditor">
    我是文本 这是一段无聊的文字
    <br> 这是独家度假酒店就

<p>InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。</p>
    <p></p>
    <p>InsertParagraph 用换行覆盖当前选中区。</p>
    <p>wwwwwwwwwwwwwww</p>
    <p>InsertSelectDropdown 用下拉框控件覆盖当前选中区。</p>
    <p></p>
    <p>InsertSelectListbox 用列表框控件覆盖当前选中区。</p>
    <p></p>
    <p>InsertTextArea 用多行文本输入控件覆盖当前选中区。</p>
</div>

<div id="showContent">
    <button>share</button>
</div>

选中文字，在上方弹出操作按钮；对选中文字进行高亮或者字体等等设置；document.execCommand的使用

js, 文字处理

编辑器支持Emmet

快捷键

选中文字，在上方弹出操作按钮；对选中文字进行高亮或者字体等等设置；document.execCommand的使用

js, 文字处理

HTML5 ThreeJS游戏风格沉浸式滑块选择（轮播）界面

使用anime.js实现拖拉滑动式数字步进选择控件

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：