html自定义实现文本编辑器,自定义开发富文本编辑器（Javascript实现点击插入内容到textarea光标处）...

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

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

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

HTML代码：

这是测试内容，请在任意位置插入内容。

{PHP code here}

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();

}

html自定义实现文本编辑器,自定义开发富文本编辑器（Javascript实现点击插入内容到textarea光标处）...相关推荐

Qt开发技术：Qt富文本（一）富文本介绍、文档结构
若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/ ...
渲染富文本编辑器并设置富文本编辑器的高度
目标:富文本编辑器 vue-quill-editor 的基本使用:vue-quill-editor - npm 一.渲染富文本编辑器运行如下的命令,在项目中安装富文本编辑器: npm i vue-q ...
ios开发 html编辑器,iOS实现富文本编辑器的方法详解
前言富文本编辑器不同于文本编辑器,国内做的比较好的比如有百度的UEditor和kindEditor.但是这两个也有它的缺点:界面过于复杂.不够简洁.UI设计也比较落后.不够轻量化,这篇文章我们将给大 ...
wysiwyg html 编辑器,漂亮的富文本编辑器WYSIWYG
插件描述: 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编辑器的相关功能描述吧. 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编 ...
layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
js富文本编辑器_自制富文本编辑器
前言介绍一款 markdown富文本编辑器源码 https://gitee.com/pingfanrenbiji/markdown-nice 这里要感谢一些开源作者这位大佬的微信公众号是本地启 ...
php中html富文本编辑器,php + wangEditor 富文本编辑器的配置
小编最近做了一个项目,在用户发表文章的模块上,考虑到用户编写文章时的排版需求.要借助富文本编辑器.搜索发现,现在有很多免费的编辑器插件.例如:百度的Ueditor.Summernote .但是这几个插 ...
富文本_轻量级 web 富文本编辑器 —— wangEditor
介绍 wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wan ...

html自定义实现文本编辑器,自定义开发富文本编辑器（Javascript实现点击插入内容到textarea光标处）...

html自定义实现文本编辑器,自定义开发富文本编辑器（Javascript实现点击插入内容到textarea光标处）...相关推荐

最新文章

热门文章