UEditor富文本编辑器的简单入门
入门 简单 文本编辑 ueditor
2023-09-14 09:01:36 时间
UEditor富文本编辑器的简单入门
首先既然我们要用UEditor插件,我们就需要引入对应的文件,在UEditor官网下载,然后将static文件夹拷贝到我们项目的根目录下,接下来就是引用:
* 引入配置文件
<script src="static/UE/ueditor.config.js"></script>
* 引入all.js
<script src="static/UE/ueditor.all.min.js"></script>
* 引入parse.js
<script src="static/UE/ueditor.parse.min.js"></script>
UEditor的盒子
<script id="editor" type="text/plain"></script>
实例UEditor
//实例化编辑器,自定义toolbar实例
var ue = UE.getEditor( 'editor', {
//设置工具栏按钮:全屏,源代码,撤销,重做,加粗,斜体,下划线,删除线,字符边框
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','italic','underline','test','strikethrough','fontborder']],
//初始化编辑器的内容!
initialContent: '欢迎访问:https://rattenking.github.io/demo/editor/index.html',
//初始化时,是否让编辑器获得焦点true或false
focus:false,
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//编辑器层级的基数,可以用来改变字体等
initialStyle:'p{line-height:1em}',
//提交到后台的数据是否包含整个html字符串
allHtmlEnabled:false,
//默认的编辑区域宽度
initialFrameWidth: null,
//默认的编辑区域高度
initialFrameHeight:250
});
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>UEditor富文本编辑器</title>
<script src="static/UE/ueditor.config.js"></script>
<script src="static/UE/ueditor.all.min.js"></script>
<script src="static/UE/ueditor.parse.min.js"></script>
</head>
<body>
<h1>自定义toolbar实例</h1>
<div><script id="editor" type="text/plain"></script></div>
<p><button onclick="getContent(0)">获取UE内容</button></p>
<h1>完整toolbar实例</h1>
<div><script id="editor1" type="text/plain"></script></div>
<p><button onclick="getContent(1)">获取UE内容</button></p>
<script type="text/javascript">
//实例化编辑器,自定义toolbar实例
var ue = UE.getEditor( 'editor', {
//设置工具栏按钮:全屏,源代码,撤销,重做,加粗,斜体,下划线,删除线,字符边框
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','italic','underline','test','strikethrough','fontborder']],
//初始化编辑器的内容!
initialContent: '欢迎访问:https://rattenking.github.io/demo/editor/index.html',
//初始化时,是否让编辑器获得焦点true或false
focus:false,
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//编辑器层级的基数,可以用来改变字体等
initialStyle:'p{line-height:1em}',
//提交到后台的数据是否包含整个html字符串
allHtmlEnabled:false,
//默认的编辑区域宽度
initialFrameWidth: null,
//默认的编辑区域高度
initialFrameHeight:250
});
//完整toolbar实例
//实例化一个不带ui的编辑器,注意此处的实例化对象是baidu.editor下的Editor,而非baidu.editor.ui下的Editor
var myeditor = UE.getEditor('editor1',{
initialContent: '欢迎访问:https://rattenking.github.io/demo/editor/index.html',//初始化编辑器的内容
initialFrameWidth: null,
initialFrameHeight: 250
});
//获取UE内容
function getContent(num){
var obj = null;
if(num === 0){
obj = ue;
}else if(num === 1){
obj = myeditor;
}
var str = obj.getContent();
alert(str);
}
</script>
</body>
</html>
效果图
其他
相关文章
- 一篇带你从小白到入门的vue教程
- 快速入门:Python简单实例100个(入门完整版)
- C语言编程基础入门经典100题(1-10)-简书_c语言简单代码
- XML简单入门_XML文件都有哪些应用
- HTML入门
- 测试中简单的数据库操作-pymysql入门
- 使用 Git Extensions 简单入门 Git
- vuex最简单、最详细的入门文档
- 使用Plist编辑器——简单入门指南
- 入门Oracle AMI技术入门指南(oracleami)
- Linux使用入门:简单而有效的视频教程(linux使用视频教程)
- 简单学习Linux:快速入门(linux简单使用)
- 25字:MySQL入门指南(mysql初学教程)
- MySQL从入门到精通:简单教程(mysql简单教程)
- Redis入门指南:简单易懂的登陆Redis方法(如何登陆redis)
- linux站点快速配置:简单入门指南(linux站点配置文件)
- Oracle数据库写入实现快速入门(oracle写入)
- Oracle编程入门开启简单的数据库之旅(oracle入门读物)
- MySQL简单入门如何增加列(mysql中列的增加)
- div+css布局入门
- js实例入门(简单展开或关闭)
- C语言堆栈入门指南
- Lua极简入门指南(六):模块
- smarty简单入门实例