zoukankan      html  css  js  c++  java
  • Ueditor富文本编辑器

    Ueditor富文本编辑器

    Ueditor富文本编辑器插件应用步骤如下:

    1.引入css和js文件

    这里写图片描述

    2.设置承载标签

    设置富文本编辑器的承载标签,必须设置id属性。一般使用textarea或script标签,使用script标签时,必须设置type=”text/plain”

    这里写图片描述

    3.实例化富文本编辑器

    这里写图片描述

    getEditor的参数为承载标签的id值,可增加第二个参数进行自定义配置项

    4.实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ueditor富文本编辑器测试</title>
        <link rel="stylesheet" type="text/css" href="themes/default/css/umeditor.css">
        <script type="text/javascript" src="third-party/jquery.min.js"></script>
        <script type="text/javascript" src="umeditor.config.js"></script>
        <script type="text/javascript" src="umeditor.min.js"></script>
        <script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
    </head>
    <body>
    
    <!-- 设置承载标签,一般使用两种标签(textarea、script,使用script标签时,必须设置type="text/plain"),必须要设置id属性 -->
    
        <textarea id="content"></textarea>
    
    <script type="text/javascript">
    // 实例化富文本编辑器,getEditor第一个参数就是承载标签的id值
    
    var um = UM.getEditor('content',{
        //自定义配置项会覆盖配置文件中的配置项
        initialFrameWidth:600, //初始化编辑器宽度
        initialFrameHeight:300,  //初始化编辑器高度
        isShow : true,    //默认显示编辑器
        initialContent:'请编辑内容',
        //自定义工具栏
        toolbar:[
                    'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
                    'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
                    '| justifyleft justifycenter justifyright justifyjustify |',
                    'link unlink | emotion image video  | map',
                    '| horizontal print preview fullscreen', 'drafts', 'formula'
                ],
        // 自定义字体大小
        fontsize:[10, 11, 12, 14, 16, 18, 20, 24, 36]
    })
    </script>
    
    </body>
    </html>

    效果图:

    这里写图片描述

    代码及相关文件详见GitHub主页 富文本编辑器插件Ueditor

    https://github.com/Jianxq12/ITcast/tree/master/Ajax

  • 相关阅读:
    A query was run and no Result Maps were found for the Mapped Statement 'com.demo.dao.UserDao.check'. It's likely that neither a Result Type nor a Result Map was specified.
    layui监听input内容变动简单粗暴
    Java多线程中
    Java 对象内存分析
    MySQL重做日志
    并查集-Java实现
    java虚拟机类加载机制
    Java的23种设计模式概述
    redo log 有什么作用?
    什么是redo log ?
  • 原文地址:https://www.cnblogs.com/Jianxq12/p/7684306.html
Copyright © 2011-2022 走看看