在ASP.NET Web Forms中为contenteditable div扩展富文本编辑器功能

直接基于你现有代码扩展，以下是各功能的实现代码，兼容contenteditable div：

完整扩展代码 #

整合原有功能与新增功能的完整代码：

<div id="txtPrev" contenteditable="true">Some example text</div>
<!-- 原有格式按钮 -->
<a href="#" class="embolden" onclick="emboldenFont()">B</a>
<a href="#" class="embolden" onclick="italicFont()">I</a>
<a href="#" class="embolden" onclick="underFont()">U</a>
<!-- 新增功能按钮 -->
<a href="#" class="embolden" onclick="toggleBulletList()">•</a>
<a href="#" class="embolden" onclick="setTextColor()">字体颜色</a>
<a href="#" class="embolden" onclick="setTextBgColor()">背景颜色</a>
<a href="#" class="embolden" onclick="convertToUpperCase()">大写</a>
<a href="#" class="embolden" onclick="convertToLowerCase()">小写</a>

<script>
    // 原有功能
    function emboldenFont() {
        document.execCommand('bold', false, null);
    }
    function italicFont() {
        document.execCommand('italic', false, null);
    }
    function underFont() {
        document.execCommand('underline', false, null);
    }

    // 1. 切换项目符号列表
    function toggleBulletList() {
        document.execCommand('insertUnorderedList', false, null);
    }

    // 2. 设置文本前景色
    function setTextColor() {
        const color = prompt("输入颜色值（如#ff0000或red）：");
        if (color) {
            document.execCommand('foreColor', false, color);
        }
    }

    // 3. 设置文本背景色
    function setTextBgColor() {
        const color = prompt("输入背景颜色值（如#ffff00或yellow）：");
        if (color) {
            document.execCommand('hiliteColor', false, color);
        }
    }

    // 大小写转换核心逻辑
    function convertCase(toUpper) {
        const selection = window.getSelection();
        if (!selection.rangeCount) return;

        const range = selection.getRangeAt(0);
        const selectedText = range.toString();
        const convertedText = toUpper ? selectedText.toUpperCase() : selectedText.toLowerCase();

        // 替换选区内容
        const textNode = document.createTextNode(convertedText);
        range.deleteContents();
        range.insertNode(textNode);

        // 重新选中转换后的文本，保持编辑连贯性
        selection.removeAllRanges();
        range.selectNodeContents(textNode);
        selection.addRange(range);
    }

    // 转大写
    function convertToUpperCase() {
        convertCase(true);
    }

    // 转小写
    function convertToLowerCase() {
        convertCase(false);
    }
</script>

关键功能说明 #

项目符号/前景色/背景色 #

这类功能直接复用document.execCommand内置命令，和你原有粗斜体逻辑一致：

• insertUnorderedList：一键切换项目符号列表
• foreColor：针对选中文本设置前景色
• hiliteColor：针对选中文本设置背景色（区别于backColor，后者会修改块级元素整体背景）

大小写转换 #

contenteditable div是富文本容器，无法像textarea直接修改value，因此通过Selection和Range API处理：

1. 获取当前用户选中的文本范围
2. 提取文本并转换大小写
3. 创建新文本节点替换原选区内容
4. 重新选中转换后的文本，保证编辑体验连贯

注意事项 #

• document.execCommand虽已标记为废弃，但在ASP.NET Web Forms这类传统项目中仍能稳定运行，无需额外引入框架
• 空选区时函数会直接返回，避免报错
• 如需扩展更复杂功能（如插入图片、格式刷），可基于相同的Selection API逻辑实现

内容的提问来源于stack exchange，提问作者Lindsay