百度富文本编辑器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. RecyclerView 展示多种类型Item数据

    一.多Item布局实现(MultipleItem) 如果之前你用过ListView实现过此功能,那么你一定对下面这两个方法并不陌生 @Override public int getItemViewTy ...

  2. (F) linux sort,uniq,cut,wc命令详解

    F:http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858385.html sort sort 命令对 File 参数指定的文件中的行排序,并 ...

  3. 如何运行vue项目（维护他人的项目）

    假如你是个小白,在公司接手他人的项目,这个时候,该怎么将这个项目跑通? 前提: 首先,这个教程主要针对vue小白,并且不知道安装node.js环境的.言归正传,下面开始教程:在维护项目之前,需要把所有 ...

  4. MySQL 5.7 多实例安装部署实例

    1. 背景  MySQL数据库的集中化运维,可以通过在一台服务器上,部署运行多个MySQL服务进程,通过不同的socket监听不同的服务端口来提供各自的服务.各个实例之间是相互独立的,每个实例的dat ...

  5. HTML基础第四讲---图像

    转自:https://blog.csdn.net/likaier/article/details/326735 图像,也就是images,在html语法中用img来表示,其基本的语法是:   < ...

  6. Css 显示删除条目效果

    样式设置

  7. c# 调用 C++ dll 传入传出 字符串

    c# 调用 C++ dll 传入传出 字符串 2013-07-02 09:30 7898人阅读 评论(2) 收藏 举报 本文章已收录于:   分类: windows 版权声明:随便转载,随便使用. C ...

  8. UVA 11584 - Partitioning by Palindromes DP

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  9. Day1：If else流程判断

    一.if...else语句 if 条件成立: 执行条件成立后的代码 else: 执行条件不成立的代码 注:注意有冒号,python会强制缩进!一般语句都必须顶格写,缩进是缩进一个tab键,等于4个空格 ...

  10. Jmeter--性能测试工具的搭建

    第一步:Jmeter软件下载第二步:解压下载的Jmeter包到某一盘符下,最好解压到无中文字符目录下,防止乱码问题,以我电脑为例,比如:D:tools第三步:找到解压的文件jmeter.bat,一般在 ...