富文本框Ueditor的简单使用

发布时间:2020-09-28 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了富文本框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的使用也可以找官方文档参考一下。

总结

以上是编程之家为你收集整理的富文本框Ueditor的简单使用全部内容,希望文章能够帮你解决富文本框Ueditor的简单使用所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!