百度富文本编辑器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. InstallShield详细制作说明(四)

    十.编译打包

  2. Angularjs: 封装layDate指令

    [摘要]由于业务需要,将bootstrap-datetimepicker改成了layDate. layDate是一个较成熟且便于操作的jQuery日期插件,支持同一个视图内范围选择.封装成一个指令在多 ...

  3. (转)Linux下查看Nginx Apache MySQL的并发连接数和连接状态

    转自: http://www.ha97.com/4106.html 1.查看Web服务器(Nginx Apache)的并发请求数及其TCP连接状态:netstat -n | awk '/^tcp/ { ...

  4. 设计模式六大原则(一)：单一职责原则(Single Responsibility Principle)

    单一职责(SRP)定义: 不要存在多于一个导致类变更的原因,通俗的说,即一个类只负责一项职责. 问题由来: 类T负责两个不同的职责:职责P1,职责P2.当由于职责P1需求发生改变而需要修改类T时,有可 ...

  5. Mybaits中session的应用一

    获取一级缓存session SqlSession session = this.yangchebaoDbManagerImpl.getSqlSessionFactory().openSession(f ...

  6. 洛谷 P2694 接金币

    P2694 接金币 题目描述 在二维坐标系里,有N个金币,编号0至N-1.初始时,第i个金币的坐标是(Xi,Yi).所有的金币每秒向下垂直下降一个单位高度,例如有个金币当前坐标是(xf, yf),那么 ...

  7. 【软件project】 文档 - 银行业务管理 - 需求分析

    ---------------------------------------------------------------------------------------------------- ...

  8. Costura.Fody

    使用Costura.Fody将源DLL合并到目标EXE 本文为原创文章,如转载,请在网页明显位置标明原文名称.作者及网址,谢谢! 一.本文主要是使用Costura.Fody工具将源DLL合并到目标EX ...

  9. POJ 2718 Smallest Difference 枚举

    http://poj.org/problem?id=2718 题目大意: 给你一些数字(单个),不会重复出现且从小到大.他们可以组成两个各个位上的数字均不一样的数,如 0, 1, 2, 4, 6 ,7 ...

  10. Loadrunner--关联详解

    当录制脚本时,VuGen会拦截client端(浏览器)与server端(网站服务器)之间的对话,并且通通记录下来,产生脚本.在VuGen的Recording Log中,您可以找到浏览器与服务器之间所有 ...