富文本框Ueditor的简单使用

Posted 2022-07-04 123mutouren

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的使用也可以找官方文档参考一下。