百度富文本编辑器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使用启示的更多相关文章

百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
Jfinal整合百度富文本编辑器ueditor
ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...
Html引入百度富文本编辑器ueditor及自定义工具栏
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
百度富文本编辑器ueditor添加到pom
 <dependency> <groupId>com.baidu</groupId> <artifact ...

随机推荐

vue ---webpack 打包上线
先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对路径 ...
39.mutex 的lock_guard与unique_lock
#include <iostream> #include <thread> #include <mutex> using namespace std; #defin ...
Error: org.apache.mahout.math.CardinalityException: Required cardinality 10 but got 30问题解决办法
问题详情在运行mahout中kmeans算法时,采取的是其默认输入路径/user/hadoop/testdata 和默认输出路径/user/hadoop/output. [hadoop@djt00 ...
实际感受美丽的Linux（多组视频）
1.Fedora 上使用google earth 2.体验桌面-GNOME 2.2.9 3.体验桌面-KDE4.4 永中Office使用演示(和MS Office 2003很相似哦) 4.在Fedor ...
golang md5
package main import ( "crypto/md5" "encoding/hex" "fmt" "io" ...
C#与C++ DLL的交互
C#与C++交互,总体来说可以有两种方法: 1.利用C++/CLI作为代理中间层 2.利用PInvoke实现直接调用第一种方法:实现起来比较简单直观,并且可以实现C#调用C++所写的类,但是问题 ...
Core Animation 文档翻译—附录B（可动画的属性）
前言许多CALayer和CIFliter的属性都是可动画的.本节附录列出了这些属性默认使用的动画. CALayer可动画属性表B-1展示了CALayer类的可动画属性.针对每个属性此表 ...
Nginx日志优化
一日志轮训切割 [root@centos7 tools]# cat nginx_log.sh #!/bin/bash cd /var/log/nginx/ &&\ /bin/mv a ...
java poi 向excel写入图片
import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.File; impo ...
Qt5官方demo解析集28——Extending QML - Signal Support Example
本系列全部文章能够在这里查看http://blog.csdn.net/cloud_castle/article/category/2123873 接上文Qt5官方demo解析集27--Extendin ...

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

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

一、总结

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

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

官方完整demo

官方完整demo对应的源代码

修改编辑器宽度

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

随机推荐

热门专题