# layui-ueditor

**Repository Path**: weikety/layui-ueditor

## Basic Information

- **Project Name**: layui-ueditor
- **Description**: 使用layui封装的百度富文本
- **Primary Language**: HTML/CSS
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2024-03-31
- **Last Updated**: 2024-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui-ueditor

#### 介绍
layui单页面应用百度富文本


#### 使用说明

1.  加载插件

```
layui.extend({
    ueditor: '{/}./ueditor/ueditor'
})
```

2.  使用

```
layui.extend({
	ueditor: '{/}./ueditor/ueditor'
}).use(['ueditor', 'util', 'layer'], function() {
	var ueditor = layui.ueditor,
		util = layui.util;
	var ue = ueditor.render('container');

	util.event('lay-event', {
		getAllHtml: function() {
			alert(ue.getAllHtml())
		},
		getContent: function() {
			var arr = [];
			arr.push("使用editor.getContent()方法可以获得编辑器的内容");
			arr.push("内容为：");
			arr.push(ue.getContent());
			alert(arr.join("\n"));
		},
		isFocus: function() {
			alert(ue.isFocus());
			ue.dom.domUtils.preventDefault(true)
		},
		setblur: function(e) {
			ue.blur();
			ue.dom.domUtils.preventDefault(e)
		},
		insertHtml: function() {
			var value = prompt('插入html代码', '');
			ue.execCommand('insertHtml', value)
		},
		createEditor: function() {
			console.log("创建")
			enableBtn();
			ue = ueditor.render('container');
		},
		getPlainTxt: function() {
			var arr = [];
			arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
			arr.push("内容为：");
			arr.push(ue.getPlainTxt());
			alert(arr.join('\n'))
		},
		setContent: function(isAppendTo) {
			var arr = [];
			arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
			ue.setContent('欢迎使用ueditor', isAppendTo);
			alert(arr.join("\n"));
		},
		setDisabled: function() {
			ue.setDisabled('fullscreen');
			disableBtn("enable");
		},
		setEnabled: function() {

			ue.setEnabled();
			enableBtn();
		},
		getText: function() {
			//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
			var range = ue.selection.getRange();
			range.select();
			var txt = ue.selection.getText();
			alert(txt)
		},
		getContentTxt: function() {
			var arr = [];
			arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
			arr.push("编辑器的纯文本内容为：");
			arr.push(ue.getContentTxt());
			alert(arr.join("\n"));
		},
		hasContent: function() {
			var arr = [];
			arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
			arr.push("判断结果为：");
			arr.push(ue.hasContents());
			alert(arr.join("\n"));
		},
		setFocus: function() {
			ue.focus();
		},
		deleteEditor: function() {
			disableBtn();
			ue.destroy();
		},
		setHide: function() {
			ue.setHide();
		},
		setShow: function() {
			ue.setShow();
		},
		setHeight: function() {
			ue.setHeight(300);
		},
		getLocalData: function() {
			alert(ue.execCommand("getlocaldata"));
		},
		clearLocalData: function() {
			ue.execCommand("clearlocaldata");
			alert("已清空草稿箱")
		}
	})

	function disableBtn(str) {
		console.log(str)
		var div = document.getElementById('btns');
		var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
		for (var i = 0, btn; btn = btns[i++];) {
			console.log(btn.id)
			if (btn.id == str) {
				UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
			} else {
				btn.setAttribute("disabled", "true");
		 	UE.dom.domUtils.addClass(btn, 'layui-btn-disabled');
			}
		}
	}

	function enableBtn() {
		var div = document.getElementById('btns');
		var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
		for (var i = 0, btn; btn = btns[i++];) {
			UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
			UE.dom.domUtils.removeClasses(btn, 'layui-btn-disabled');
		}
	}

})

					
```


#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)