ueditor-百度可视化编辑器简单使用方法

最新推荐文章于 2024-04-18 15:00:06 发布

baochanghong

最新推荐文章于 2024-04-18 15:00:06 发布

阅读量7k

点赞数

分类专栏：开发小工具、配置

开发小工具、配置专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、ueditor是百度可视化编辑工具

2、ueditor官网地址

http://ueditor.baidu.com/website/index.html

3、开发步逐

1、在官网上下载最新版本的jsp版本

图1

2、将下载的压缩文件解压，改文件夹名称为“ueditor”；

3、创建“ueditorTest”项目，ueditor添加到项目中；

4、项目目录如下

图2

5、将ueditor\jsp\lib目录下的jar复制到项目lib目录下（这里是做后台配置的jar），然后ueditor\jsp\lib可以删除。

6、创建”ueditorTest.jsp“页面测试

    Html代码   
    
  
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
 <!DOCTYPE html>  
 <html>  
 <head>  
     <meta charset="utf-8" />  
     <title>提示</title>  
       
     <!--使用ueditor需要导入的js-->  
     <script type="text/javascript" src="common/js/ueditor/ueditor.config.js"></script>  
     <script type="text/javascript" src="common/js/ueditor/ueditor.all.min.js"></script>  
     <script type="text/javascript" src="common/js/ueditor/lang/zh-cn/zh-cn.js"></script>  
       
     <style type="text/css">  
         #div_1 {  
             border: thin none #069;  
             padding: 1px;  
             float: none;  
             width: 500px;  
             height: 300px;  
             background-color: #9C6;  
         }  
     </style>  
 </head>  
 <body>  
     <!-- 加载编辑器的容器 -->  
         <script id="container" name="content" type="text/plain"> </script>  
     <script type="text/javascript">  
         //<!-- 实例化编辑器 -->  
         var ue = UE.getEditor('container');  
           
         function test(){  
             //获取html内容，返回: <p>hello</p>  
             var html = ue.getContent();  
             //获取纯文本内容，返回: hello  
             var txt = ue.getContentTxt();  
               
             alert(html);  
             alert(txt);  
         }  
     </script>  
       
     <input type="button" value="测试" name="ceshi" onClick="test();"/>  
 </body>  
 </html>  

效果图：

图3

说明：

1、上传图片、附件、截图存放路径在“ueditor/jsp/config.json”配置，如果没有配置会根据默认配置在工程下自动创建目录；

2、"ueditor\jsp\controller.jsp"，为ueditor配置项入口；

3、ueditor\jsp\lib存放后台配置的jar，使用是须将该目录下的jar负责到项目中；

5、ueditor使用小心得

1、实例化时设置一些初始话值

    Js代码   
    
  
 // 实例化编辑器  
 var ue = UE.getEditor('content',{  
     initialFrameWidth :590,//设置编辑器宽度  
     initialFrameHeight:400,//设置编辑器高度  
     scaleEnabled:false  
 });  

2、直接赋值

    Js代码   
    
  
 <!--必须要在js里初始化编辑器-->  
 <td align="left" colspan="3">  
     <script id="content" name="content" type="text/plain">   
         ${news.content}  
     </script>               
 </td>  

3、关闭编辑其自动增长，在ueditor.config.js配置文件中将autoHeightEnabled: true 修改为false即可。
图6

baochanghong

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ueditor-百度可视化编辑器简单使用方法

1、ueditor是百度可视化编辑工具 2、ueditor官网地址 http://ueditor.baidu.com/website/index.html 3、开发步逐 1、在官网上下载最新版本的jsp版本图1 2、将下载的压缩文件解压，改文件夹名称为“ueditor”； 3、创建“ueditorT
复制链接

扫一扫