返回上一页 使用PHP请求ChatGPT聊天接口(gpt-3.5-turbo) 网站建设案例 杜绝站长统计(baidu、cnzz)数据被各种广告骚扰

当前位置:首页 > 解决方案 > 网络方案 > 详细内容

自定义开发富文本编辑器(Javascript实现点击插入内容到textarea光标处)

时间:2021-04-09 浏览:3050次 + 打印

富文本编辑器相信很多程序员都用过,但是如何自己制作一个仿富文本的编辑器来解决一些简单的或自定义的需求呢?下面给大家共享一个使用JavaScript实现在textarea光标处插入指定文本内容以及字符串。

点击按钮,可以把按钮的内容插入到textarea文本框内光标处,光标默认在文本框开头。

通过其他的js就可以实现文本框插入表情、选中文字加粗、内容中插入图片等等。

HTML代码:

<form id="form1" name="form1" method="post" action="">
    <label>
        <textarea name="text" id="text" cols="45" rows="10">
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        </textarea>

        <a id="insert" href="javascript:void(0);">{PHP code here}</a>
    </label>
</form>

Javascript代码:

<script type="text/javascript">
    var text = document.getElementById('text');
    var insert = document.getElementById('insert');
    insert.onclick = function () {
        insertAtCursor(text, this.innerHTML);
    };

    function insertAtCursor(myField, myValue) {
        if (document.selection) {
            //IE support
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
        } else if (myField.selectionStart || myField.selectionStart == '0') {
            //MOZILLA/NETSCAPE support
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var beforeValue = myField.value.substring(0, startPos);
            var afterValue = myField.value.substring(endPos, myField.value.length);

            myField.value = beforeValue + myValue + afterValue;

            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
            myField.focus();
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }
</script>
网站建设公司项目经理

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音
解答:网站优化、网站建设、APP开发、小程序开发

藤设计是一家以提供网站建设网站优化APP开发小程序开发、网络营销推广为主的互联网开发公司。以客户需求为导向,客户利益为出发点,结合自身设计及专业建站优势,为客户提供从基础建设到营销推广的一整套解决方案,探索并实现客户商业价值较大化,为所有谋求长远发展的企业贡献全部力量。

Learn more

Teng Design 专业网站设计制作

Learn more

Our Service 上海网站建设
QQ客服 微信客服 返回顶部
网站制作
扫二维码与项目经理沟通
×