富文本框Ueditor的简单使用

1.下载百度富文本框代码asp版本加入程序。

找到asp-Upload下的config.json，修改各类文件保存地址，文件大小等

2.在页面中使用Ueditor

 1 <script>
 2     var ue;
 3     $(function () {
 4         ue = UE.getEditor(‘UeF_Content‘,{
 5             toolbars: [[
 6                 ‘fullscreen‘,‘source‘,‘|‘,‘undo‘,‘redo‘,‘|‘, 7                 ‘bold‘,‘italic‘,‘underline‘,‘fontborder‘,‘strikethrough‘,‘superscript‘,‘subscript‘,‘removeformat‘,‘formatmatch‘,‘autotypeset‘,‘blockquote‘,‘pasteplain‘,‘forecolor‘,‘backcolor‘,‘insertorderedlist‘,‘insertunorderedlist‘,‘selectall‘,‘cleardoc‘, 8                 ‘rowspacingtop‘,‘rowspacingbottom‘,‘lineheight‘, 9                 ‘customstyle‘,‘paragraph‘,‘fontfamily‘,‘fontsize‘,10                 ‘directionalityltr‘,‘directionalityrtl‘,‘indent‘,11                 ‘justifyleft‘,‘justifycenter‘,‘justifyright‘,‘justifyjustify‘,‘touppercase‘,‘tolowercase‘,12                 ‘link‘,‘unlink‘,‘anchor‘,‘imagenone‘,‘imageleft‘,‘imageright‘,‘imagecenter‘,13                 ‘simpleupload‘,‘insertimage‘,‘emotion‘,‘scrawl‘,/*‘insertvideo‘,*/ ‘music‘,‘attachment‘,‘map‘,‘gmap‘,/*‘insertframe‘,‘insertcode‘,*/ /*‘webapp‘,*/ ‘pagebreak‘,‘template‘,‘background‘,14                 ‘horizontal‘,‘date‘,‘time‘,‘spechars‘,/*‘snapscreen‘,*/ ‘wordimage‘,15                 ‘inserttable‘,‘deletetable‘,‘insertparagraphbeforetable‘,‘insertrow‘,‘deleterow‘,‘insertcol‘,‘deletecol‘,‘mergecells‘,‘mergeright‘,‘mergedown‘,‘splittocells‘,‘splittorows‘,‘splittocols‘,‘charts‘,16                 ‘print‘,‘preview‘,‘searchreplace‘/*,‘drafts‘,‘help‘*/
17             ]],18               //根据需要增删需要的文本框功能，这里我去掉了一些功能，也可以直接在ueditor.config.js中修改后调用，这些功能样式等可以在ueditor.all.js中查看，修改
19             scaleEnabled: true,20             initialFrameHeight: 500,//设置文本框高度
21             initialFrameWidth: ‘100%‘,//设置文本框宽度
22             elementPathEnabled: true,23             catchRemoteImageEnable: true
24         });
25 
26     });
27     var keyvalue = $.request("keyvalue");
28     $(function () {
29 
30         if (!!keyvalue) {
31             $.ajax({                                //用ajax接收后台传的值
32                 url: "/SystemManage/Companies/GetFormJson",33                 data: { keyvalue: keyvalue },34                 dataType: "json",35                 async: false,36                 success: function (data) {
37                     $("#form").formSerialize(data);
38 
39                     $(".UeF_Content").val(data.F_Content);   //读取数据库存储内容
40                 }
41             });
42         }
43 
44     });
45 
46 
47     function submitForm() {
48         if (!$(‘#form‘).formValid()) {
49             return false;
50         }
51 
52         $("#F_Content").val(ue.getContent());  //提交文本框中内容
53 
54         $.submitForm({
55             url: "/SystemManage/AllianceCompanies/SubmitForm?keyvalue=" + keyvalue,56             param: $("#form").formSerialize(),57             success: function () {
58                 $.currentwindow().$("#gridList").resetSelection();
60                 $.currentwindow().$("#gridList").trigger("reloadGrid");
61 
62             }
63         })
64     }
65 </script>

1        form表单中的内容：
       <tr>
2                     <th class="formTitle" valign="top" style="padding-top: 5px;">
3                         内容
4                     </th>
5                     <td class="formValue" colspan="3" style="padding: 0px;">
6                         <input type="hidden" id="F_Content" />   //数据库中字段
7                         <textarea class="UeF_Content" id="UeF_Content" name="UeF_Content"></textarea>
8                     </td>
9                 </tr>

中间还更改过一些其他内容，时间久了，忘记改了哪些了，关于Ueditor的使用也可以找官方文档参考一下。