ueditor集成highlightjs
ueditor里面已经继承了插入代码的功能,命令是“insertcode”, 但是插入代码的样式是这样的
通过ueditor的扩展功能,重新添加一个插入代码的功能选项。直接将下面的代码粘贴到js文件里,在ueditor之后引入即可。CODECONFIG是语言的配置项,key是下拉列表里显示的text,value是highlightjs对应的语言class,
代码中的注意点1,2,3
const CODECONFIG= {
javascript: 'javascript'
}
UE.registerUI('代码语言',function(editor,uiName){
setTimeout(() => {
//1.取ueditor所在的iframe
let document_ = window.frames['ueditor_0'].contentWindow.document;
//2.添加highlightjs所需的css,js, 这里的样式文件可以换成自己喜欢
let css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'css/agate.css'
let script = document.createElement('script');
script.src = 'util/hljs/highlight.pack.js'
document_.head.appendChild(css)
document_.head.appendChild(script)
},500)
//注册按钮执行时的command命令,用uiName作为command名字,使用命令默认就会带有回退操作
editor.registerCommand(uiName,{
execCommand:function(cmdName,value){
//3.获取选择的内容,用hljs。highlightBlock方法进行格式化,然后插入
let selectText = editor.selection.getRange().cloneContents();
var div = document.createElement('div');
div.appendChild(selectText);
hljs.highlightBlock(div);
ue.execCommand('inserthtml','<pre><code class="hljs '+CODECONFIG[value]+'">'+div.innerHTML+'</code></pre>')
},
queryCommandValue:function(){
//这里借用fontsize的查询命令
return this.queryCommandValue('insertcode')
}
});
//创建下拉菜单中的键值对,这里我用字体大小作为例子
var items = [];
for(let k in CODECONFIG){
items.push({
//显示的条目
label:k,
//选中条目后的返回值
value: CODECONFIG[k],
});
}
//创建下来框
var combox = new UE.ui.Combox({
//需要指定当前的编辑器实例
editor:editor,
//添加条目
items:items,
//当选中时要做的事情
onselect:function (t, index) {
//拿到选中条目的值
editor.execCommand(uiName, this.items[index].value);
},
//提示
title:uiName,
//当编辑器没有焦点时,combox默认显示的内容
initValue:uiName
});
editor.addListener('selectionchange', function (type, causeByUi, uiReady) {
if (!uiReady) {
var state = editor.queryCommandState(uiName);
if (state == -1) {
combox.setDisabled(true);
} else {
combox.setDisabled(false);
var value = editor.queryCommandValue(uiName);
if(!value){
combox.setValue(uiName);
return;
}
//ie下从源码模式切换回来时,字体会带单引号,而且会有逗号
value && (value = value.replace(/['"]/g, '').split(',')[0]);
combox.setValue(value);
}
}
});
return combox;
},2/*index 指定添加到工具栏上的那个位置,默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮*/);
效果