Editor富文本编辑器配置【不含图片上传】

一,下载地址:http://ueditor.baidu.com/website/download.html

  1)根据需要下载相应版本

    例  Java:选择jsp+utf-8;

二,放置在项目中

  1)解压下载文件,并重命名为editor;

  2)复制文件放置在项目webapp目录下;

  3)把editor目录下的js文件(3个)剪切放在你的js文件目录下;

  4)复制editor内全部文件到js目录一份(不复制可以使用,但页面会报404错误,估计是在初始化时需要访问其他文件)

三,配置静态资源映射

  1)在Springmvc.xml配置文件中配置相应属性(前提是已经在web.xml中配置了相应配置);

    web.xml配置:  

          <servlet>
          <servlet-name>portal</servlet-name>
          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
          <!-- contextConfigLocation不是必须的, 如果不配置contextConfigLocation,

          springmvc的配置文件默认在:WEB-INF/servlet的name+"-servlet.xml" -->
          <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:spring/springmvc.xml</param-value>
          </init-param>
          <load-on-startup>1</load-on-startup>
          </servlet>

          <servlet-mapping>
          <servlet-name>portal</servlet-name>
          <url-pattern>/</url-pattern>
          </servlet-mapping>

    Springmvc配置:    

          <mvc:resources mapping="/umeditor/**" location="/umeditor/" />      
          <mvc:resources mapping="/js/**" location="/js/" />

四,页面配置

  1)在head引入文件:    

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="umeditor/third-party/jquery.min.js"></script>
        <script type="text/javascript" src="umeditor/third-party/template.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/umeditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/umeditor.min.js"></script>
        <script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>

  2)画出div放置编辑器:        

        <!-- 文本编辑器位置 -->
        <div id="myEditor" style="width:1000px;height:240px;">
          <p>提示内容</p>
        </div>

  3)实例化编辑器:        

        <script type="text/javascript">
          //实例化编辑器
          var um = UM.getEditor(‘myEditor‘);

        </script>

  4)常用方法(其他见官网demo):        

        <input type="button" value="获取内容" onclick="getAllHtml()">
        <input type="button" value="填充内容" onclick="setAllHtml()">

        <script type="text/javascript">

        //获取内容
        function getAllHtml() {
        alert(UM.getEditor(‘myEditor‘).getContent())
        }

        //填充内容
        function setAllHtml() {
        alert(UM.getEditor(‘myEditor‘).setContent())
        }

        </script>

五,效果图

      

时间: 2024-11-02 21:02:32

Editor富文本编辑器配置【不含图片上传】的相关文章

vue项目富文本编辑器vue-quill-editor之自定义图片上传

使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改配置. 创建一个quill-config.js的文件,里面写自定义图片上传.代码如下 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: ''

使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种 CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用 UEDITOR:百度开发的插件,lite版是UM EasyUI编辑器:用easyUI的都懂,基本上肯定用到 其他的富文本编辑器就不说了,前两个小编我用的比较多 本来我是比较倾向于CKEditor,但是这个插件不支持图片上传,图片功能只能链接过去,而不能在控件本身中上传,所以就选择了UMeditor 为啥选择UM,不选

PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id="articlecontent" ><?php echo $request['content']; ?></textarea> <script type="text/javascript"> $('#articleconten

使用KindEditor富文本编辑器,点击批量上传按钮没有选择图片按钮

问题:批量上传没有选择图片按钮 原因: 因为在打开批量上传窗口的时候会发送一个请求,请求swfupload.swf springmvc把这个请求给拦截了,变成了404 解决方法: 所以应该在web.xml中配置 <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.swf</url-pattern> </servlet-mapping> 把这个请求给

在jsp页面中添加富文本编译器(ueditor)+ 图片上传功能

一次老大让我把文本的编辑区域加一个富文本编译器,于是马上下载了一个kindEditor来试试,但后来老大推荐说百度的ueditor编译器不错,于是我便怀着扩展知识,又学到一个新东西的心理下载了百度的ueidtor编译器,整合到项目中感觉确实不错,今天就和大家分享下这个富文本编译器的使用-- 第一步:首先下载ueditor编译器,地址:http://ueditor.baidu.com/website/ 下载完解压之后就这个: 第二步:我会把文件名utf-8-jsp这个文件名改为ueditor,然后

ASP.NET网站使用Kindeditor富文本编辑器配置步骤

1. 下载编辑器 下载 KindEditor 最新版本,下载页面: http://www.kindsoft.net/down.php 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件,将editor文件夹复制到web目录下  3.在网页中加入(ValidateRequest="false") 1 <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest=

百度editor富文本编辑器在火狐浏览器中的兼容性

最近做项目的时候遇到了百度的一个神器:editor富文本编辑器.但是也遇到了很多兼容性的问题,现在写一段随笔一起分享一下: 第一:在火狐浏览器中,该编辑器部分的编辑功能按钮不能显示 可以看出,在火狐浏览器中只会显示编辑框,而上面的编辑按钮缺没有.(但是在IE7,IE8上不能显示的原因在于新版本中屏蔽了 anonymous()方法,可以通过修改eWebEditor的JS文件来修正错误) 解决方案:打开火狐-->工具栏-->“工具”-->"添加附件",使用搜索功能来搜索“

在线HTML文档编辑器使用入门之图片上传与图片管理的实现

1 在线HTML文档编辑器使用入门之图片上传与图片管理的实现: 2 官方网址: http://kindeditor.net/demo.php 3 开发步骤: 4 1.开发中只需要导入选中的文件(通常在 webapp 下,建立 editor 文件夹 ) 5 导入:lang.plugins.themes.kindeditor.js/kindeditor-min.js-->放在editor文件夹下 6 2.在页面上引入相关的js&css文件 7 <!-- 导入Kindeditor相关文件 -

UEditor富文本编辑器时,插入图片没有任何反应

1.信息: Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.context.tempdir 这是struts需要在struts.xml配置临时文件夹. 只需要在struts.xml的<struts></struts>中添加一下语句即可. <constant name="struts.multipart.saveDir" value