1. UEditor 概述

UEditor（简称UE）由百度 Web 演的研发部开发的所见即的富文本 Web 编辑器，有轻量、可定制、开源（能自由使用和修改代码）和注重用户体验等特点；UE 允许将页面内容作为数据库的一个字段来存取，放动态地编辑和浏览页面；
下载 UE ；
注意：

留言板是网站设计的一个重要内容；若使用表单元素 textarea 记录用户留言，只能是文本；使用富文本编辑器，通过 UE 工具栏能茶入带 CSS 样式的文本、上传图片等；
上传的文件默认存放在系统文件夹 www\ueditor\php\upload\image\yyyymmdd 中，并命名为当前时间戳；www，是PHP Web 站点的根目录，yyyy、mm 和 dd 是当前的年、月、日；

例子：富文本编辑器 UEditor 的使用
在表单页面引入 UEditor 提供的三个脚本文件，自定义脚本执行方法 UE.getEditor('editor')，指定表单元素 textarea 的 id 属性为 “editor”；
链接: UEditor 下载，提取码: 4xjn
下载 UEditor，

引入的文件部分：

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script><style type="text/css">div{width:100%;}</style>

主体部分：

<div align="center"><h1 align="center">完整 demo</h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<div id="btns" ><div align="center"><button onclick="getAllHtml()">获得整个html的内容</button><button onclick="getContent()">获得内容</button><button onclick="setContent()">写入内容</button><button onclick="setContent(true)">追加内容</button><button onclick="getContentTxt()">获得纯文本</button><button onclick="getPlainTxt()">获得带格式的纯文本</button><button onclick="hasContent()">判断是否有内容</button><button onclick="setFocus()">使编辑器获得焦点</button><button onmousedown="isFocus(event)">编辑器是否获得焦点</button><button onmousedown="setblur(event)" >编辑器失去焦点</button></div><div align="center"><button onclick="getText()">获得当前选中的文本</button><button onclick="insertHtml()">插入给定的内容</button><button id="enable" onclick="setEnabled()">可以编辑</button><button onclick="setDisabled()">不可编辑</button><button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button><button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button><button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button></div><div align="center"><button onclick="getLocalData()" >获取草稿箱内容</button><button onclick="clearLocalData()" >清空草稿箱</button></div>
</div>
<div align="center"><button onclick="createEditor()">创建编辑器</button><button onclick="deleteEditor()">删除编辑器</button>
</div>

JS 部分：

<script type="text/javascript">//实例化编辑器var ue = UE.getEditor('editor');function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}function insertHtml() {var value = prompt('插入html代码', '');UE.getEditor('editor').execCommand('insertHtml', value)}function createEditor() {enableBtn();UE.getEditor('editor');}function getAllHtml() {alert(UE.getEditor('editor').getAllHtml())}function getContent() {var arr = [];arr.push("使用editor.getContent()方法可以获得编辑器的内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UE.getEditor('editor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UE.getEditor('editor').setEnabled();enableBtn();}function getText() {//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容var range = UE.getEditor('editor').selection.getRange();range.select();var txt = UE.getEditor('editor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");arr.push("编辑器的纯文本内容为：");arr.push(UE.getEditor('editor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");arr.push("判断结果为：");arr.push(UE.getEditor('editor').hasContents());alert(arr.join("\n"));}function setFocus() {UE.getEditor('editor').focus();}function deleteEditor() {disableBtn();UE.getEditor('editor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {UE.dom.domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}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"]);}}function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" ));}function clearLocalData () {UE.getEditor('editor').execCommand( "clearlocaldata" );alert("已清空草稿箱")}
</script>

2. 完整代码如下

<!DOCTYPE html>
<html>
<head><title> demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script><style type="text/css">div{width:100%;}</style>
</head>
<body>
<div align="center"><h1 align="center"> demo </h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
<div id="btns" ><div align="center"><button onclick="getAllHtml()">获得整个html的内容</button><button onclick="getContent()">获得内容</button><button onclick="setContent()">写入内容</button><button onclick="setContent(true)">追加内容</button><button onclick="getContentTxt()">获得纯文本</button><button onclick="getPlainTxt()">获得带格式的纯文本</button><button onclick="hasContent()">判断是否有内容</button><button onclick="setFocus()">使编辑器获得焦点</button><button onmousedown="isFocus(event)">编辑器是否获得焦点</button><button onmousedown="setblur(event)" >编辑器失去焦点</button></div><div align="center"><button onclick="getText()">获得当前选中的文本</button><button onclick="insertHtml()">插入给定的内容</button><button id="enable" onclick="setEnabled()">可以编辑</button><button onclick="setDisabled()">不可编辑</button><button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button><button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button><button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button></div><div align="center"><button onclick="getLocalData()" >获取草稿箱内容</button><button onclick="clearLocalData()" >清空草稿箱</button></div>
</div>
<div align="center"><button onclick="createEditor()">创建编辑器</button><button onclick="deleteEditor()">删除编辑器</button>
</div>
</body>
</html>
<script type="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor');function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}function insertHtml() {var value = prompt('插入html代码', '');UE.getEditor('editor').execCommand('insertHtml', value)}function createEditor() {enableBtn();UE.getEditor('editor');}function getAllHtml() {alert(UE.getEditor('editor').getAllHtml())}function getContent() {var arr = [];arr.push("使用editor.getContent()方法可以获得编辑器的内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UE.getEditor('editor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UE.getEditor('editor').setEnabled();enableBtn();}function getText() {//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容var range = UE.getEditor('editor').selection.getRange();range.select();var txt = UE.getEditor('editor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");arr.push("编辑器的纯文本内容为：");arr.push(UE.getEditor('editor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");arr.push("判断结果为：");arr.push(UE.getEditor('editor').hasContents());alert(arr.join("\n"));}function setFocus() {UE.getEditor('editor').focus();}function deleteEditor() {disableBtn();UE.getEditor('editor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = UE.dom.domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {UE.dom.domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}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"]);}}function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" ));}function clearLocalData () {UE.getEditor('editor').execCommand( "clearlocaldata" );alert("已清空草稿箱")}
</script>

富文本编辑器 Baidu UE相关推荐

在前端网页中加入富文本编辑器
UEditor Docs这是UEditor官方网站,网站里有官方使用教程. 1.先把富文本编辑器的压缩包下载到本地,在我发布的资源里下载(不要积分) 解压之后主要是这个东西 2.把这个解压文件拖动到e ...
ue富文本编辑器使用
对于富编辑器的查看功能属性 var ue = UE.getEditor('heditor'); //可编辑状态 var ue1 = UE.getEdit ...
百度UE富文本编辑器问题(包问题)JAVA MEAVN
做了一个百度UE富文本编辑器的内容关于包的导入问题.. 网上一堆的说包的导入会出现一系列的问题先给出完整的五个的包的依赖若有不同的需要的,可以自己去meavn 仓库里找 meavn 仓库地址:h ...
html 组件化编辑器,vue.js组件化使用百度富文本编辑器（一）
注意: 本文采用的编辑器为:idea 1.下载百度富文本编辑器,地址:https://ueditor.baidu.com/website/download.html#ueditor 2.加入到stat ...
在线富文本编辑器 UMeditor
2019独角兽企业重金招聘Python工程师标准>>> UMeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器. UM的主要特点就是容 ...
最新版富文本编辑器UEditor操作教程
最近项目中使用到了富文本编辑器,选择的是百度的UEditor.所以对其进行了研究,发现最近发布了新版本,与以往的用法有的改变.一下对UEditotr 的是用做一下详细的介绍. 首先是UEditotr的 ...
html JSP 富文本案例,JSP页面引入Ueditor富文本编辑器！
最近做项目时,需要用到富文本编辑器,使用了百度的Ueditor编辑器,因此在这和大家分享下工具/原料 myeclipse,ueditor 方法/步骤从官网上地开级还思层似未屏别.域一插式近址发 ...
themyleaf 图片上传_springboot thymeleaf 整合百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...

富文本编辑器 Baidu UE

富文本编辑器 Baidu UE

1. UEditor 概述

2. 完整代码如下

富文本编辑器 Baidu UE相关推荐

最新文章

热门文章