百度UEditor(富文本编辑器)的基础用法

百度的这个编辑器挺强大的,这里只是用他的文本功能,没有介绍上传图片视频的。

我用是的SSH来写的项目。

1. 把下载的UEditor(ueditor1_4_3_1-utf8-jsp)解压后全部复制到WebContent目录下,如下图:

百度UEditor(富文本编辑器)的基础用法

2.修改ueditor/ueditor.config.js里的路径 如下图:

百度UEditor(富文本编辑器)的基础用法

3. 将ueditor/jsp/lib下的所有Jar文件复制到项目的/WEB-INF/lib中;

4.修改ueditor/ueditor.config.js里面的toolbars的内容来减少不想要的图标:

 //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink','|',
'emotion', 'pagebreak', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', '|',
'inserttable', 'deletetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'charts', '|',
'preview', 'searchreplace', 'help'
]]

4.新建自己的jsp页面,把自带的index.html中需要的复制进去

一定要引入以下三个js,否则没有效果

    <script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="js/ueditor/zh-cn.js"></script>

5.  内容中可以换成 <textarea name="content" id="editor" style="height: 400px;"></textarea>

<form action="article_addArticle" method="post">

                        //换成自己自己需要的
<input type="text" name="userId" value="<s:property value="#session.user.userId" />">
<textarea name="content" id="editor" style="height: 400px;"></textarea> <script type="text/javascript">
//实例化实例化编辑器
var ue = UE.getEditor('editor');
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为:");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
}
</script> <button type="submit" value="提交">提交</button>
</form>

效果:

百度UEditor(富文本编辑器)的基础用法

6. 编辑文本的时候,只需要把内容带回来就行了

    <form action="article_updateArticle" method="post" >
<input type="text" name = "articleId" value="<s:property value="articleInfo.articleId" />">
<br/>
<input type="text" name="title" value="<s:property value="articleInfo.artTitle" />" style="width:400px;height:30px;">
<!-- <textarea name="content" id="editor" style="height:400px;"></textarea> -->
<script type="text/plain" id="editor" name="content" style="height:400px;">
<s:property value="articleInfo.artContent" escape="false"/>
</script> <script type="text/javascript">
var ue = UE.getEditor('editor');
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以获得编辑器的内容");
arr.push("内容为:");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
} </script> <button type="submit" value="提交">提交</button>
</form>

7.说一下,保存到数据库的时候会把格式都保存进去,所以输出的时候会把html格式都输出来,只需要加上(escape = "false")即解析html代码

<s:property value="articleInfo.artContent" escape="false"/>

就ok了,这样保存到数据库的html就会起作用了。

这是自己学习过程中的记录,方便自己回顾,好记性不如烂笔头。

作者:艺至

上一篇:二十四种设计模式:桥接模式(Bridge Pattern)


下一篇:七个结构模式之桥接模式(Bridge Pattern)