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

原文地址:https://www.cnblogs.com/123mutouren/p/11345894.html

时间: 2024-10-15 03:52:53

富文本框Ueditor的简单使用的相关文章

百度富文本框Ueditor

官网 http://ueditor.baidu.com/website/index.html 下载 官网下载JSP版本,1.4.3.3的UTF-8版本 使用 解压后重命名为ueditor,放入WEB-INF/plugin文件夹下面.把jsp中的两个lib包放入项目lib中. 因为在WEB-INF不可以直接访问,所以要在springmvc.xml中配置资源映射 <!-- 静态资源映射,可以配置多个 --> <mvc:resources mapping="/plugin/**&qu

webdriver高级应用- 操作富文本框

富文本框的技术实现和普通的文本框的定位存在较大的区别,富文本框的常见技术用到了Frame标签,并且在Frame里面实现了一个完整的HTML网页结构,所以使用普通的定位模式将无法直接定位到富文本框对象. 方法一:调用WebDriver的send_key()方法实现 #encoding=utf-8 from selenium import webdriver import unittest, time, traceback from selenium.webdriver.support.ui imp

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEdi

富文本编辑器-ueditor基本配置

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码..相对于其他流行的富文本编辑器如ckeditor等具有配置简单.更具有中国特色!以下主要是涉及的内容是关于百度富文本编辑器的上传配置以及如何与struts2等结合问题. 1 版本问题 一般而言建议使用UMEditor版本,同时百度web前端开发部也提供了定制版本.如果使用定制版本要注意的一点就是将工具栏的图标添加上分割线!分割线添加的方法如下就

[布局]记录部件字段富文本框如何设置统一高度

在使用快速开发平台构建业务功能中,往往都会用到记录部件,如何布局各个字段位置使用户一目了然,往往就是我们头大的问题.在一个固定大小的窗体下,各个字段的样式都是系统自动默认的,如下图: 此种布局方式真是惨不忍睹,那么如何布局多个富文本字段的位置才能使界面简单明了呢?今天为大家带来记录部件中富文本框(数据表中字段编辑类型word)的布局方法:首先在 空白区域鼠标右键唤出菜单[定制版面],单击进入[记录部件布局定制]模式: 选中富文本字段,鼠标右键点击[创建群组]: 群组创建完成,在顶部空白区域右键唤

kindeditor富文本框,上传文件后,显示文件名称

kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定之后,内容中显示的只是一串很长的地址,这并不是我们想要的. 更多的时候,我们只是希望它这里能默认显示文件名称,只有在文件说明里,填写了文件名称,在内容里面才会以名称的形式呈现.这个时候,我们就要给它做个小手术,来完善它,下面贴出代码: 1.修改asp.net/upload_json.ashx文件,大

轻量级web富文本框——wangEditor使用手册(2)——扩展一个“缩进”功能

1. 引言 上一节<轻量级web富文本框——wangEditor使用手册(1)——基本应用>中我们讲解了如何应用wangEditor创建最基本的富文本编辑器,本节继续讲如何扩展一个简单的按钮.本节是继续上一节的内容来的,所使用的代码也是接着上一节的来的,错过的朋友请先看上一节,再看本节. 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508

基于bootstrap的富文本框——wangEditor【欢迎加入开发】

先来一张效果图: 01. 引言 老早就开始研究富文本框的东西,在写完<深入理解javascript原型与闭包>之后,就想着要去做一个富文本框的插件的例子. 现在网络上开源的富文本框插件非常多,一搜索一大堆,但是基于bootstrap的还不多,现在只有一个“bootstrap-wysiwyg”,老外写的,没有一个汉字,大家可以fork一下源码看看,写的非常简洁,压缩之后不到10KB,非常厉害!我也还没来得及研究,一定要看一下. 02. wangEditor 老外的东西,满地英文,给程序猿用着还可

轻量级web富文本框——wangEditor使用手册(4)——配置下拉菜单

1. 引言 上一节(第三节)<轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单>描述了如何自定义配置一个新加入的菜单.在第二节中我们演示了如何添加一个简单的菜单,这一节我们要加入一个稍微复杂一点的菜单——下拉菜单类型——增加一个“设置标题”下拉按钮 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508.htm