• 使用百度富文本编辑器


    插件下载地址:http://ueditor.baidu.com/website/download.html

    具体引用:

    把下载的文件完全的额引入到你的项目中,然后编辑页面内容:

    <!--加载编辑器的容器-->
    <script id="container" style="height: 700px" type="text/plain">
               初始化内容
    </script>
    <!--配置文件-->
    <script type="text/javascript" src="../UEditor/utf8-net/ueditor.config.js" charset="utf-8"></script>
    <!--编辑器源码文件-->
    <script type="text/javascript" src="../UEditor/utf8-net/ueditor.all.min.js" charset="utf-8"></script>
    <!--实例化编辑器-->
    <script type="text/javascript">

    var ue = UE.getEditor('container');

    //var ue = UE.getEditor('container', {
    // toolbars: [
    // [
    // 'undo',//撤销
    // 'bold',//粗体
    // 'italic',//斜体
    // 'underline',//下划线
    // 'strikethrough',//删除线
    // 'formatmatch',//格式刷
    // 'selectall',//全选
    // 'print',//打印
    // 'link',//超链接
    // 'unlink',//取消链接
    // 'fontfamily',//字体
    // 'fontsize',//字号
    // 'simpleupload',//单图上传
    // 'insertimage',//多图上传
    // 'help',//帮助
    // 'justifyleft',//居左对齐
    // 'justifyright',//居右对齐
    // 'justifycenter',//居中对齐
    // 'justifyjustify',//两端对齐
    // 'forecolor',//字体颜色
    // 'backcolor',//背景色
    // 'touppercase',//字母大写
    // 'tolowercase',//字母小写
    // ]
    // ],
    // initialFrameHeight: 320,

    //autoHeightEnabled: false,//设置滚动条
    //enableAutoSave: false,//不显示默认的“本地保存成功”的提示

    //});

    </script>

    如此便可以再页面上显示一个富文本编辑器,注释掉的部分是我简化的一个富文本编辑器。

    详细内容:http://ueditor.baidu.com/website/onlinedemo.html

    遇到的一些问题:

    1.获取富文本编辑框的内容

    var content = UE.getEditor('container').getPlainTxt();

    2.编辑器内容过长不能自动换行

    pre {
    white-space:pre-wrap;
    word-wrap:break-word;
    }

  • 相关阅读:
    springBoot Mybaits分页错误
    验证码的技术实现原理
    《参与感》----产品篇
    参与感三三法则
    MIUI 的参与感
    从 UI 交互角度说语音识别产品
    语音识别开放平台调研以及主要技术
    测试蓝牙回连技术
    测试语音遥控器语音聊天的坑
    测试语音遥控器扫描连接的要点
  • 原文地址:https://www.cnblogs.com/Zbuxu/p/6738784.html
Copyright © 2020-2023  润新知