8赞

使用CKEditor插入文本(软连字符)的键盘快捷方式

作者：依然-狠幸福 | 2023-09-09 09:16

如何解决《使用CKEditor插入文本(软连字符)的键盘快捷方式》经验，为你挑选了1个好方法。

如何告诉CKEditor插入带有某个键盘快捷键的软连字符(),如Word中的Ctrl+ -(连字符)？我知道我可以打Alt+ 0173,但我的客户不喜欢这样.

1> Cy Rossignol..：

CKEditor 4

我们将使用CKEditor的内置键绑定API将自定义命令映射到自定义键盘快捷键Ctrl+ Shift+ -(因为Ctrl+ -单独触发许多浏览器中的"缩小"快捷键).我们将这一切都包含在一个模块化插件中:

CKEDITOR.plugins.add('soft-hyphen-shortcut-key', {
    init: function (editor) {
        var shortcutKeys = CKEDITOR.CTRL + CKEDITOR.SHIFT + 189;

        editor.addCommand('insertSoftHyphen', {
            exec: function (editor, data) {
                editor.insertHtml('');
            }
        });

        editor.keystrokeHandler.keystrokes[shortcutKeys] = 'insertSoftHyphen';
    }
});



当用户按下组合键时,此实现使用insertHtml()编辑器方法将HTML实体添加到光标位置处的文档.我们可以使用</code>加载插件的新编辑器实例初始化:</p>

<pre class="lang-javascript prettyprint-override"><code>CKEDITOR.replace('editor', {
    extraPlugins: 'soft-hyphen-shortcut-key'
});
</pre>

<p>这是一个演示(我必须使这个外部代码片段不适用于CKEditor <code><iframe></code>).</p>

<h2>CKEditor 5</h2>

<p>在撰写本文时,此版本为<em>alpha</em>版,因此API和文档可能不完整.第5版极大地改变了项目的体系结构,包括为源代码切换到ES6,所以我不会演示如何为这个版本创建一个插件(我们需要构建它).相反,当我们初始化编辑器时,我们将创建与插件相同的功能:</p>

<pre class="lang-javascript prettyprint-override"><code>ClassicEditor
    .create(document.querySelector('#editor1'))
    .then(function (editor) {
        var shortcutKeys = [ 'Ctrl', 'Shift', 189 ];
        var softHyphen = '\u00AD';

        editor.keystrokes.set(shortcutKeys, function () {
            editor.execute('input', { text: softHyphen });
        });
    });
</pre>

<p>版本5似乎还没有包含<code>insertHtml()</code>与版本4 相同的版本,因此该示例使用Unicode字符作为软连字符.这是v5的演示.</p>

<p>对于有兴趣为版本5创建自定义插件和命令的用户,请参阅CKEditor 5 Framework的文档.这需要一个我们可以安装框架的npm包的环境.我们将使用ES6扩展框架的类和Webpack来捆绑它们.</p>

<hr>

<p>解决赏金问题的快速说明:我们可以在TinyMCE(演示)中类似地绑定键组合:</p>

<pre class="brush:bash;">tinymce.init({
    selector: "#editor",
    init_instance_callback: function (editor) {
        editor.shortcuts.add("ctrl+shift+189", 'Insert Soft Hyphen', function () {
            editor.execCommand('mceInsertContent', false, '\u00AD');
        })
    }
});
</pre></p>
            </div>

    <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;">

    </div>

    <div class="article_recommend">
        <div class="list_top">推荐阅读</div>
        <div class="ListItems">
            <ul class="NewsList">
                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZaiLuoJiHuiG_0d82a05d.html" target="_blank" title="如何在逻辑回归中避免NaN？">如何在逻辑回归中避免NaN？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在逻辑回归中避免NaN？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZaiLuoJiHuiG_0d82a05d.html" target="_blank" title="如何在逻辑回归中避免NaN？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Mockito_He_TextU_25e2d78f.html" target="_blank" title="Mockito和TextUtils">Mockito和TextUtils</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Mockito和TextUtils》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Mockito_He_TextU_25e2d78f.html" target="_blank" title="Mockito和TextUtils">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ShiYong_auto-Ari_571b63d8.html" target="_blank" title="使用auto.Arima（）和xreg进行ARIMA预测">使用auto.Arima（）和xreg进行ARIMA预测</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《使用auto.Arima（）和xreg进行ARIMA预测》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ShiYong_auto-Ari_571b63d8.html" target="_blank" title="使用auto.Arima（）和xreg进行ARIMA预测">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Firefox-Edge_He__04e8ad71.html" target="_blank" title="Firefox,Edge和IE中的Flexbox列反转">Firefox,Edge和IE中的Flexbox列反转</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Firefox,Edge和IE中的Flexbox列反转》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/Firefox-Edge_He__04e8ad71.html" target="_blank" title="Firefox,Edge和IE中的Flexbox列反转">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ShiYong_Python_Z_2963461b.html" target="_blank" title="使用Python中的beautifulsoup从网站中提取数字">使用Python中的beautifulsoup从网站中提取数字</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《使用Python中的beautifulsoup从网站中提取数字》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ShiYong_Python_Z_2963461b.html" target="_blank" title="使用Python中的beautifulsoup从网站中提取数字">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_Node-V8__f8a94774.html" target="_blank" title="如何在Node/V8中实现正则表达式匹配？">如何在Node/V8中实现正则表达式匹配？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在Node/V8中实现正则表达式匹配？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_Node-V8__f8a94774.html" target="_blank" title="如何在Node/V8中实现正则表达式匹配？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ShiYong_css_MoKu_3de4d26c.html" target="_blank" title="使用css模块,如何从文件中导入类">使用css模块,如何从文件中导入类</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《使用css模块,如何从文件中导入类》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/ShiYong_css_MoKu_3de4d26c.html" target="_blank" title="使用css模块,如何从文件中导入类">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/YiGeWanJiaBiao_-_67208481.html" target="_blank" title="一个玩家表 - 两个团队下拉列表 - 如何获得没有双重玩家(mysql,php,ajax)">一个玩家表 - 两个团队下拉列表 - 如何获得没有双重玩家(mysql,php,ajax)</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《一个玩家表-两个团队下拉列表-如何获得没有双重玩家(mysql,php,ajax)》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/YiGeWanJiaBiao_-_67208481.html" target="_blank" title="一个玩家表 - 两个团队下拉列表 - 如何获得没有双重玩家(mysql,php,ajax)">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_Clojure_Zhon_63312b93.html" target="_blank" title="在Clojure中使用关键字作为地图中的键有什么好处？">在Clojure中使用关键字作为地图中的键有什么好处？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在Clojure中使用关键字作为地图中的键有什么好处？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_Clojure_Zhon_63312b93.html" target="_blank" title="在Clojure中使用关键字作为地图中的键有什么好处？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/UWP-_RuHeCong_St_2d59f8fd.html" target="_blank" title="UWP,如何从StreamSocket读取所有数据">UWP,如何从StreamSocket读取所有数据</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《UWP,如何从StreamSocket读取所有数据》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/UWP-_RuHeCong_St_2d59f8fd.html" target="_blank" title="UWP,如何从StreamSocket读取所有数据">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeShiYong_REST_2aec95be.html" target="_blank" title="如何使用REST API CALL将jitsi嵌入我的Web应用程序？">如何使用REST API CALL将jitsi嵌入我的Web应用程序？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何使用RESTAPICALL将jitsi嵌入我的Web应用程序？》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeShiYong_REST_2aec95be.html" target="_blank" title="如何使用REST API CALL将jitsi嵌入我的Web应用程序？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ChaiFenZiFuChuan_a300d3b6.html" target="_blank" title="拆分字符串具有带正则表达式的符号(许多管道)">拆分字符串具有带正则表达式的符号(许多管道)</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《拆分字符串具有带正则表达式的符号(许多管道)》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ChaiFenZiFuChuan_a300d3b6.html" target="_blank" title="拆分字符串具有带正则表达式的符号(许多管道)">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WordPress_DongTa_f5bce4c4.html" target="_blank" title="WordPress动态自定义菜单未显示正确结果">WordPress动态自定义菜单未显示正确结果</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/WordPress_DongTa_f5bce4c4.html" target="_blank" title="WordPress动态自定义菜单未显示正确结果"><img src="https://img.devbox.cn/3cccf/16086/243/927c0cdb72fe5ad0.png" width="120" height="70" alt="WordPress动态自定义菜单未显示正确结果"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《WordPress动态自定义菜单未显示正确结果》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/WordPress_DongTa_f5bce4c4.html" target="_blank" title="WordPress动态自定义菜单未显示正确结果">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ZuanShiXingZhuan_0bf25821.html" target="_blank" title="钻石形状与圆角和背景图像">钻石形状与圆角和背景图像</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsImg">
                            <a href="https://devbox.cn/p/ZuanShiXingZhuan_0bf25821.html" target="_blank" title="钻石形状与圆角和背景图像"><img src="https://img.devbox.cn/3cccf/16086/243/0882c115fe0762fb.png" width="120" height="70" alt="钻石形状与圆角和背景图像"/></a>
                        </div>
                                                <div class="NewsDesc" style="width:500px;margin-left:15px;">
                        如何解决《钻石形状与圆角和背景图像》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/ZuanShiXingZhuan_0bf25821.html" target="_blank" title="钻石形状与圆角和背景图像">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/AndroidVolley-_Z_d5729e92.html" target="_blank" title="Android Volley:在哪里添加重试策略和超时？">Android Volley:在哪里添加重试策略和超时？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《AndroidVolley:在哪里添加重试策略和超时？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/AndroidVolley-_Z_d5729e92.html" target="_blank" title="Android Volley:在哪里添加重试策略和超时？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WeiShiMe_malloc-_debc2d1a.html" target="_blank" title="为什么malloc(1)提供多个页面大小？">为什么malloc(1)提供多个页面大小？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《为什么malloc(1)提供多个页面大小？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/WeiShiMe_malloc-_debc2d1a.html" target="_blank" title="为什么malloc(1)提供多个页面大小？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Spark_ShuJuZheng_ec59841f.html" target="_blank" title="Spark数据帧reducebykey就像操作一样">Spark数据帧reducebykey就像操作一样</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Spark数据帧reducebykey就像操作一样》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Spark_ShuJuZheng_ec59841f.html" target="_blank" title="Spark数据帧reducebykey就像操作一样">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/CommonLisp_Zhong_a83a7de8.html" target="_blank" title="Common Lisp中的矩阵乘法">Common Lisp中的矩阵乘法</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《CommonLisp中的矩阵乘法》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/CommonLisp_Zhong_a83a7de8.html" target="_blank" title="Common Lisp中的矩阵乘法">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/NumberFormat_BuH_5697e9c3.html" target="_blank" title="NumberFormat不会尊重.toFixed">NumberFormat不会尊重.toFixed</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《NumberFormat不会尊重.toFixed》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/NumberFormat_BuH_5697e9c3.html" target="_blank" title="NumberFormat不会尊重.toFixed">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ZaiZiFuChuanZhon_e6b1d3e4.html" target="_blank" title="在字符串中连接时,array.map会自动附加逗号吗？">在字符串中连接时,array.map会自动附加逗号吗？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在字符串中连接时,array.map会自动附加逗号吗？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/ZaiZiFuChuanZhon_e6b1d3e4.html" target="_blank" title="在字符串中连接时,array.map会自动附加逗号吗？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                

            </ul>
        </div>
    </div>

    <div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">吐了个 "CAO" !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册