zoukankan      html  css  js  c++  java
  • 使用UEditor

    在http://ueditor.baidu.com/website/上下载官方文件

    文本编辑器的配置文件在ueditor.config.js

    需要注意一下几点

    首先

    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    这里是获取文件的基本安装目录,如果将代码放在服务器上时,发现无法加载下来,可以直接将替换这个地址

    替换如下
    window.UEDITOR_HOME_URL = "/xxxx/xxxx/";

    还有修改工具栏的功能选项

    , toolbars:[
                ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                    'print', 'preview', 'searchreplace', 'help', 'drafts']
            ]

    这里的功能繁多,可以根据自己的需要修改

    有时候我们根据不同的页面,需要的功能不一样,也可以在页面初始化的时候,对这个进行修改

    var editor = new baidu.editor.ui.Editor({initialFrameHeight:320,toolbars:[
                ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                    'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                    'print', 'preview', 'searchreplace', 'help', 'drafts']
            ]});  
    editor.render('editor');

     工具栏的配置向对应的功能

    分组 |
    全屏 FullScreen
    源代码 Source
    撤销 Undo
    重做 Redo
    加粗 Bold
    斜体 Italic
    Border
    上标 Superscript
    下标 Subscript
    清除格式 RemoveFormat
    引用 BlockQuote
    纯文本粘贴模式 PastePlain
    文字颜色 ForeColor
    背景颜**ackColor
    有序列表 InsertOrderedList
    无序列表 InsertUnorderedList
    下划线 Underline
    格式 Paragraph
    字体 FontFamily
    字体大小 FontSize
    从左读 DirectionalityLtr
    从右读 DirectionalityRtl
    左对齐 JustifyLeft
    居中对齐 JustifyCenter
    右对齐 JustifyRight
    两端对齐 JustifyJustify
    添加外连 Link
    清除外连 Unlink
    添加图片 Image
    特殊字符 Spechars
    添加表情 Emoticon
    添加视频 Video
    添加地图 Map
    分割线 Horizontal
    添加日期 Date
    添加时间 Time
    删除表格 InsertTable
    删除表格 DeleteTable
    向表格前插入行 InsertParagraphBeforeTable
    向前插入行 InsertRow
    删除行 DeleteRow
    向前插入列 InsertCol
    删除列 DeleteCol
    合并多个单元格 MergeCells
    向右合并单元格 MergeRight
    向下合并单元格 MergeDown
    完全拆分单元格 SplittoCells
    拆分成行 SplittoRows
    拆分成列 SplittoCols
    全选 SelectAll
    清空文档 ClearDoc
    替换查询 SearchReplace
    打印 Print
    预览 Preview
    帮助 Help

  • 相关阅读:
    mongo 查询某个字段的值不为空列表!
    pdftohtml的使用
    Activiti数据库表结构(表详细版)
    ElasticSearch在linux上安装部署
    构建Spring Web应用程序—关于spring中的validate注解后台校验的解析
    构建Spring Web应用程序—SpringMVC详解
    高级装配—运行时注入
    高级装配—bean的作用域
    高级装配—条件化的Bean
    高级装配—配置profile bean
  • 原文地址:https://www.cnblogs.com/xiashuo-he/p/3664298.html
Copyright © 2011-2022 走看看