初探百度Ueditor

最新推荐文章于 2021-09-02 13:59:57 发布

hfhwfw

最新推荐文章于 2021-09-02 13:59:57 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签：百度 stylesheet path xhtml button function

本文链接：https://blog.csdn.net/hfhwfw/article/details/6623867

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Ueditor是由百度web前端研发部开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于BSD协议，允许自由使用和使用代码。

Ueditor官方网址：http://ueditor.baidu.com 。

Ueditor的使用参考步骤：

(1) 复制Ueditor相关东东至项目中

在这里我们在项目的js目录下新建ueditor目录，然后在ueditor官方包中copy相应文件至此目录下，最终结果如下：

(2) 页面内容如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>初探ueditor</title>
    <script type="text/javascript" src="<%=path%>/js/ueditor/editor_config.js"></script>
    <script type="text/javascript" src="<%=path%>/js/ueditor/editor_ui_all.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/js/ueditor/ueditor.css"/>
    <style type="text/css">
        #editor {width: 843px;}
        /* for IE6 fixed */
        body {background: url('about:blank') fixed;}
    </style>
</head>
<body>
<script type="text/javascript">
    var editor = new baidu.editor.ui.Editor({
                id: 'editor',
                initialContent: '欢迎使用<a href="http://ueditor.baidu.com/">UEditor</a>!',
                initialStyle :'.selectTdClass{background-color:#3399FF !important}',
                minFrameHeight: 120
            });
            editor.render('editor');
    function v(){
        document.getElementById('dd').value=document.getElementsByName('editor')[0].innerHTML;
        alert(editor.getContent());
    }
</script>
<input type="button" value="cccc" οnclick="v();"/><br/>
</body>
</html>