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

gopythoner

首先，我不会前端，只会套用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代码么？写成一个方法就行

gopythoner

毛素彩 发表于 2018-1-15 11:11
;P:victory::Q

什么意思？

不二如是

你贴的代码只是初始化一些方法，具体实现木有

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

gopythoner

求解

gopythoner

不二如是 发表于 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. 
    
11. });

复制代码

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. }
    

复制代码

gopythoner

不二如是 发表于 2018-1-15 14:00
你贴的代码只是初始化一些方法，具体实现木有

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

我又找到一个编辑器项目，这个可拓展性很高，可以自己调节很多参数，我已经在使用了
但是有个问题，我不知道怎么插入信息到编辑框中（在最后添加我知道用value就行，但是怎么在光标所在位置添加），能帮我看看是怎么插入么
https://github.com/sparksuite/simplemde-markdown-editor