鱼C论坛

 找回密码
 立即注册
查看: 3161|回复: 5

关于text输入框,在光标所在位置插入制定信息的js

[复制链接]
发表于 2018-1-15 10:35:12 | 显示全部楼层 |阅读模式
10鱼币
本帖最后由 gopythoner 于 2018-1-15 10:45 编辑

首先,我不会前端,只会套用bootstrap的组件,js一般都是常用事件的用法,还过得去

现在我需要做一个简单的编辑器插件,其实就是一个text表单,多增加几个按钮而已
由于我的text是支持markdown语法的。所以,编辑器的按钮需要在输入框的光标所在的地方插入一些语法语句

我找到一个GitHub上的开源markdown编辑器,做的很好,实现了我需要的全部的功能,但是我看不懂他写的js,所以无法根据那个去改
而且我需要的也没他那个复杂
我的编辑器是这样的

编辑器

编辑器


就是当我点击上面的按钮的时候,可以在下面的输入框光标(光标所在是重点)所在位置插入指定的信息,比如,我按了B也就是加粗,那么markdown的语法是 **加粗的字**
所以,应该在输入框中添加 **** 光标是在4个点中间闪,具体可以看上面那个GitHub的项目的效果
他的代码是这样的:
  1. bold : function(){
  2.             var _this = this;
  3.             if(_this.settings.disabled)return false;
  4.             var editor = _this.editor.editor;
  5.             var cursor = editor.getCursor();
  6.             var selection = editor.getSelection();
  7.             
  8.             editor.replaceSelection("**" + selection + "**");
  9.             if (selection === ""){
  10.                 editor.setCursor(cursor.line, cursor.ch + 2);
  11.             }
  12.         },
复制代码


有大佬愿意给我写个简单易懂的js代码么?写成一个方法就行

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-1-15 11:13:59 | 显示全部楼层

什么意思?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-1-15 14:00:31 | 显示全部楼层
你贴的代码只是初始化一些方法,具体实现木有

你说的类似快捷键操作,需要映射,和正则判断应用在哪里
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-1-15 14:24:41 | 显示全部楼层
求解
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-1-15 14:25:17 | 显示全部楼层
本帖最后由 gopythoner 于 2018-1-15 14:27 编辑
不二如是 发表于 2018-1-15 14:00
你贴的代码只是初始化一些方法,具体实现木有

你说的类似快捷键操作,需要映射,和正则判断应用在哪里


你看我写的插入信息的,我只会插入信息
  1. $(function() {
  2.         var emoji_tag = $("#emoji-list img");
  3.         var f = $("#comment-form");
  4.         emoji_tag.click(function() {
  5.                 var e = $(this).data('emoji');
  6.                 var t = f.val() + e;
  7.                 f.val(t);
  8.                 po_Last(f)
  9.         });

  10. });
复制代码


f就是输入框的id
emoji_tag是一个emoji标签图片,我这个就是点击emoji表情就在输入框中插入这个标签对应的语法

不过这个只能实现插入,就是永远都在最后增加,无法做到在光标的地方增加,怎么实现在光标的地方增加?

最后那个po_Last 是将光标移动到最后,我找到的一个代码:
  1. function po_Last(obj) {
  2.         obj.focus(); //解决ff不获取焦点无法定位问题
  3.         if (window.getSelection) { //ie11 10 9 ff safari
  4.                 var max_Len = obj.value.length; //text字符数
  5.                 obj.setSelectionRange(max_Len, max_Len);
  6.         } else if (document.selection) { //ie10 9 8 7 6 5
  7.                 var range = obj.createTextRange(); //创建range
  8.                 range.collapse(false); //光标移至最后
  9.                 range.select(); //避免产生空格
  10.         }
  11. }
复制代码

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-1-16 09:05:50 | 显示全部楼层
本帖最后由 gopythoner 于 2018-1-16 09:14 编辑
不二如是 发表于 2018-1-15 14:00
你贴的代码只是初始化一些方法,具体实现木有

你说的类似快捷键操作,需要映射,和正则判断应用在哪里


我又找到一个编辑器项目,这个可拓展性很高,可以自己调节很多参数,我已经在使用了
但是有个问题,我不知道怎么插入信息到编辑框中(在最后添加我知道用value就行,但是怎么在光标所在位置添加),能帮我看看是怎么插入么
https://github.com/sparksuite/simplemde-markdown-editor
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 05:49

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表