gopythoner 发表于 2018-1-15 10:35:12

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

本帖最后由 gopythoner 于 2018-1-15 10:45 编辑

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

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

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


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

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

gopythoner 发表于 2018-1-15 11:13:59

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

什么意思?

不二如是 发表于 2018-1-15 14:00:31

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

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

gopythoner 发表于 2018-1-15 14:24:41

求解

gopythoner 发表于 2018-1-15 14:25:17

本帖最后由 gopythoner 于 2018-1-15 14:27 编辑

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

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

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

});

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

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

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

gopythoner 发表于 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
页: [1]
查看完整版本: 关于text输入框,在光标所在位置插入制定信息的js