UEditor富文本编辑器JSP 编辑使用

1、介绍:

UEditor富文本编辑器,轻量,可定制,注重用户体验。

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

官网下载 API: http://fex.baidu.com/ueditor/#api-common

解压包下有实例参考: D:\UEditor\ueditor-1.4.3.3\_examples

                                     D:UEditor\ueditor1_4_3_3-utf8-jsp\utf8-jsp

2、ueditor1.4.3的使用:

把这些jar包 5个jar 放到 WEB-INF 目录下的lib 中。避免重复。

右键Build Path ---》Add to Build Path 引用它们。

引入配置文件:

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>

    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

3. 编辑 回显后端数据

 不要直接把后端数据放到编译器容器中,会出现标签的问题, 通过设置编译器内容来赋值

<label >内&nbsp;容:</label>
<div class="col-md-12">
     <input type="hidden" id="content" value="<s:property value='content'/>"/>
     <script id="container" name="content" type="text/plain" style="height:350px">
     </script>
</div>
    <!-- 配置文件 -->
    <script type="text/javascript" src="./plugins/uEditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script id="ueditor_script" type="text/javascript" src="./plugins/uEditor/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container',{toolbars: [
                                                      [
                                                       'anchor', //锚点
                                                       'undo', //撤销
                                                       'redo', //重做
                                                       'bold', //加粗
                                                       'indent', //首行缩进
                                                       'snapscreen', //截图
                                                       'italic', //斜体
                                                       'underline', //下划线
                                                       'strikethrough', //删除线
                                                       'subscript', //下标
                                                       'fontborder', //字符边框
                                                       'superscript', //上标
                                                       'formatmatch', //格式刷
                                                       'source', //源代码
                                                       'blockquote', //引用
                                                       'pasteplain', //纯文本粘贴模式
                                                       'selectall', //全选
                                                       'print', //打印
                                                       //'preview', //预览
                                                       'horizontal', //分隔线
                                                       'removeformat', //清除格式
                                                       'time', //时间
                                                       'date', //日期
                                                       'unlink', //取消链接
                                                       'insertrow', //前插入行
                                                       'insertcol', //前插入列
                                                       'mergeright', //右合并单元格
                                                       'mergedown', //下合并单元格
                                                       'deleterow', //删除行
                                                       'deletecol', //删除列
                                                       'splittorows', //拆分成行
                                                       'splittocols', //拆分成列
                                                       'splittocells', //完全拆分单元格
                                                       'deletecaption', //删除表格标题
                                                       'inserttitle', //插入标题
                                                       'mergecells', //合并多个单元格
                                                       'deletetable', //删除表格
                                                       'cleardoc', //清空文档
                                                       'insertparagraphbeforetable', //"表格前插入行"
                                                      // 'insertcode', //代码语言
                                                       'fontfamily', //字体
                                                       'fontsize', //字号
                                                       'paragraph', //段落格式
                                                       'simpleupload', //单图上传
                                                       'insertimage', //多图上传
                                                       'edittable', //表格属性
                                                       'edittd', //单元格属性
                                                       'link', //超链接
                                                       'emotion', //表情
                                                       'spechars', //特殊字符
                                                       'searchreplace', //查询替换
                                                       'map', //Baidu地图
                                                       'gmap', //Google地图
                                                       'insertvideo', //视频
                                                       'help', //帮助
                                                       'justifyleft', //居左对齐
                                                       'justifyright', //居右对齐
                                                       'justifycenter', //居中对齐
                                                       'justifyjustify', //两端对齐
                                                       'forecolor', //字体颜色
                                                       'backcolor', //背景色
                                                       'insertorderedlist', //有序列表
                                                       'insertunorderedlist', //无序列表
                                                      // 'fullscreen', //全屏
                                                       'directionalityltr', //从左向右输入
                                                       'directionalityrtl', //从右向左输入
                                                       'rowspacingtop', //段前距
                                                       'rowspacingbottom', //段后距
                                                       'pagebreak', //分页
                                                       'insertframe', //插入Iframe
                                                       'imagenone', //默认
                                                       'imageleft', //左浮动
                                                       'imageright', //右浮动
                                                       'attachment', //附件
                                                       'imagecenter', //居中
                                                       'wordimage', //图片转存
                                                       'lineheight', //行间距
                                                       'edittip ', //编辑提示
                                                       'customstyle', //自定义标题
                                                       'autotypeset', //自动排版
                                                       'webapp', //百度应用
                                                       'touppercase', //字母大写
                                                       'tolowercase', //字母小写
                                                       'background', //背景
                                                       'template', //模板
                                                       'scrawl', //涂鸦
                                                       'music', //音乐
                                                       'inserttable', //插入表格
                                                       'drafts'// 从草稿箱加载
                                                      // 'charts', // 图表
                                                   ]
                                               ]
        						}
        );
        //编辑器准备就绪后会触发该事件
        //初始化设置编辑器内容
        ue.ready(function() {
            ue.setContent($("#content").val());
        });
	</script>  

参考文章:https://blog.csdn.net/zzq900503/article/details/77540228

猜你喜欢

转载自blog.csdn.net/qq_42402854/article/details/81175338