zoukankan      html  css  js  c++  java
  • 网页开发中文本编辑器UEditor的使用

    首先看一下效果图:

    首先我们需要来认识下UEditor,它是由百度web前端研发部开发所见即所得富文本web编辑器,并且是基于BSD协议的开源产品,允许自由使用和修改,开源就意味着可以自己来定制这个编辑器。

    实现方法:

    首先先下载UEditer,官方网址:http://ueditor.baidu.com/website/,根据自己需求下载相应的版本(其实里面都有demo实现调用编辑器)

    下面就是一个简单的调用实例,只需要引入ueditor.config.js,ueditor.all.min.js,lang/zh-cn/zh-cn.js这三个文件即可,还需要其他功能的可以继续去挖掘

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript" charset="utf-8" src="UEditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="UEditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="UEditor/lang/zh-cn/zh-cn.js"></script>
    </head>
    <body>
        <script id="container" name="content" type="text/plain">这里就是编辑器的正文</script>
        <!-- 实例化编辑器 -->
        <script type="text/javascript">
                var ue = UE.getEditor('container');
        </script>
    </body>
    </html>

    当把该编辑器放在一个表单中,提交后即可通过content来读取编辑器的内容。

    在官方提供的demo中可以查看一下提供还有许多提供的方法:

    比如:使用editor.getContent()方法可以获得编辑器的内容

       使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容

     需要的话可以参考官方文档

    bbg

  • 相关阅读:
    To select the file to upload we can use the standard HTML input control of type
    Cascading Menu Script using Javascript Explained
    网站首页head区代码规范
    轻松掌握 Java 泛型
    JDK 5.0 中的泛型类型学习
    如何在firefox下获取下列框选中option的text
    是同步方法还是 synchronized 代码? 详解多线程同步规则
    javascript select option对象总结
    Select的动态取值(Text,value),添加,删除。兼容IE,FireFox
    javascript在ie和firefox下的一些差异
  • 原文地址:https://www.cnblogs.com/Steven-shi/p/5435358.html
Copyright © 2011-2022 走看看