下载编辑器
到Github下载 Simple-editor 最新版 https://github.com/lofreer/simple-editor
创建demo文件
解压下载的包，在解压后的目录创建 demo.html 文件，填入下面的html代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Simple-editor demo</title>
<!-- css样式文件，webpack加载可忽略 -->
<link rel="stylesheet" href="./lib/css/editor.min.css">
</head>
<body>
<!-- 加载编辑器的容器 -->
<div id="container">
这里写你的初始化内容
</div>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="lib/js/editor.min.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = Edit.getEditor('container', {
... // 配置参数
});
</script>
</body>
</html>
Demo展示
初始化内容
配置项
在实例化时传入配置参数
<script type="text/javascript">
var editor = Edit.getEditor('container', {
initialContent: '初始化内容', // 优先级大于容器标签内的填充
resize: true, // 编辑框是否可拖放
serverUrl: 'http://api.lofreer.com/upload' // 服务器端资源文件的上传地址
toolbars: ['code', '|', 'bold', 'italic'], // 配置工具栏
lang: Edit.langs['zh-ch'] // 语言设置
});
</script>
插件开发
考虑到大家的功能基本上都会扩展一个UI和这个UI做的事情，所以Simple-ditor提供了registerUI这个接口，可以让开发者动态的注入扩展的内容。
<script type="text/javascript">
Edit.registerUI('uiname', function(editor, uiname){
// do something
});
</script>
1. uiname,是你为新添加的UI起的名字
2. function，是实际你要做的事情，这里提供两个参数，editor是编辑器实例，如果你有多个编辑器实例，那每个编辑器实例化后，都会调用这个function,并且把editor传进来,uiname,你为ui起的名字，如果前边你添加的是多个的化，这里function会被调用多次，并且将每一个ui名字传递进来.如果函数返回了一个UI 实例，那这个UI实例就会被默认加到工具栏上。当然也可以不返回任何UI。比如希望监控selectionchange事件，在某些场景下弹出浮层，这时就不需要返回任何UI。
添加按钮
添加一个按钮
<script type="text/javascript">
Edit.registerUI('button', function(editor, uiName) {
//注册按钮名称对应的command命令
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name: uiName,
//提示
title: uiName,
//添加额外样式
stlyle: 'background-image:ulr(xxx.png);background-position: -500px 0;',
//事件对象
handles: {
click: function() {
// 这里可以不用执行命令,做自己的操作也可
editor.execCommand(uiName);
}
}
});
//当点到编辑内容上时，按钮要做的状态反射
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
//因为添加的是button,所以需要返回这个button
return btn;
});
</script>
基本使用
var editor = Edit.getEditor('editor1', {
resize: true, // 编辑区域是否可缩放
toolbars: ['code', '|', 'bold', 'italic', 'underline'], // 菜单栏配置
serverUrl: 'http://api.xxx.com/upload.do', // 文件上传API
fontnames: ['宋体', '黑体', 'Impact'], // 文字名称
colors: {title:value, '黑色':'#000'}, // 色值
fontsizes: {title:value, '12px':1}, // 字体大小
headings: {title:value, '标题1':'h1'}, // 标题
lang: {quotes:'引用', fontname:'字体'} // 语言: Edit.langs: {'zh-ch':{}, 'xxx': {}}
});
editor.addListener('click', function(ev){ // 监听点击事件
console.log(ev) // Events obj
console.log(this) // editor obj
alert('click')
});
editor.setContent('<p>5555</p>', true) // 设置编辑器内容 arguments[1] ? 追加 : 重置
var contentHtml = editor.getContent(); // 获取html内容
var contentTxt = editor.getContentTxt(); // 获取纯文本内容
方法列表
ready(Function fn) 编辑器对外提供的监听ready事件的接口， 通过调用该方法，达到的效果与监听ready事件是一致的
destroy() 销毁编辑器实例
getContent() 获取编辑器的内容
getContentTxt() 获取编辑器中的纯文本内容,没有段落格式
setContent(String html, Boolean isAppendTo) 设置编辑器的内容，可修改编辑器当前的html内容
focus() 让编辑器获得焦点
事件列表
addListener(String types, Function fn) / on() 注册事件监听器
removeListener(String types, Function fn) / off() 移除事件监听器
emit(String types) 触发事件
ready 编辑器准备就绪后会触发该事件
selectionchange 每当编辑器内部选区发生改变时，将触发该事件
contentchange 编辑器内容发生改变时会触发该事件
Toolbar列表
code: '源码',
bold: '粗体',
italic: '斜体',
underline: '下划线',
strikethrough: '删除线',
forecolor: '文字颜色',
backcolor: '背景色',
removeformat: '清除格式',
quotes: '引用',
fontname: '字体',
fontsize: '字号',
heading: '标题',
indent: '缩进',
outdent: '取消缩进',
insertorderedlist: '有序列表',
insertunorderedlist: '无序列表',
justifyleft: '左对齐',
justifycenter: '居中对齐',
justifyright: '右对齐',
justifyfull: '两端对齐',
createlink: '创建链接',
insertimage: '插入图片',
insertvideo: '插入视频',
insertcode: '插入代码'