我正在尝试创建一个代码按钮Froala http://editor.froala.com/编辑器基本上可以通过按执行与此处相同的操作CNTRL+K
。现在我想我有两个选择。
第一个是编辑 froala-editor.js 文件,因为 Froala 已经有一个“代码”按钮,该按钮仅添加<pre>
标签。如果我能以某种方式让它也添加<code>
标签,问题解决。不幸的是我没有让它发挥作用。
第二个选项是创建一个自定义按钮,到目前为止我有这段代码:
$('textarea[name="description"]').editable({
//Settings here
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
this.saveSelection();
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<pre><code>' + this.text() + ' </code></pre>';
this.restoreSelection();
this.insertHTML(html);
this.saveUndoStep();
}
}
}
});
它以某种方式工作,但它有缺陷并且会产生奇怪的 html,如下所示:
<p><code></code>
<pre><code>asdasdasdasd
</code></pre>
</p>
任何帮助完成选项一或选项二的帮助将不胜感激。
如果您升级到 Github 上提供的版本 1.2.3,您的代码应该可以工作https://github.com/froala/wysiwyg-editor https://github.com/froala/wysiwyg-editor。无需保存/恢复选择。
稍后编辑:
这是一个 jsFiddlehttp://jsfiddle.net/9pmmg1jk/ http://jsfiddle.net/9pmmg1jk/.
customButtons: {
insertCode: {
title: 'Insert code',
icon: {
type: 'font',
value: 'fa fa-code'
},
callback: function() {
if (!this.selectionInEditor()) {
this.$element.focus(); // Focus on editor if it's not.
}
var html = '<code>' + (this.text() || '​') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code>';
this.insertHTML(html);
this.restoreSelectionByMarkers();
this.saveUndoStep();
}
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)