Ecmall 调用自带的所见即所得编辑器

第一步: 在 xx.app.php中调用

        //调用编辑器必不可少
        $this->import_resource(array('script' => 'jquery.plugins/jquery.validate.js,change_upload.js'));
        /* 所见即所得编辑器 */
        $template_name = $this->_get_template_name();
        $style_name    = $this->_get_style_name();
        $this->assign('build_editor', $this->_build_editor(array(
            'name' => 'content',
            'content_css' => SITE_URL . "/themes/mall/{$template_name}/styles/{$style_name}/css/ecmall.css"
  ))); 

 

      

 

第二步: 对应的*.html中

{include file="header.html"}

<!--正常显示所见即所得编辑器第二步-->
<script type="text/javascript">
$(function(){
    $('#article_form').validate({
        errorPlacement: function(error, element){
            $(element).next('.field_notice').hide();
            $(element).after(error);
        },
        success       : function(label){
            label.addClass('right').text('OK!');
        },
        rules : {    
            title : {
                required : true
            },
            cate_id :{
                required : true
            },
            link    :{
                url     : true
            },
            sort_order:{
               number   : true
            }
        },
        messages : {
            title : {
                required : '{$lang.title_empty}'
            },
            cate_id : {
                required : '{$lang.cate_empty}'
            },
            link    : {
                url     : '{$lang.link_limit}'
            },
            sort_order  : {
                number   : '{$lang.number_only}'
            }
        }
    });
});

function add_uploadedfile(file_data)
{
    var newImg = '<tr id="' + file_data.file_id + '" class="tatr2"><input type="hidden" name="file_id[]" value="' + file_data.file_id + '" /><td><img width="40px" height="40px" src="' + SITE_URL + '/' + file_data.file_path + '" /></td><td>' + file_data.file_name + '</td><td><a href="javascript:insert_editor(\'' + file_data.file_name + '\', \'' + file_data.file_path + '\');">{$lang.insert_editor}</a> | <a href="javascript:drop_uploadedfile(' + file_data.file_id + ');">{$lang.drop}</a></td></tr>';
    $('#thumbnails').prepend(newImg);
}
function insert_editor(file_name, file_path){
    tinyMCE.execCommand('mceInsertContent', false, '<img src="'+ SITE_URL +'/' + file_path + '" alt="'+ file_name + '">');
}
function drop_uploadedfile(file_id)
{
    if(!window.confirm(lang.uploadedfile_drop_confirm)){
        return;
    }
    $.getJSON('index.php?app=article&act=drop_uploadedfile&file_id=' + file_id, function(result){
        if(result.done){
            $('#' + file_id).remove();
        }else{
            alert('drop_error');
        }
    });
}
</script>

<!--正常显示所见即所得编辑器第三步-->
{$build_editor}

<!--正常显示所见即所得编辑器第四步-->
<div class="info">
    <form method="post" enctype="multipart/form-data" id="article_form">
        <table class="infoTable">
            <tr>
                <th class="paddingT15">
                    <label for="article">{$lang.desc}:</label></th>
                    <td class="paddingT15 wordSpacing5">
                    <textarea id="article" name="content" style="width:650px;height200px;">{$article.content|escape}</textarea>
                </td>
            </tr>
        </table>
    </form>
</div>
{include file="footer.html"} 

  

备注:<!--正常显示所见即所得编辑器第二步-->是多余的可以不要


posted @ 2014-06-05 03:25  farcall  阅读(363)  评论(0编辑  收藏  举报