精华内容
下载资源
问答
  • ueditor安装秀米插件 Vue
    2021-06-24 07:54:01

    main.js

    import "../static/uEditor/ueditor.config.js";

    import "../static/uEditor/ueditor.all.min.js";

    import "../static/uEditor/lang/zh-cn/zh-cn.js";

    import "../static/uEditor/ueditor.parse.min.js";

    import "../static/uEditor/xiumi-ue-dialog-v5.js";

    import "../static/uEditor/xiumi-ue-v5.css";

    .edui-button.edui-for-xiumi-connect .edui-button-wrap .edui-button-body .edui-icon {

    background-image: url("http://xiumi.us/connect/ue/xiumi-connect-icon.png") !important;

    background-size: contain;

    }

    UE.registerUI('dialog', function (editor, uiName) {

    var btn = new UE.ui.Button({

    name : 'xiumi-connect',

    title : '秀米',

    onclick: function () {

    var dialog = new UE.ui.Dialog({

    iframeUrl: '/static/uEditor/xiumi-ue-dialog-v5.html?cache='+Math.random(),

    editor : editor,

    name : 'xiumi-connect',

    title : "秀米图文消息助手",

    cssRules : "width: " + (window.innerWidth - 60) + "px;" + "height: " + (window.innerHeight - 60) + "px;",

    });

    dialog.render();

    dialog.open();

    }

    });

    return btn;

    });

    69ff7c8c7de9

    folder.png

    XIUMI connect

    html,

    body {

    padding: 0;

    margin: 0;

    }

    #xiumi {

    position: absolute;

    width: 100%;

    height: 100%;

    border: none;

    box-sizing: border-box;

    }

    var xiumi = document.getElementById('xiumi');

    var xiumi_url = "http://xiumi.us";

    xiumi.onload = function () {

    console.log("postMessage");

    xiumi.contentWindow.postMessage('ready', xiumi_url);

    };

    document.addEventListener("mousewheel", function (event) {

    event.preventDefault();

    event.stopPropagation();

    });

    window.addEventListener('message', function (event) {

    if (event.origin == xiumi_url) {

    editor.execCommand('insertHtml', event.data);

    editor.fireEvent("catchRemoteImage");

    dialog.close();

    }

    }, false);

    (function () {

    var parent = window.parent;

    //dialog对象

    dialog = parent.$EDITORUI[window.frameElement.id.replace( /_iframe$/, '' )];

    //当前打开dialog的编辑器实例

    editor = dialog.editor;

    UE = parent.UE;

    domUtils = UE.dom.domUtils;

    utils = UE.utils;

    browser = UE.browser;

    ajax = UE.ajax;

    $G = function ( id ) {

    return document.getElementById( id )

    };

    //focus元素

    $focus = function ( node ) {

    setTimeout( function () {

    if ( browser.ie ) {

    var r = node.createTextRange();

    r.collapse( false );

    r.select();

    } else {

    node.focus()

    }

    }, 0 )

    };

    utils.loadFile(document,{

    href:editor.options.themePath + editor.options.theme + "/dialogbase.css?cache="+Math.random(),

    tag:"link",

    type:"text/css",

    rel:"stylesheet"

    });

    lang = editor.getLang(dialog.className.split( "-" )[2]);

    if(lang){

    domUtils.on(window,'load',function () {

    var langImgPath = editor.options.langPath + editor.options.lang + "/images/";

    //针对静态资源

    for ( var i in lang["static"] ) {

    var dom = $G( i );

    if(!dom) continue;

    var tagName = dom.tagName,

    content = lang["static"][i];

    if(content.src){

    //clone

    content = utils.extend({},content,false);

    content.src = langImgPath + content.src;

    }

    if(content.style){

    content = utils.extend({},content,false);

    content.style = content.style.replace(/url\s*\(/g,"url(" + langImgPath)

    }

    switch ( tagName.toLowerCase() ) {

    case "var":

    dom.parentNode.replaceChild( document.createTextNode( content ), dom );

    break;

    case "select":

    var ops = dom.options;

    for ( var j = 0, oj; oj = ops[j]; ) {

    oj.innerHTML = content.options[j++];

    }

    for ( var p in content ) {

    p != "options" && dom.setAttribute( p, content[p] );

    }

    break;

    default :

    domUtils.setAttributes( dom, content);

    }

    }

    } );

    }

    })();

    ueditor.config.js

    //修改UEditor的配置(ueditor.config.js),将其中的“xxs过滤白名单”加上

    section:['class', 'style'],

    确保在UEditor的前端设置(ueditor.config.js)中打开了“远程图片抓取到本地保存”

    //设置远程图片是否抓取到本地保存

    //需要后端同学配合修改

    catchRemoteImageEnable: true //设置是否抓取远程图片

    更多相关内容
  • 下面我们来介绍如何安装使用百度富文本编辑器 一、下载并且设置百度富文本编辑器的样式 你可以去百度UEditor的官网去下载编辑器,网址是http://ueditor.baidu.com/website/,下载下来之后看到有一个demo.html...

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器

     

        一、下载并且设置百度富文本编辑器的样式

        你可以去百度UEditor的官网去下载编辑器,网址是http://ueditor.baidu.com/website/,下载下来之后看到有一个demo.html文件,所以你网页上面也得引入demo.html里面引入的所有js文件 

     

     

    <!-- 配置文件 -->
    <script type="text javascript" src="um/ueditor.config.js">
    <!-- 编辑器源码文件 -->
    <script type="text javascript" src="um/ueditor.all.js"></script type="text></script type="text>


    <!--
    加载编辑器的容器 -->这是在header里面引入

    <script id="container" name="content" type="text plain"="">
       
     
    <script type="text javascript" src="js.js"></script type="text></script id="container" name="content" type="text>

     这是放在你网页上面需要放置编辑器的位置

    百度富文本编辑器UEditor安装配置全过程

    看这样百度富文本编辑器就出来啦,然后你可以编辑编辑器的样式,推荐使用火狐浏览器的firebug工具查看编辑器的代码然后设置样式!如下,

     

    百度富文本编辑器UEditor安装配置全过程

    例如我想要缩短编辑器的长度并且居中你就可以这样写css(注意引入css哦!)

    #container {
        width:90%;
        margin:0 auto;
    }


       
     二、设置百度UEditor文件上传路径 

        百度富文本编辑器UEditor默认上传的文件都在ueditorphpupload文件夹下,这样对于我们网站开发肯定是不方便的,所以我们得更改上传文件目录!打开umphpconfig.json文件,里面都各种文件上传目录配置!

        例如我想更改图片上传的目录,找到带有 “/* 上传图片配置项 */”下面的代码,然后找到imagePathFormat配置,可以将“/ueditor/php/upload/image/”修改成你想要上传到的文件目录,注意后面的“{yyyy}{mm}{dd}/{time}{rand:6}”不用更改,它可以自己生成分类文件夹!大家可以参照一下我的配置

    "imagePathFormat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */


     
         其他的文件上传也可以参照图片上传都是改变imagePathFormat的属性,而且在PHP中只需要改变这一个属性!

        三、将百度UEditor提交到后台

        将在百度富文本编辑器UEditor中编辑的内容提交到后台,后台怎么接收呢?其实这就跟一个form表单提交一样,你可以吧整个百度UEditor看做一个textarea

    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text plain"="">
       
    </script id="container" name="content" type="text>


     
        这是要在网页上面编辑器的位置添加的一部分代码,大家有没有发现script标签有一个name属性,所有后台就直接可以$_POST['content']接收就好啦,当然你也可以用其他name名称试试!

        四、在前台显示百度UEditor编辑的代码样式

        百度富文本编辑器UEditor带有插入代码的功能,也就是你在后台选择一种代码语言,然后在里面写入代码,前台可以给代码高亮显示,便于用户阅读代码,可以增加用户体验!

        

    百度富文本编辑器UEditor安装配置全过程

     

        大家可以看看看代码高亮的样式

     

    百度富文本编辑器UEditor安装配置全过程

     

    但是这需要前台引入其他的js和css文件才可以启动代码高亮功能,所以前台引入代码如下

    <link href="/um/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/um/third-party/SyntaxHighlighter/shCore.js"></script>


     
    基本的百度富文本编辑器UEditor安装配置就到这里啦,如果大家还有什么问题可以到王业楼的博客去讨论,大家一起交流学习!

     本文来源于王业楼的个人博客 本文地址:http://www.ly89.cn/detailB/50.html

     欢迎分享本文,转载请注明本文出处和地址

    转载于:https://www.cnblogs.com/ly89cn/p/4881607.html

    展开全文
  • 前端见微知著工具篇:Grunt实现自动化,百度富文本ueditor安装所需 转载说明(转自https://www.cnblogs.com/scy251147/p/4876489.html#top) 本篇文章为转载文章,来源为【前端福利】用grunt搭建自动化的web前端...

    前端见微知著工具篇:Grunt实现自动化,百度富文本ueditor安装所需

    转载说明(转自https://www.cnblogs.com/scy251147/p/4876489.html#top

    本篇文章为转载文章,来源为【前端福利】用grunt搭建自动化的web前端开发环境-完整教程,之所以转载,是因为本文写的太详细了,我很想自己来写,但是发现跳不出这篇文章的圈子,因为写的详尽,所以就转载了过来,算是分享吧。

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学、不用!

    1. 前言

    各位web前端开发人员,如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表示重点)。至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt。还有一点,它完全免费,没有盗版。既强大又免费的东西,为何不用?

    当然了,你如果你能找到更好的替代grunt的其他工具也是可以的,例如gulp。Gulp未来有可能替代grunt,但是现在来说市场占有率还是不如grunt。而这种工具咱们是现在就需要用的,所有不要再犹豫了,拿来主义,先用grunt,即学即用。

    2. 安装nodejs

    Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧。安装nodejs非常简单,完全傻瓜式、下一步下一步下一步、的安装方式,这里不再赘述。去 https://nodejs.org/ 上,点击页面中那个绿色、大大的“install”按钮即可。

    安装了nodejs之后,可以在你的控制台中输入“node -v”来查看nodejs的版本,也顺便试验nodejs是否安装成功。

    注意两点。第一,grunt依赖于nodejs的v0.8.0及以上版本;第二,奇数版本号的版本被认为是不稳定的开发版,不过从官网上下载下来的应该都是偶数的稳定版。

    3. 安装grunt-CLI

    注意,如果你的电脑不联网,以下操作你都做不了,所以,首先保证电脑联网。

    “CLI”被翻译为“命令行”。要想使用grunt,首先必须将grunt-cli安装到全局环境中,使用nodejs的“npm install…”进行安装。如果你不了解nodejs的npm如何安装软件,这里就先不要问了,先照着我说的做。

    打开控制台(注意:windows系统下请使用管理员权限打开),输入:

    注意,mac os 系统、部分linux系统中,在这句话的前面加上“sudo ”指令。

    回车,命令行会出现一个转动的小横线,表示正在联网加载。加载的时间看你网速的快慢,不过这个软件比较小,一般加载时间不会很长,稍一会儿,就加载完了。你会看到以下界面。

    这时候要验证一下grunt-cli是否安装完成并生效,你只需要继续在命令行中输入“grunt”命令即可。如果生效,则会出现以下结果:

    你不要管这些结果是什么意思,总之出现这些提示,证明你的grunt-cli安装成功了。

    4. 创建一个简单的网站

    Grunt是应用于实际项目的,所以我们得有一个简单的测试网站来演示grunt的安装、使用。

    首先,我在电脑的D盘下面建了一个“grunt_test”文件夹,里面建了三个空文件夹、两个空文档,名称如下图。(注意 Gruntfile.js 文件的首字母大写!)

    其他的东西先不要管,先把package.json这个文件写一些东西。记住,既然文件后缀名叫“json”,那么文件中的格式肯定是严格的json格式。什么,不熟悉json?作为一个web前端程序猿,json是必备课。有一个教程《json2.js源码解读》能让你彻底了解json。

    书归正传。Package.json的内容我们写成如下格式:

    很简单,我们把这个网站或系统的名称、版本写了一下。但是,不光是写在这里占空的,以后会用到的,具体如何用,我们下文会有介绍,先别着急。

    还有,最后一个“devDependencies”是什么意思?字面意思解释是“开发依赖项”,即我们现在这个系统,将会依赖于哪些工具来开发。现在代码一行都没有写,依赖于谁?谁也不依赖!所以,就先写一个空对象。但是下文会慢慢把它填充起来。

    另外,其实package.json中你可以增加任何符合json格式的代码,它生来自由,仅仅受json代码格式的限制。

    怎么样,看到这里,是不是觉得下文很有悬念,很想看下去呀?那就继续!

    5. 安装grunt

    主角总是姗姗来迟。《三国演义》在开篇三分一之后才请出来诸葛亮,《水浒传》在第十八回才请出了宋江。而我们本文的主角,也出来的不早。

    接下来我们会有一系列插件的安装,他们的安装过程和grunt一样。但是他们的执行都是基于grunt的,因此才能把grunt叫做一个“构建工具”。Grunt没有具体的作用,但是它能把有具体作用的一个一个插件组合起来,形成一个整体效应。

    例如,你需要检查js语法错误,然后再去压缩js代码。如果这两步你都去手动操作,会耗费很多成本。Grunt就能让你省去这些手动操作的成本。

    书归正传。注意,这里安装grunt不再是全局安装了,需要你在控制台进入到网站或系统的具体目录下。这里我们进入 D:\grunt_test 目录下。然后输入以下命令。

    注意,先不要按回车,先不要执行,先看看下文的描述!

    这里需要解释的是,“—save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项。看到“开发依赖项”这一次,是不是觉得有些眼熟?上文在配置package.json时,其中的“devDependencies”中就会存储开发依赖项。

    具体保存为开发依赖项是一个什么效果?动手安装一下就是了。首先,在运行安装grunt的命令之前,package.json中的“devDependencies”对应的是空对象。

    现在我们来运行这行命令。你会看到几条warning提示,不用管它。然后接下来就是加载状态,一个旋转的小横线。稍等待一会儿,会提示你安装成功。如下图:

    现在你应该第一时间打开package.json去看看,那里的“devDependencies”有什么变化。我这里的变化如下图,看看你的是不是和我的一样?

    然后你再看看文档目录中的文件或者文件夹有什么变化?我这里多了一个“node_modules”文件夹,其中有一个“grunt”文件夹,再其中有若干文档。这里就是存储grunt源文件的地方。

    这是见证奇迹的时刻,别着急,奇迹还没完呢。然后你在控制台运行“grunt”命令。如果你得到一个warning提示,那说明grunt已经起作用了。如下图:

    经过以上三步,说明grunt已经在这个目录下成功安装。

    那么,为何我们在刚才执行grunt时候会有Warning提示呢?根据提示,我们得知的信息是:Task “default” not found ,如何搞定这个问题?——当然是继续往下看啊。

    6. 配置Gruntfile.js

    顾名思义,Gruntfile.js 这个文件,肯定是为了grunt做某种配置的。按照grunt的规定,我们首先把Gruntfile.js配置成如下格式。

    在以上代码中,我们看到了刚才运行grunt命令,warning提示中的“default”字眼。不妨我们此时再运行一下grunt命令,看看会不会再次出现“warning”、“default”等字眼。

    运行结果告诉我们“Done, without errors”。那就继续往下吧。

    另外请注意Gruntfile.js中的一句话:

    这句话是在Gruntfile.js中获取package.json中的内容。在上文配置package.json时我们说过:package.json中的内容不光是用来占位置的,还可以在其他地方获取。这里不是已经获取了package.json内容了吗?至于获取了如何使用,下文会有介绍,还是继续往下看吧。

    7. Grunt插件介绍

    进入grunt官网的插件列表页面 http://www.gruntjs.net/plugins ,我们能看到grunt到目前位置的所有插件。现在里面有4560个插件,这个数量每天都在增加。而且,这些既然出现在官网,肯定是经过审核的。

    插件分为两类。第一类是grunt团队贡献的插件,这些插件的名字前面都带有“contrib-”前缀,而且在插件列表中有星号标注。第二类是第三方提供的插件,不带有这两个特征。

    和jquery一样,插件那么多,肯定不会全部用。grunt官网插件列表的前几个插件中的前几个插件,下载量最多,它们肯定是大家都在用的插件。第一名jshint插件最近30天下载量将近89万次,这是多么惊人的下载量!

      咱们可以把前几名插件的作用简单描述一下,看看你在实际编码过程中是否需要?其实不用看就知道答案——肯定需要——要不然怎么会下载量那么高呢?

    • Contrib-jshint——javascript语法错误检查;
    • Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
    • Contrib-clean——清空文件、文件夹;
    • Contrib-uglify——压缩javascript代码
    • Contrib-copy——复制文件、文件夹
    • Contrib-concat——合并多个文件的代码到一个文件中
    • karma——前端自动化测试工具

    以上这些插件,本文不会全部讲到。但是随着讲解其中的一部分,我想你就能掌握使用grunt插件的方法。知道方法了,然后你就可以参考官方文档去使用你想要的插件。

    grunt集全世界web前端开发的智慧于一身,比你想想的更加强大,它的插件库能应对你在web前端开发遇到的任何事情。

    还等什么,继续往下看。

    8. 使用uglify插件(压缩javascript代码)

    Uglify插件的功能就是压缩javascript代码。至于javascript代码压缩的必要和意义,这里就不用在赘述了吧?几乎每一个javascript类库或者框架,都有一个 **.min.js 压缩版。

    问一句,你平时做javascript开发,都用什么工具来压缩代码?我想这个问题会有许多个答案。但是,使用grunt的uglify插件进行压缩,效果绝对不输于任何插件。

    要安装一个插件,你首先要进入这个插件在grunt官网的说明文档页面。我们在grunt官网插件列表页面,找到“contrib-uglify”点击进入。你要看这里面的说明,然后根据说明进行安装。这里我们只讲重点。

    安装uglify插件的方式,和安装grunt是一样的。还记得grunt是怎么安装的吗?

    这里又出现了熟悉的“—save-dev”,具体的作用在上文安装grunt时已经说过了,不再赘述。运行这句命令。安装完成之后,你会看到package.json中“devDependencies”节点的变化,以及“node_modules”文件夹里的变化。这两点都在安装grunt时已经详细说过。

    现在还不能用,还需要在Gruntfile.js 做配置。

    不过,先别着急。我们既然要使用uglify来压缩javascript代码,当然得创建一个js文件来做实验。我们在现有的“src”文件夹中新建一个“test.js”,并随便写一些代码。显然,我们无法通过双手和键盘写出压缩后的代码。

    测试文件建立好了。我们接下来就要把这个js文件进行压缩。

    当然,要压缩谁?往哪里压缩?这些都需要配置,在Gruntfile.js中配置。分为三步:

    第一步,在grunt.initConfig方法中配置 uglify 的配置参数。如下图:

    上图中,对uglify的配置有两项。

    “options”中规定允许生成的压缩文件带banner,即在生成的压缩文件第一行加一句话说明。注意,其中使用到了pkg获取package.json的内容。

    “build”中配置了源文件和目标文件。即规定了要压缩谁?压缩之后会生成谁?注意,我们这里将目标文件的文件名通过pkg的name和version来命名。

    (PS:上文中说过的package.json的内容终于找到了他被应用的地方了。这样的好处是:例如,对文件版本的管理,你只需要在package.json中修改即可,grunt会自动根据最新的版本号生成相应版本的文件。你不用手动去修改文件的文件名。)

    最后,这里只是对“options”和“build”的基本应用,还有许多中使用方式,可以去官网查阅。

    第二步,在 grunt.initConfig 方法之后,要让grunt去加载这一个插件。光配置了,不加载上,如何用啊?

    第三步,在grunt命令执行时,要不要立即执行uglify插件?如果要,就写上,否则不写。我现在是需要的,所以我写上。也有可能不需要,这种情况谁知道呢?

    以上说的这三步已经OK了,接下来我们去试试。在控制台中运行grunt命令,看得到什么结果。

    控制台将输入如下信息:

    再去看看,是否生成了一个压缩后的js文件?

    果然。根据package.json中的name和version生成了文件名。而且,压缩后的代码的banner也是符合Gruntfile.js中的配置要求的。

      以上就是uglify插件的详细安装、配置说明。Javascript使用uglify压缩,css可使用cssmin插件压缩。安装、配置方法一样的,不再赘述。

    9. 使用jshint插件(检查javascript语法错误)

    如果你仅仅写一个几十行js代码做一个小测试,语法错误的检查大可不必。但我相信看这篇文章的朋友,肯定不限于此,你可能每天都需要写一大堆的js代码来完成自己的工作。即使再牛、再仔细的人也会犯一些低级错误,但是jshint不会。因此,你最好的做法就是每时每刻都让jshint来帮助你检查刚刚写过的js代码,有错误立即发现立即处理。这样一来,你们就没必要每隔几天都相聚在会议室进行人工代码走查了。及时代码走查,你也没必要刻意的关注语法错误。

    还有一些js初级入门的朋友,或者已经有多年js经验,却“不思进取”的朋友。你到现在可能都不知道一些js语法归法。例如:你到现在可能都不知道“==”和“===”到底有什么区别,你到现在都不知道在语句块内定义变量的坏处,还有更多更多你不知道的。怎么办?让jshint来帮助你。

    接下来介绍jshint的安装和配置。

    插件的安装和安装grunt、uglify没有任何差别,这里不再赘述了。直接执行下面的命令

    配置jshint和配置uglify一样。在配置uglify时候我们讲到了三个步骤,这里也是三个步骤。

    第一步,在grunt.initConfig方法中配置jshint。

    和uglify的配置一样,分为“options”和“build”两个部分。“build”中描述了jshint要检查哪些js文档的语法。“options”中描述了要通过怎么的规则检查语法,这些规则的描述文件就保存在网站根目录下的一个叫做“.jshintrc”的文件中。因此我们在网站的根目录下面添加上这个文档,并且填写上文件内容。

    .jshintrc文件中代码的格式也要遵守严格的json语法,否则无效。那里面这些配置是什么意思呢?想详细了解可以去百度搜索“jshint 配置”关键字,你就能知道答案。这里由于篇幅太多,不过多介绍。总之吧,这个.jshint是我常用的配置。

    第二步,加载插件。和uglify的加载方法一样。注意,这里没有先后顺序。

    第三步,配置grunt命令启动时,要执行的任务,这里注意先后顺序。你是希望先检查语法呢?还是先合并呢?——聪明人应该都知道先检查语法比较好,因为语法对,合并了有什么意义?

    以上三步配置完了之后,我们可以测试一下这个jshint到底怎么用。这里我故意将当前创建的test.js文件写一个语法错误。

    然后我们执行“grunt”命令,看jshint能给我们识别出来这两个错误吗?结果如下:

    看到没有,jshint很清除的识别出了这两个错误。而且注意到没有,jshint错误之后呢,其后面的uglify就没有再继续执行。这正式我们想要的结果。

    我们修改完这些错误,在此执行grunt命令,结果没有提示错误,而且jshint和uglify都顺利执行了。

    10. 使用csslint插件(检查css语法错误)

    检查css文件的语法错误要使用csslint插件,其安装配置方法和jshint几乎一模一样。只不过csslint依赖于一个叫做“.csslintrc”的文件作为语法检验的规则,我的“.csslintrc”文件如下。其他内容我们就不在此赘述了。

    11. 使用watch插件(真正实现自动化)

    你可以一直有一个疑问,上面将的插件中,每次执行插件功能,都得执行一遍“grunt”命令,这样的操作非常繁琐,说好的“自动化”呢?别着急,接下来就解决这个问题——通过watch插件解决这个问题。

    首先安装watch插件,如果安装不再赘述了。接下来要配置watch插件,配置分为三个步骤,不再详细描述了,只贴图说明。

    第一步。配置watch将监控哪些文件的变化,以及这些文件一旦变化,要立即执行哪些插件功能。如下图,watch将监控src文件夹下所有js文件和css文件的变化,一旦变化,则立即执行jshint和uglify两个插件功能。

    第二步,直接贴图

    第三步,直接贴图

    这三步执行完了,即watch插件配置完成。运行grunt命令,控制台提示watch已经开始监听。此时要想停止,按ctrl + c即可。

    既然在监听,我们试一试看监听有没有效。我们将 test.js 代码中去掉一个分号,看它能否自动检查出来这个错误。

    结果显示,watch检查到了test.js文件的变化,而且通过执行jshint提示了语法错误。更重要的是,它现在还在监听、并未停止。说明它正在等着你去修改错误,重新监听检查。那我们就不要辜负它了,再把语法错误修复了。看它会如何处理。

    它又检测到了文件变化,这次语法没有错误,它很顺利的执行了jshint和uglify,执行完毕之后重新进行监听。多听话的工具!

    好了,已经回答了你们的问题——自动化

    12. 上文中所谓的“build”

    上文中描述各个插件的配置时,都是用了“build”这一名称作为一个配置项。

    那么这里是不是必须用“build”这一个名字?答案很明显,当然不是。我之前之所以没直接说,是因为我要先把插件的安装和配置讲明白,不变一次传输太多知识,现在一并和大家说了。

    这里可以用任何字符串代替“build”(但要符合js语法规则)。甚至,你可以把“build”指向的内容分开来写。这样对多人协同开发很友好。好的设计就是这样:让用户尽情发挥他们的自由来干事,而不是去限制他们。

    如上图,我对jshint的配置做了修改,大家可以去自己修改,然后执行grunt命令试试。命令行会有“test1”、“test2”的字眼。

    13. 批量安装插件

    请各位看官继续跟随我思考问题,学而不思则罔。

    到现在为止,我刚刚安装了3个插件,“node_modules”文件夹所占据的空间就有18MB了。大家猜一猜,我在上传代码到开发库的时候,会不会把“node_modules”中的内容也上传呢?既然我这么问了,答案肯定是不上传。

    问题又来了,我如果作为开发环境的搭建者,我不把“node_modules”上传,其他一起开发的人,怎么得到这些grunt插件和工具呢?有人回答让他们自己去手动一个一个安装——首先这是一个笨方法,其次如果我当年安装的旧版本,而他们现在自己安装的可能是新版本。新旧有可能不兼容啊。

    该怎么办?

    其实答案很简单——我上传源码时候,肯定会把package.json上传上去,而package.json中的“devDependencies”就记录了这个系统的开发依赖项,然后我通过nodejs的npm即可批量安装。

    做一个试验。我在D盘下面新建一个目录“grunt_test_1”,然后把“grunt_test”中的package.json拷过去。在打开命令行跳转到“grunt_test_1”,执行“npm install”命令,看看得到什么结果。

    此时按回车执行命令,结果在“grunt_test_1”生成了“node_modules”文件夹,里面安装好了package.json中“devDependencies”配置的插件。而且,版本都是一直的。

    神奇吧!

    14. 系统文件结构

    使用grunt来搭建web前端开发环境时候,文档目录和之前可能就不一样了。因为你手动写的代码文件,绝对不是你最终输出的文件。这些还需要经过grunt各种插件的检验、合并、压缩才能最终输出给用户。

    这里我拿自己的开源项目wangEditor的文档结构举例子。

    上图中,“src”文件夹里面存储的是原始的代码文件,“dist”文件夹里面存储的是最终生成的代码文件,“demo”里面存储的是一些测试页面。

    当然了,各个系统的文件组织形式不一样,但是我建议大家还是按照这么一个思想去组织文档结构。大家也可以去github上参考一下jquery、bootstrap这些著名开源项目的文档结构。看看jquery输出的虽然是简单的一个js文件,但是它的开发环境是多么的复杂。

    做好前端,不容易。

     

    Edit(2015年10月16日17:49:02):补充内容

    在实际设计过程中,我们需要在js代码中,用到requirejs的一些关键字或者angularjs的一些关键字,那么我们如果直接利用jshit进行语法检查的时候,会报错的,因为js中并没有这些关键字,出现这种问题的时候,我们需要在.jshitrc文件中,声明一个globals节点,然后将需要忽略的关键字放进去就行了,比如我的配置如下:

    /*globals中的关键字,jshit进行语法检查的时候,会忽略掉错误,否则会提示错误*/

    "globals":{
    /* MOCHA */
    "describe" : false,
    "it" : false,
    "before" : false,
    "beforeEach" : false,
    "after" : false,
    "afterEach" : false,
    /*RequireJS*/
    "define" : false,
    "requirejs" : false
    }
    那么在进行js语法检查的时候,这些关键字就会被忽略,就不会报错了。

    还有一个问题就是,如果使用watch插件进行代码监视的时候,记得build节点的监视路径一定要设置正确,否则的话,无论你代码怎么写,都是无法监测到的。

    那么

    好文要顶 关注我 收藏该文  

    程序诗人
    关注 - 195
    粉丝 - 729

    荣誉:推荐博客

    +加关注

    2

    « 上一篇:前端见微知著AngularJS备忘篇:温故而知新,可以为师矣
    » 下一篇:前端见微知著工具篇:Bower组件管控

    posted on 2015-10-14 09:36 程序诗人 阅读(484) 评论(2) 编辑 收藏

     

    发表评论

      

    #1楼 2015-12-15 15:14 | richiezhang  

    写的好详细,收藏了

    支持(0)反对(0)

      

    #2楼 2017-07-22 11:59 | Avenstar  

    nice~

    支持(0)反对(0)

    刷新评论刷新页面返回顶部

    注册用户登录后才能发表评论,请 登录 或 注册,访问网站首页。

    【推荐】超50万C++/C#源码: 大型实时仿真组态图形源码
    【前端】SpreadJS表格控件,可嵌入系统开发的在线Excel
    【推荐】程序员问答平台,解决您开发中遇到的技术难题

     

    相关博文:
    · grunt前端自动构建工具初级使用
    · Grunt基础知识介绍
    · 前端自动化工具 -- Grunt 使用简介
    · Grunt环境搭建及使用 前端必备
    · Grunt搭建自动化web前端开发环境--完整流程

    最新新闻
    · 千克的变迁 | 大家谈
    · 比亚迪与丰田达成合作:新车型2025年前在华投放
    · 研究人员研发出具有强大人工神经系统的皮肤:异步编码电子皮肤
    · 盲人看到的世界真是黑漆漆一片吗?
    · 大公司密集反腐:除了美团、360,蚂蚁金服员工因受贿获刑
    » 更多新闻...

    展开全文
  • UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 下载 推荐直接在github上下载,release发布页地址:...

    简介

    UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

    下载

    推荐直接在github上下载,release发布页地址:https://github.com/fex-team/ueditor/releases

    下载文件说明,以v1.4.3.3举例:

    • ueditor1_4_3_3-gbk-asp.zip:包含asp示例并以gbk编码
    • ueditor1_4_3_3-gbk-jsp.zip:包含jsp示例并以gbk编码
    • ueditor1_4_3_3-gbk-net.zip:包含DotNet示例并以gbk编码
    • ueditor1_4_3_3-gbk-php.zip:包含php示例并以gbk编码
    • ueditor1_4_3_3-utf8-asp.zip:包含asp示例并以utf-8编码
    • ueditor1_4_3_3-utf8-jsp.zip:包含jsp示例并以utf-8编码
    • ueditor1_4_3_3-utf8-net.zip:包含DotNet示例并以utf-8编码
    • ueditor1_4_3_3-utf8-php.zip:包含php示例并以utf-8编码

    安装

    本文以 ueditor1_4_3_3-utf8-net.zip 版本说明安装使用步骤

    说明

    • 官网每发布一个版本都提供了多种类型可供选择,asp,jsp,dotnet,php。无论选择哪一种版本,其实里面的前端js代码都是一样的,区别只是后端示例代码不同
    • 推荐使用utf-8版本,因为现在的软件工程基本都是utf-8的编码,很多的ide也都默认utf-8,如 VisualStudio 。
    • DotNet 类型的对于传统DotNetFramework 和 DotNetCore都是适用的,其实等你下载下来查看里面的C# 代码会发现,官方仅提供了一个例子,真正项目中落地大概率需要改造这个例子。

    示例

    以 AspDotNetCore MVC 工程为例说明

    • 先创建一个 AspDotNetCore MVC 的工程,创建完毕,工程目录结构如下:

    以下目录结构为windows资源管理器视图,可能和VS中稍有差异

    │  appsettings.Development.json
    │  appsettings.json
    │  Program.cs
    │  tree.txt
    │  WebApplication2.csproj
    │  WebApplication2.sln
    │              
    ├─Controllers
    │      HomeController.cs
    │      
    ├─Models
    │      ErrorViewModel.cs
    ├─Properties
    │      launchSettings.json
    │      
    ├─Views
    │  │  _ViewImports.cshtml
    │  │  _ViewStart.cshtml
    │  │  
    │  ├─Home
    │  │      Index.cshtml
    │  │      Privacy.cshtml
    │  │      
    │  └─Shared
    │          Error.cshtml
    │          _Layout.cshtml
    │          _Layout.cshtml.css
    │          _ValidationScriptsPartial.cshtml
    │          
    └─wwwroot
       
    
    • 在 wwwroot 文件夹下面新建一个文件夹 ueditor1_4_3_3-utf8-net ,存放 ueditor 插件文件,我们直接将下载下来的zip解压后的内容全部复制进去。

    • 在 index.cshtml 文件中编写初始化 ueditor 代码

    @{
        ViewData["Title"] = "Home Page";
    }
    
    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    
        </br>
        </br>
        <div>
            <!-- 加载编辑器的容器 -->
            <script id="container" name="content" type="text/plain">
                这里写你的初始化内容
            </script>
            <!-- 配置文件 -->
            <script type="text/javascript" src="~/ueditor1_4_3_3-utf8-net/ueditor.config.js"></script>
    
            <!-- 编辑器源码文件 -->
            <script type="text/javascript" src="~/ueditor1_4_3_3-utf8-net/ueditor.all.js"></script>
            <script type="text/javascript" src="~/ueditor1_4_3_3-utf8-net/lang/zh-cn/zh-cn.js"></script>
    
            <!-- 实例化编辑器 -->
            <script type="text/javascript">
                var ue = UE.getEditor('container');
            </script>
        </div>
    </div>
    
    
    

    在这里插入图片描述

    • 此时运行工程,浏览器中将呈现初始化后的 ueditor ,如下图

    在这里插入图片描述

    • 若 浏览器中提示 xxx.js 无法找到,报404 ,检查script 引入路径是否有误。

    代码

    https://github.com/Naylor55/UeditorWithAspDotNetCore

    技术交流

    • 邮箱:cnaylor@163.com
    • QQ群:1158377441
    展开全文
  • ueditor安装文件

    2014-03-02 22:34:50
    python 版本 ueditor安装文件
  • UEditor 编辑器的下载与安装

    千次阅读 2021-03-30 22:13:01
    UEditor 编辑器的下载与安装   UEditor 是由百度开发的富文本web编辑器,它具有轻量,可定制,开源基于MIT协议,允许自由使用和修改代码,注重用户体验等特点。   官方文档: http://fex.baidu.com/ueditor/  ...
  • 对于新手来说,只要能实现功能即可,其它设置完全默认。 预览图: 1.首先 到官网下载,这个不多说。下载后解压到网站你想要的目录... <!-- 加载编辑器的容器 -->...-- 以下脚本中增加文本为初始化内容 -->.../stro
  • 转载于:https://www.cnblogs.com/cpy-devops/p/10368306.html
  • 一、使用环境 Win7 Eclipse jettty9 ...、这里下载的版本是[1.4.3.3 Jsp版本]3、将下载好的文件包放在工程目录中4、修改ueditor/ueditor.config.js 里的务器统一请求接口路径注:这个请求路径是请求服务器
  • 这篇文章主要介绍了UEditor百度编辑器安装与使用方法分享,需要的朋友可以参考下一、官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:_examples:编辑器完整版的示例页面_demos:编辑器的各种...
  • 我的目录结构是:www/CMS/MyEditor/上传图片的地址是: www/images/news/content/修改editor_config.js:*/window.UEDITOR_HOME_URL = "/CMS/MyEditor/";var URL;...URL = window.UEDITOR_HOME_URL||tmp...
  • 1、在composer.json, require 中 ...2、命令行(laravel项目的根目录下)输入:composer require stevenyangecho/laravel-u-editor,只安装ueditor就行了,教程里说的“You'll then need to runcomposer...
  • 1,安装 npm install ngx-ueditor --save 把UEditorModule模块导入到你项目中。 import { BrowserModule } from '@angular/platform-browser' ; import { FormsModule } from '@angular/forms' ; import { ...
  • jsp实现Ueditor配置

    2016-06-30 15:27:01
    在web项目中引入Ueditor,并实现配置,使之能正常上传图片,并显示.代码使用MyEclipse实现,若使用其他工具,主要将ueditor文件夹复制过去,并在配置中修改项目名称即可
  • NULL 博文链接:https://onestopweb.iteye.com/blog/2311307
  • 拷贝Ueditor文件到include目录下,覆盖inc对应的inc_fun_funAdmin.php,织梦后台配置即可
  • 织梦DedeCMS安装UEditor编辑器方法

    千次阅读 2016-07-23 16:47:18
    如果觉得织梦CMS自带的编辑器满足不了您的需求,可以试试百度开发UEditor的... 百度web前端研发部提供了织梦CMS安装UEditor编辑器的方法,不过只有utf-8版本,gbk安装后编辑器相关的中文提示会出现乱码。 1、下载UEd
  • 最近有个vue-cli的项目要使用UEditor(百度的产品) 结果,引入文件上遇到了问题。 如何在vue-cli的项目中引入UEditor,请参考: https://github.com/HaoChuan9421/vue-ueditor-wrap 实际案例,主要有以下几点:...
  • yii2-ueditor百度编辑器

    2022-02-16 20:41:49
    安装yii2-百度编辑器: php composer.phar require --prefer-dist crazydb/yii2-ueditor "*" 'controllerMap'=>[ //'upload'=>'backend\components\UploadController', 'ueditor' => [ 'class' =>...
  • 下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • react-ueditor 使用 react 框架对 ueditor 进行封装和扩展 :sparkles: 特性 支持更灵活的图片和音视频资源上传 支持同个页面存在多个编辑器实例 支持对复制进来的图片进行操作 允许扩展工具栏,支持在扩展中使用已有...
  • UEditor添加字体

    2019-09-19 13:53:44
    UEditor添加字体 最近工作中遇到一个问题,百度富文本里的字体不够用,还想扩展其他的字体,今天来记录一下: 第一步,修改zh-cn.js 找到fontfamily,添加要添加的字体 'fontfamily':{ 'FangSong': '仿宋', 'song...
  • UEditor-for-phpcms phpcms 深度的整合 百度编辑器ueditor 不得不说,ueditor真的比ckeditor好用很多。 uediter代码很规范,干净易懂,扩展性强,文档详细。 phpcms的自身扩展性也非常强,UEditor-for-phpcms是强强...
  • 于是自己动手写了一个,效果如图 实现方法也比较简单,直接整合layui的layer弹层加ueditor插件,把官网上面的demo跑一遍,于是发现入坑了,绑定了点击事件之后,只有第一次点击才会在弹层正常显示,注意这里字符串有...
  • UEditor的使用可以查看:UEditor文档 1.下载 到官网下载UEditor编辑器:...Step2:安装依赖(如果没有安装 grunt , 请先在全局安装 grunt) npm install Step3:在终端执行 grunt default grunt default 2.
  • Ueditor百度编辑器插件的安装-附件资源
  • 为绿色免安装版解压即可使用 属于文档工具类,进入到ultraEdid目录中,双击uedit.exe即可
  • yii2框架的百度ueditor 安装 安装此扩展的首选方法是通过 。 要么跑 php composer.phar require --prefer-dist rogeecn/yii2-ueditor "*" 或添加 "rogeecn/yii2-ueditor": "*" 到composer.json文件的 require ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,370
精华内容 1,348
关键字:

ueditor安装