s94-editor
Version:
富文本编辑器的基础模块
140 lines (128 loc) • 5.82 kB
HTML
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>s94-editor测试</title>
</head>
<style>
*{margin: 0;padding: 0;}
.editor-outer{outline: none ;}
</style>
<body>
<textarea class="editor-outer" style="width: 100%;min-height: 500px;background-color: #fff;">
<div class="img" style=""><img src="http://s94.top/favicon.ico" style=""></div>
</textarea>
<div id="editor-menu"></div>
</body>
<script src="../s94-js/s94.browser.js"></script>
<script type="module">
let outer = document.querySelector('.editor-outer');
let config = {
/**自定义的菜单构造函数，
* @param {Object} editor 实例化的编辑器对象
* @constructor
*/
// Menu: function (editor){},
/**自定义出来粘贴内容处理
* @param {Node[]} nodes
* @returns {Node[]}
*/
onpaste: function (nodes){
return nodes;
},
/**需要的菜单，不传默认为全部。包括：html, heading, size, bold, strike, italic, underline, align, color, bgcolor, link, image, style, code, undo, redo
* @type {Array}
*/
// menus: [],
/**字体大小菜单用到的字号集，最多设置7个
* @type {Array}
*/
fontsizes: ['12px','40px'],
/**字体颜色和背景颜色菜单用到的颜色集
* @type {Array}
*/
colors: ['#00f','#0f0','rgb(255, 36, 2)'],
/**是否默认源码模式
* @type {*}
*/
show_html: true,
/**代码块高亮处理方法
* @param {String} code 代码
* @param {String} type 代码类型
* @param {Object} menu 编辑器菜单对象
* @returns {string}
*/
code_highlight: function (code, type, menu){
var hljs = require('s94-editor/highlight.js/core.js');
hljs.registerLanguage(type, require('s94-editor/highlight.js/languages/'+type+'.js'));
var html = '<pre class="hljs"><code>' + hljs.highlight(code, {language: type}).value + '</code></pre>';
if(!menu.editor.container.querySelector('style.hljs-style')){
var style = document.createElement('style');
style.className = "hljs-style";
style.innerHTML = "pre.hljs{display:block;overflow-x:auto;padding:0.5em;color:#abb2bf;background:#282c34;}pre.hljs code{font-family: Consolas,微软雅黑,monospace;}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}.hljs-link{text-decoration:underline}";
menu.editor.container.appendChild(style);
}
return html;
},
/**插入图片的处理方法
@param {Object} menu 编辑器菜单对象
* @returns {string|Promise}
*/
image_callback: function (menu){
return new Promise((resolve, reject)=>{
setTimeout(()=>{ resolve('http://s94.top/favicon.ico') }, 800)
});
return 'http://s94.top/favicon.ico';
},
}
// import Editor from './s94.Editor.mjs.js'; //ES6模块方式
let Editor = require('s94-editor'); // CommonJS方式
//菜单扩展-全局
Editor.Menu.add("test", "测试菜单", '<p style="font-size: 0.6em;">测试</p>', function(menu){
var editor = menu.editor;
var html = `<h1>这是插入的标题</h1>`;
editor.execCommand('insertHTML', html);
editor.range = document.createRange();
var lastNode = editor.lastRow();
editor.range.setStart(lastNode, 0);
editor.range.setEnd(lastNode, 0);
editor.setRange();
})
let editor = Editor(outer, config);
//菜单扩展-局部
editor.menu.add('test2','测试2','测试',function(menu){
menu.showForm([
{name: "type", label: "操作", type: "select", value: 0, list: [
{html:"下载图片", value: 1},
{html:"直接插入图片", value: 0}
]},
{name: "src", label: "图片地址"},
], {
title: '添加图片',
ok: function(data){
if(!data.src) return;
if(data.type==0){
menu.editor.execCommand('insertImage', data.src);
}else{
//记录当前编辑位置
var range = menu.editor.range;
// TODO 此处请求服务器，下载图片，然后返回自己服务器保存地址，再插入图片。由于请求服务器一般异步操作，此处用setTimeout代替效果
setTimeout(function(){
menu.editor.setRange(range);
menu.editor.execCommand('insertImage', data.src);
},5000)
}
}
});
})
//支持事件监听，回调函数的this为editor
editor.on('change', function (data){
console.log('change');
})
editor.on('range', function (range){
console.log('range');
})
//使用菜单的实例化对象(Element)可以自定义菜单放置的位置，默认再编辑器容器的上面
document.querySelector('#editor-menu').appendChild(editor.menu.container); //把菜单放到#editor-menu里面去
</script>
</html>