javawebk开发百度编辑器ueditor的使用方法

最新推荐文章于 2024-02-26 11:58:14 发布

u010117166

最新推荐文章于 2024-02-26 11:58:14 发布

阅读量1.8k

点赞数

分类专栏： javaweb 文章标签： javaweb ueditor 百

本文链接：https://blog.csdn.net/u010117166/article/details/15341439

版权

javaweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近做项目中用到了百度的一个编辑器，ueditor感觉还挺好使，常用，就小结一下。

1）到官网上下载完整源代码，然后进行解压。下载地址：http://ueditor.baidu.com/website/ 就直接下载开发版的，有php 、.net和jsp版本的。我是jsp版本的，下面说说这个插件的用法。

2）子目录的作用：

_examples：编辑器完整版的示例页面
_demos：编辑器的各种使用案例
dialogs：弹出对话框对应的资源和JS文件
themes：样式图片和样式文件
server：涉及到服务器端操作的PHP、JSP等文件
third-party：第三方插件
lang：国际化相关文件
jsp: 设计图片上传的时候使用页面
editor_all.js：_src目录下所有文件的打包文件
editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用
editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录

删除其中的 _examples， _demos， editor_all_min.js文件及文件夹，将剩余的文件放入名为 ueditor的文件夹下。如果下载的是开发版本的话，可能有些目录没有。
注意1：web开发的，需要把jsp文件夹下面的ueditor.jar放到lib下面，否则jsp里面的部分文件有错误提示，上传图片时也不会成功。
         3）开始使用在项目中
              a. 在你的jsp的文件头部<head></head>之间引入三个js文件和一个css文件。
    例如：
   <script type="text/javascript" charset="utf-8" src="${ctx}/resources/js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/js/ueditor/ueditor.all.js"> </script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/js/ueditor/lang/zh-cn/zh-cn.js"></script>
   <script type="text/javascript" charset="utf-8" src="${ctx}/resources/js/ueditor/themes/default/ueditor.css"></script>

             b.实例化编辑器
         var ue =null;
       $(function(){
           ue= UE.getEditor('editor',{
               toolbars:[['fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'insertimage']],
               UEDITOR_HOME_URL:"${ctx}/resources/js/ueditor/",
              imageUrl:"${ctx}/resources/js/ueditor/jsp/imageUp.jsp",
              fileUrl:"${ctx}/resources/js/ueditor/jsp/fileUp.jsp",
              imagePath:"${ctx}/resources/js/ueditor/jsp/",
              filePath:"${ctx}/resources/js/ueditor/jsp/",
              autoHeightEnabled:false,
               wordCount:false,
               lang:"zh-cn",
               elementPathEnabled:false
           });
)};

         c. 在页面引用编辑器
         <div>
             <script id="editor" type="text/plain" style="width:850px;height:400px" name="content"></script>
      </div>
     注意2：id="editor"中id的名字和实例化编辑器的名称相同。

         d: 效果如下图：

over。看起来不简单，使用起来很简单额。

u010117166

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
javawebk开发百度编辑器ueditor的使用方法

最近做项目中用到了百度的一个编辑器，ueditor感觉还挺好使，常用，就小结一下。 1）到官网上下载完整源代码，然后进行解压。下载地址：http://ueditor.baidu.com/website/ 就直接下载开发版的，有php 、.net和jsp版本的。我是jsp版本的，下面说说这个插件的用法。 2）子目录的作用： _ex
复制链接

扫一扫