首页 > 建站相关 > web-ueditor插件改编
2016二月12

web-ueditor插件改编

[隐藏]

终于.本人受不了wordpress自带的垃圾编辑器,显示还好,但后台编辑实在是太烂了,所以把支持旧版wordpress的ueditor插件改了改

效果:

scrawl.png

图文混排方法

1. 图片居左,文字围绕图片排版

方法:在文字前面插入图片,设置居左对齐,然后即可在右边输入多行文本

2. 图片居右,文字围绕图片排版

方法:在文字前面插入图片,设置居右对齐,然后即可在左边输入多行文本

3. 图片居中环绕排版

方法:亲,这个真心没有办法。。。

还有没有什么其他的环绕方式呢?这里是居右环绕

占位

占位

占位

占位

占位

//—————————————————————————————————————————————————————————————————–

1.支持了codebox++

需预先安装codebox++ ,并启用,修改ueditor.all.js以下内容:

 me.setOpt('insertcode',{
			'hgycpp':'hgyC/C++',// 在代码语言中新加一项

改为支持codebox++

 //改成codebox++: 原来代码: me.execCommand('inserthtml','<pre id="coder"class="brush:'+lang+';toolbar:false">'+code+'</pre>',true);
  if(lang.match('hgy'))
  {me.execCommand('inserthtml','<pre id="coder"lang="cpp" line="" file="" colla="-">'+code+'</pre>',true);
}else
{
me.execCommand('inserthtml','<pre id="coder"class="brush:'+lang+';toolbar:false">'+code+'</pre>',true);
}

此时如输出代码,可能出现

void&nbsp;main()

这样的代码

为了去掉&nbsp;继续修改:

me.addOutputRule(function(root){
        utils.each(root.getNodesByTagName('pre'),function(pre){
            var code = '';
            utils.each(pre.children,function(n){
               if(n.type == 'text'){
                   //在ie下文本内容有可能末尾带有\n要去掉
                   //trace:3396
                  //hgy413修改,去掉codebox的&nbsp,原代码: code += n.data.replace(/[ ]/g,'&nbsp;').replace(/\n$/,'');
				  code += n.data.replace(/[ ]/g,' ').replace(/\n$/,'');
               }else{

修改完codebox++效果如下:

1
2
3
void main()
{
}

2.修改默认字体

editor编辑器默认字号是16号,默认字体为sans-serif,显得有些难看,所以决定修改默认值,修改ueditor.all.js

 //font-family不能呢随便改,在safari下fillchar会有解析问题
                    //原来:'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
					'body{margin:8px;font-family:SimSun;font-size:14px;}' +

3.修改上传限制和保存目录

在/php/config.json中记录了这些信息:

    /* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 8048000, /* 上传大小限制,单位B */

4.修改支持自长高

个人是爱好自长高的写文章,就是没有滚动条,打开自长高开关是在ueditor.config.js中

 // 是否自动长高,默认true
        ,autoHeightEnabled:true

但自长高存在一点小bug,那就是wordpress最上层盖住了一部分编辑菜单,修改了下,把编辑菜单和文章内容整体下移了25px,修改处在themes/default/ueditor.css

一处改编辑菜单,加important是因为原来它的位置是js自动计算的,所以强制覆盖它

.edui-default .edui-editor-toolbarbox {

position: relative;
top: 25px!important;// hgy为设置完全展开文章加入

一处改内容

.edui-default .edui-editor-iframeholder {

position: relative;
top: 25px!important;// hgy为设置完全展开文章加入

改完如下图所示

1455446956220518.jpg

文章作者:hgy413
本文地址:https://hgy413.com/2405.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

14 Responses to “web-ueditor插件改编”

  1. #1 minecraft 回复 | 引用 Post:2018-10-06 17:16

    Very great post. I simply stumbled upon your blog and wanted to mention that
    I have truly enjoyed browsing your blog posts. In any case I will be subscribing to your feed and I hope you
    write again very soon!

  2. I have been surfing online more than 3 hours today, yet I never found
    any interesting article like yours. It is pretty worth enough for me.
    In my view, if all webmasters and bloggers made good content as you did, the
    internet will be much more useful than ever before.

  3. My partner and I stumbled over here coming from a different page and thought I may as well check things out.
    I like what I see so now i am following you. Look forward to
    exploring your web page again.

  4. #4 Benefits of Coconut Oil 回复 | 引用 Post:2018-10-27 05:18

    Heya i am for the first time here. I came across this board and
    I find It truly useful & it helped me out a lot. I hope to
    give something back and aid others like you aided me.

  5. #5 Benefits of Coconut Oil 回复 | 引用 Post:2018-10-29 01:16

    Hi, just wanted to mention, I loved this blog
    post. It was practical. Keep on posting!

  6. #6 quest bars cheap 回复 | 引用 Post:2018-11-04 06:32

    Inspiring story there. What happened after? Take care!

  7. #7 Sling TV 回复 | 引用 Post:2018-11-10 08:00

    Aw, this was a very good post. Finding the time and actual
    effort to make a great article… but what can I
    say… I hesitate a whole lot and never seem to get anything
    done.

  8. Hey There. I found your weblog the use of msn.
    That is a very smartly written article. I’ll be sure to bookmark it and come back to read more of your useful info.
    Thank you for the post. I’ll certainly return.

  9. Sling tv coupons and promo codes for november 2018
    Howdy! I know this is kinda off topic however , I’d figured I’d ask.

    Would you be interested in exchanging links or maybe guest authoring a blog post or vice-versa?
    My site addresses a lot of the same topics as yours and
    I feel we could greatly benefit from each other.
    If you are interested feel free to send me an email. I look forward to
    hearing from you! Terrific blog by the way! Sling tv coupons and
    promo codes for november 2018

  10. Your way of explaining everything in this paragraph is genuinely pleasant,
    every one can effortlessly be aware of it, Thanks a lot.

  11. I always used to read paragraph in news papers but now as I am
    a user of net thus from now I am using net for posts, thanks to web.

  12. Hi to every one, the contents existing at this site are genuinely amazing for
    people knowledge, well, keep up the good work fellows.

  13. #13 descargar facebook 回复 | 引用 Post:2018-11-21 07:42

    Great post.

  14. #14 descargar facebook 回复 | 引用 Post:2018-12-06 07:55

    I am regular visitor, how are you everybody? This paragraph posted at this web site is genuinely good.

发表评论