(1)关于ueditor运用的实践

最新推荐文章于 2021-08-13 02:20:57 发布

zhangguoliang12309

最新推荐文章于 2021-08-13 02:20:57 发布

阅读量334

点赞数

分类专栏： tp5插件运用

本文链接：https://blog.csdn.net/zhangguoliang12309/article/details/78770766

版权

tp5插件运用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

(1)关于ueditor运用的实践

1.首先进入ueditor文件夹中找到ueditor.config.js. 更改服务器统一请求接口路径为：
serverUrl: URL + “php/controller.php”。

var URL = window.UEDITOR_HOME_URL || getUEBasePath();
/**
* 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {

    //为编辑器实例添加一个路径，这个不能被注释
    UEDITOR_HOME_URL: URL

    // 服务器统一请求接口路径
    , serverUrl: URL + "php/controller.php"

2.在使用ueditor的html页面中引入js

<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>


</head>

3.form表单中添加ueditor的字段为：

<label>
                    <textarea name="editorValue"  id="editorValue">{$change.editorValue}</textarea>//form表单中的字段。
                </label>

4.最后不要忘记在js中使用工厂方法getEditor创建和引用编辑器。’editorValue’为表单中的name.

 UE.getEditor('editorValue',{initialFrameWidth:820,initialFrameHeight:400,});

5,完整的form表单为：

 <form class="form form-horizontal" name="myform" method="post">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章标题：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$change.title}" placeholder="" id="articletitle" name="title">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>简略标题：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$change.ltitle}" placeholder="" id="articletitle2" name="ltitle">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章类型</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
                <select name="status" class="select">
                    <option value="0">原创</option>
                    <option value="1">转载</option>

                </select>
                </span> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">排序值：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$change.paixuzhi}" placeholder="" id="articlesort" name="paixuzhi">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>关键词：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$change.keywords}" placeholder="" id="keywords" name="keywords">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章摘要：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="abstract" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" >{$change.abstract}</textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章作者：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$change.author}" placeholder="" id="author" name="author">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">文章来源：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$change.sources}" placeholder="" id="sources" name="sources">
            </div>
        </div>




        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章内容：</label>

            <div class="formControls col-xs-8 col-sm-9">

                <label>
                    <textarea name="editorValue"  id="editorValue">{$change.editorValue}</textarea>//form表单中的字段。
                </label>


                </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                    <button onClick="return check();"  class="btn btn-primary radius" type="button"    > 保存并提交审核</button>
                    <button onClick="return back();" type="button"  class="btn btn-primary radius"    > 返回</button>
                </div>
                </div>
                </form>

本表单采用ajax异步传输，所以如何获取ueditor编辑器的内容成为一个关键。所以采用UE内置的方法getContent()取得编辑器中的内容。注意：UE.getEditor(‘editorValue’）括号中的名称为你form表单中的name.

 var editorValue=UE.getEditor('editorValue').getContent();

6,完整js

<script type="text/javascript">
        function back(){
            dialog.confirm('确定要返回吗？',"{:url('classily/lst')}");
        }
        function check(){

             if (myform.title.value=="") {
             dialog.error('请输入标题');
             myform.title.focus();
             return false;
             }
             if (myform.ltitle.value=="") {
             dialog.error('请输入简略标题');
             myform.ltitle.focus();return false;
             }if (myform.keywords.value=="") {
             dialog.error('请输入关键词');
             myform.keywords.focus();return false;
             }
             if (myform.abstract.value=="") {
             dialog.error('请输入摘要');
             myform.abstract.focus();return false;
             }
             if (myform.author.value=="") {
             dialog.error('请输入作者');
             myform.author.focus();return false;
             }

            var editorValue=UE.getEditor('editorValue').getContent();
            if (editorValue=="") {
                dialog.error('请输入内容');
                myform.author.focus();return false;
            }

            var title = $('input[name="title"]').val();
            var ltitle = $('input[name="ltitle"]').val();
            var keywords = $('input[name="keywords"]').val();
            var abstract = $('input[name="abstract"]').val();
            var author = $('input[name="author"]').val();


            var url = "{:url('artical/save')}";
            var data = {'title':title,'ltitle':ltitle,'keywords':keywords,'abstract':abstract,'author':author,'editorValue':editorValue};
            // 执行异步请求  $.post

            /*$.ajax(
             {
             url: "{:url('artical/save')}",
             data:data,
             type: 'post',
             dataType: 'json',
             success: function (result) {
             //alert(result);
             if (result.status == 0) {
             alert(result);
             return dialog.error(result.message);
             //return dialog.error(result.message);
             }

             if (result.status == 1) {

             return dialog.success(result.message, "{:url('artical/_list')}");
             }
             },
             error: function () {
             alert('异常！！！')
             }
             });*/

            $.post(url,data,function(result){

                if(result.status == 0) {
                    return dialog.error(result.message);

                }
                if(result.status == 1) {
                    return dialog.success(result.message, "{:url('artical/_list')}");
                }
            },'JSON');
        }
        UE.getEditor('editorValue',{initialFrameWidth:820,initialFrameHeight:400,});
    </script>