编辑器UEditor入门学习

优点：非常使用的富文本编辑器，对比于之前使用的summernote，比前者多出了更多的字体图标

废话少说，直接步骤：

1、导入资源（全部放在单独的文件下即可，下图为“UEditor”文件夹）

2、引用UEditor和JS实例化

<div class="container" style="margin:20px 10px;">

	<script id="editor" type="text/plain"></script>

</div>

<script type="text/javascript">

    //实例化编辑器

    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例

    var ue = UE.getEditor('editor',{

        initialFrameWidth:1400,

        initialFrameHeight:500

    });

</script>

3、如果按照以上操作是能正常显示完整Demo，但是会提示

这个需要自己去手动配置上传文件目录，一下提供JSP部署的博文，引用别人的：https://blog.csdn.net/gfd54gd5f46/article/details/60887313

提供官方完成实例：

index.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

         "http://www.w3.org/TR/html4/loose.dtd">

 <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>

     <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->

     <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->

     <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>

     <h1>完整demo</h1>

     <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

 </div>

 <div id="btns">

     <div>

         <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>

         <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>

         <button onclick="getLocalData()" >获取草稿箱内容</button>

         <button onclick="clearLocalData()" >清空草稿箱</button>

     </div>

 </div>

 <div>

     <button onclick="createEditor()">

     创建编辑器</button>

     <button onclick="deleteEditor()">

     删除编辑器</button>

 </div>

 <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>

 </body>

 </html>

index.html

编辑器UEditor入门学习的更多相关文章

springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
OpenCV入门学习笔记
OpenCV入门学习笔记参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...
Vim入门学习之Vim解析
Vim解析... ----------------------- 首先你要会从官网上下载你想要的Vim版本: 官网: http://www.vim.org/==================== ...
PHP 入门学习教程及进阶(源于知乎网友的智慧)
思过崖历程: 自学的动机.自学的技巧.自学的目标三个方面描述学习PHP的经历一.自学的动机: 一定要有浓厚的兴趣,兴趣是最后的老师,可以在你迷茫的时候不断地支撑着你走下去. 自学不是为了工作,不是为 ...
SpringMVC入门学习(二)
SpringMVC入门学习(二) ssm框架 springMVC 在上一篇博客中,我简单介绍了一下SpringMVC的环境配置,和简单的使用,今天我们将进一步的学习下Springmvc的操作. mo ...
在ASP.NET Core2.0中使用百度在线编辑器UEditor(转)
一.起因 UEditor是百度旗下的富文本编辑器,对于后端上传处理仅提供了Asp.Net 版的支持. 如果想在.Net Core项目中使用,那么后台上传接口需要重构. UEditorNetCore:百 ...
Grunt入门学习之(1) -- 环境安装
Grunt入门学习(1) - 环境安装这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...

随机推荐

5.（基础）tornado异步
终于到了传说中的异步了,感觉异步这个名字听起来就很酷酷的,以前还不是多擅长Python时,就跑去看twisted的源码,结果给我幼小的心灵留下了创伤.反正包括我在内,都知道异步编程很强大,但是却很少在 ...
facenet pyhton3.5 训练 train_softmax.py 时报错AttributeError: 'dict' object has no attribute 'iteritems'
报错原因:在进行facenet进行train_softmax.py训练时,在一轮训练结束进行验证时,报错AttributeError: 'dict' object has no attribute ' ...
uestc summer training #4 牛客第一场
A dp[i][j][k]可以n3地做但是正解是找把问题转化为一个两点不相交路径最终答案为C(n+m, n)2-C(n+m, m-1)C(n+m,n-1) B 把题目的矩阵看成无向图的邻接矩阵这 ...
java序列化和反序列化及序列化方式
平时我们在Java内存中的对象,是无法进行IO操作或者网络通信的,因为在进行IO操作或者网络通信的时候,人家根本不知道内存中的对象是个什么东西,因此必须将对象以某种方式表示出来,即存储对象中的状态 ...
VMware中的桥接模式--来自网络
在桥接模式下,VMware虚拟出来的操作系统就像是局域网中的一独立的主机,它可以访问网内任何一台机器.不过你需要多于一个的IP地址,并且需要手工为虚拟系统配置IP地址.子网掩码,而且还要和宿主机器处于 ...
【codevs1690】开关灯线段树
这道题需要支持区间修改和区间询问,因此采用线段树加以维护. 由于求的是开着的灯的数目,因此维护sum:区间[ l , r ]中开着的灯的数目. tag取做0/1,表示区间是否反转,在进行标记下传时,如 ...
MYSQL之数据库初识、安装详解、sql语句基本操作
目录 MYSQL之数据库初识及安装详解 1.什么是数据库? 1.什么是数据?(data) 2.什么是数据库?(databases,简称DB) 2.为什要用数据库? 3.什么是数据库管理系统?(Data ...
set -ex
#!/bin/bash set -x echo "Hello World !" 执行效果为 + echo Hello World !Hello World ! - 其实效果和sh ...
ConfigMap-k8s
创建方式创建ConfigMap的方式有4种: 1,通过直接在命令行中指定configmap参数创建,即--from-literal 2,通过指定文件创建,即将一个配置文件创建为一个ConfigMap ...
cordova打包遇到Connection timedout:
在cordova项目打包时,有时候处在公司内网环境,导致有些文件无法下载报下面的错误: A problem occurred configuring root project 'android'. & ...

编辑器UEditor入门学习

编辑器UEditor入门学习的更多相关文章

随机推荐

热门专题