百度富文本编辑器ueditor使用启示

一、总结

一句话总结：使用工具，多去看官方demo，非常详细。

二、百度富文本编辑器ueditor使用启示

官方完整demo

官方完整demo对应的源代码

 <!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/ueditor.config.js"></script>

     <script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.all.js"> </script>

     <script type="text/javascript" charset="utf-8" src="../../ueditor/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', {

         serverUrl: '/server/ueditor/controller.php'

     });

     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>

可以说功能非常完善了，

所有，使用工具，多去看官方demo

修改编辑器宽度

查看官方样例，

加上这个就在js中，所以修改编辑器宽度就是动态获取宽度然后修改就成了

 <!-- ueditor -->

 <script type="text/javascript">

     var width=$('.myEditor').width();

     //$('.myEditor').css({'border':'5px ridge #ff00ff'});

     //alert(width);

     UE.getEditor('content',{

         initialFrameWidth:width,

         initialFrameHeight:300,

     });

 </script>

 <!-- ueditor -->
 

百度富文本编辑器ueditor使用启示的更多相关文章

  1. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  2. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  3. springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  4. thinkphp5.1中适配百度富文本编辑器ueditor

    百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...

  5. 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  6. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  7. Jfinal整合百度富文本编辑器ueditor

    ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...

  8. Html引入百度富文本编辑器ueditor及自定义工具栏

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  9. 百度富文本编辑器ueditor添加到pom

    <!-- 百度富文本编辑start --> <dependency> <groupId>com.baidu</groupId> <artifact ...

随机推荐

  1. Java学习笔记三.3

    9.异常处理:Java中的异常处理对象就是将以前的if语句进行的判断进行抽象化,并形成的一套错误处理体系.最顶端是Throwable,接着是Error,Exception,其中Exception又明显 ...

  2. Tuple<int, int> Dictionary<string, object>妙用

    Tuple<int, int> Dictionary<string, object>妙用

  3. Linux文本编辑器

    1.编辑模式 2.命令模式 3.底部命令模式 注意:如果发现编辑不了.可能是因为非法退出产生一个后缀名为.swp 的临时隐藏文件. 将其删除重新编辑即可!

  4. Scala——构造函数

    Scala的构造函数分为主构造函数和辅助构造函数. 辅助构造函数 辅助构造函数比较容易理解,它们同C++和Java的构造函数十分类似,只有两处不同: 1.辅助构造函数的名称为this,这主要是考虑到在 ...

  5. CISP/CISA 每日一题 17

     CISSP 每日一题(答) What are often added to passwords to maketheir resultant hash secure and resistant to ...

  6. CISP/CISA 每日一题 11

    CISA 每日一题(答) 一个合理建造的数据仓库应当支持下列三种基本的查询格式: 1.向上溯源和向下溯源——向上溯源是对数据进行总计:向下溯源是将数据进行细化: 2.交叉溯源——通过通用属性访问数据仓 ...

  7. 【Energy Forecasting】能源预測的发展和展望

    说明 本文的内容来自Tao Hong博士的Energy Forecasting: Past, Present and Future一文的翻译和整理. 引入 能源预測包括了电力行业中有关预測的广泛的内容 ...

  8. 认识一下JavaScript

    1.什么是JavaScript? JavaScript简称“JS”,应用于HTML和WEB,广泛应用于服务器.PC.笔记本等设备. JavaScript 是 Web 的编程语言. 所有现代的 HTML ...

  9. 【习题 6-3 UVA - 536】 Tree Recovery

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 递归题 [代码] #include <bits/stdc++.h> using namespace std; const ...

  10. Redis源代码分析（八）--- t_hash哈希转换

    在上次的zipmap分析完之后,事实上关于redis源码结构体部分的内容事实上已经所有结束了.由于以下还有几个和结构体相关的操作类,就页把他们归并到struct包下了.这类的文件有:t_hash.c, ...