如何在thinkphp(sae版)中使用ueditor插件[2]

接下来, 再对config进行一些修改.

1. 先是工具栏的配置, 以下是默认配置

//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
toolbars:[
    ['FullScreen', 'Source', '¦', 'Undo', 'Redo', '¦',
        'Bold', 'Italic', 'Underline', 'StrikeThrough', 'Superscript', 'Subscript', 'RemoveFormat', 'FormatMatch', '¦',
        'BlockQuote', '¦', 'PastePlain', '¦', 'ForeColor', 'BackColor', 'InsertOrderedList', 'InsertUnorderedList', '¦', 'CustomStyle',
        'Paragraph', 'RowSpacing', 'LineHeight', 'FontFamily', 'FontSize', '¦',
        'DirectionalityLtr', 'DirectionalityRtl', '¦', '', 'Indent', '¦',
        'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyJustify', '¦',
        'Link', 'Unlink', 'Anchor', '¦', 'ImageNone', 'ImageLeft', 'ImageRight', 'ImageCenter', '¦', 'InsertImage', 'Emotion', 'InsertVideo', 'Map', 'GMap', 'InsertFrame', 'PageBreak', 'HighlightCode', '¦',
        'Horizontal', 'Date', 'Time', 'Spechars', '¦',
        'InsertTable', 'DeleteTable', 'InsertParagraphBeforeTable', 'InsertRow', 'DeleteRow', 'InsertCol', 'DeleteCol', 'MergeCells', 'MergeRight', 'MergeDown', 'SplittoCells', 'SplittoRows', 'SplittoCols', '¦',
        'SelectAll', 'ClearDoc', 'SearchReplace', 'Print', 'Preview', 'CheckImage', 'Help']
],

官方的说法是可以在new实例的时候传入配置, 但是我个人觉得这样在调用的时候还挺繁琐的. 倒是不如直接复制一个config文件, 在里面进行修改. 修改后直接在html代码里面嵌入这个config就成了~
总之, 大家可以采用自己喜欢的方式啦.

我的时光邮局采用的配置是:

        toolbars:[
              ['Source', 'Undo', 'Redo', '¦',
              'Bold', 'Italic', 'Underline', 'StrikeThrough', 'Superscript', 'Subscript', 'RemoveFormat', 'FormatMatch',
              'PastePlain', '¦', 'ForeColor', 'BackColor', 'InsertOrderedList', 'InsertUnorderedList', '¦',
              'FontFamily', 'FontSize', '¦',
              '', '¦',
              'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyJustify'],
              ['Link', 'Unlink', 'Anchor', '¦', 'InsertImage', 'CheckImage', 'Emotion', 'InsertVideo', 'Map', 'HighlightCode', '¦',
              'Horizontal', 'Date', 'Time', 'Spechars', '¦',
              'InsertTable', 'DeleteTable', 'InsertParagraphBeforeTable', 'InsertRow', 'DeleteRow', 'InsertCol', 'DeleteCol', 'MergeCells', 'SplittoCells', 'SplittoRows', 'SplittoCols',
              'SearchReplace', 'Print', 'Preview']
              ],

2. 接下来有一个很神奇的配置, zindex,

zIndex : 999, //编辑器z-index的基数

这个是什么呢, 根据它的名称, 就是一个div的z轴index, 再通俗点儿说, 这个值越大, 它越会被显示在上层. 刚开始的时候, 我的日期时间控件, 弹出的日期输入框, 发现竟然在ueditor的下面…于是我就把这个值修改小了(100), 于是就不会遮住日期输入框啦. 当然, 修改datetimepicker的zIndex也是一样的~

3. 关闭远程图片抓取. 之前在1.1.8的版本中没有这个功能, 新版本增加了这个, 不过我个人感觉用处不大, 而且大大增加了改造的复杂度…所以干脆就关闭啦~

catchRemoteImageEnable:false,                                   //是否开启远程图片抓取

4. 修改表情包
我倒是没有新增表情包, 但是觉得自带的表情, 有些很磋..比如有啊表情之类…干脆删掉好了~我只保留了两个, 兔斯基&绿豆蛙

这个也比较简单, 修改dialog下面的emotion.js和emotion.html, 基本上就是一些数组啊神马的~另外emotion.css以及image底下的无用配置, 无用图片都可以直接删除了~

除此之外, 在config中打开本地表情配置, 即

emotionLocalization:true, //是否开启表情本地化,默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹

emotion.js, emotion.html, emotion.css这三个文件我已经修改好, 可以直接下载zip包:
emotion

5. 以上的方法会使用相对路径作为表情的路径, 实际上, 我们还可以利用sae的storage, 产生绝对路径的地址

1) 建立一个storage, 设为公有, 不过期, (可以根据需要去除防盗链功能). 将0.gif文件和ldw, tsj这两个文件夹上传到emotion目录中去. 这样的话, 表情的地址就是类似于:

http://应用名称-Storage名称.stor.sinaapp.com/emotion/tsj/t_0001.gif

然后根据上面的zip包里面的内容, 做一些修改, 将emotion.js中emotion.SmileyPath修改为:
http://应用名称-Storage名称.stor.sinaapp.com/emotion/
即可~

这样的话, 图片的表情地址就是http://开头的绝对路径啦~ 

好, 基础的配置也就到此结束啦, 下一篇文章再继续说说, 针对图片上传, 需要做怎样的修改~~

emotion.SmileyPath


本文链接:https://www.poisonbian.com/post/149.html 转载需授权!

分享到:
原文链接:,转发请注明来源!
「如何在thinkphp(sae版)中使用ueditor插件[2]」评论列表

发表评论