blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

[更新]修改并简化图文编辑ag

Browse Source
This commit is contained in:
Anyon 2018-05-24 18:10:00 +08:00
parent cd90943ac5
commit bdb56be6fe
2 changed files with 175 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
application/wechat/controller/News.php
View File

@ -14,6 +14,7 @@
namespace app\wechat\controller;
use app\wechat\controller\api\Tools;
use app\wechat\service\MediaService;
use controller\BasicAdmin;
use service\DataService;
@ -145,7 +146,10 @@ class News extends BasicAdmin
$id = $this->request->get('id', '');
if ($this->request->isGet()) {
empty($id) && $this->error('参数错误，请稍候再试！');
return $this->fetch('form', ['title' => '编辑图文', 'vo' => MediaService::getNewsById($id)]);
if ($this->request->get('output') === 'json') {
ToolsService::success('获取数据成功', MediaService::getNewsById($id));
}
return $this->fetch('form', ['title' => '编辑图文']);
}
$data = $this->request->post();
$ids = $this->_apply_news_article($data['data']);

246
application/wechat/view/news/form.html
View File

@ -1,33 +1,29 @@
{extend name='admin@public/content'}
{block name='content'}
<div id="NewsEditor">
<!--左侧图文列表 开始-->
<div class="panel panel-default news-left">
<div class="panel-heading">图文列表</div>
<div class="panel-body news-box">
{if empty($vo['articles']) eq false}
<!--{foreach $vo.articles as $key=>$value}-->
<div class="news-item transition" data-id="{$value.id}" style="background-image:url('{$value.local_url}?imageView2/1/w/338/h/190/interlace/1')">
<div ng-if="list.length > 0" ng-repeat="x in list">
<div class="news-item transition" ng-click="setItem($index)" style="{{x.style}}" ng-class="x.active?'active':''">
<a class="upload-multiple-close layui-icon hide">&#x1006;</a>
<span class="news-title">{$value.title}</span>
<span class="news-title" ng-bind="x.title"></span>
</div>
<hr/>
<!--{/foreach}-->
{else}
<div class="news-item transition active news-image" style="background-image:url('__STATIC__/plugs/uploader/theme/image.png')">
</div>
<div ng-if="list.length<1" class="news-item transition news-image">
<a class="upload-multiple-close layui-icon hide">&#x1006;</a>
<span class="news-title"></span>
</div>
<hr/>
{/if}
<a href="javascript:void(0)" class='article-add transition' data-text-tip="添加图文">
</div>
<a class='article-add transition' ng-click="addItem()" data-text-tip="添加图文">
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<!--左侧图文列表 结束-->
<!--右侧编辑区 开始-->
<div class="panel panel-default news-right">
<div class="panel-heading">图文内容编辑</div>
@ -38,8 +34,7 @@
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">文章标题</span>
<input maxlength="64" required title="文章的标题不能为空哦" placeholder="请在这里输入标题" name='title' class="layui-input">
<input type="hidden" name="id">
<input maxlength="64" ng-model="item.title" required title="文章的标题不能为空哦" placeholder="请在这里输入标题" name='title' class="layui-input">
</div>
</div>
</div>
@ -48,7 +43,7 @@
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">文章作者</span>
<input maxlength="8" required title="文章的作者不能为空哦" placeholder="请输入作者" name='author' class="layui-input">
<input maxlength="8" ng-model="item.author" required title="文章的作者不能为空哦" placeholder="请输入作者" name='author' class="layui-input">
</div>
</div>
</div>
@ -60,7 +55,7 @@
<div class="row nowrap">
<div class="col-xs-3" style="width:160px">
<div class="upload-image-box transition">
<input value="__STATIC__/plugs/uploader/theme/image.png" type="hidden" name="local_url">
<input ng-model="item.local_url" value="__STATIC__/plugs/uploader/theme/image.png" type="hidden" name="local_url">
</div>
</div>
<div class="col-xs-6 padding-top-10">
@ -68,7 +63,7 @@
<button type="button" data-title="选择图片" data-iframe='{:url("image")}?field=local_url' class="layui-btn layui-btn-sm layui-btn-primary">选择图片</button>
<br>
<label class="think-checkbox notselect margin-top-15">
<input data-auto-none type="checkbox" value="1" name="show_cover_pic"> 在正文中显示此图片
<input ng-model="item.show_cover_pic" ng-checked="!!item.show_cover_pic" data-auto-none type="checkbox" value="1" name="show_cover_pic"> 在正文中显示此图片
</label>
</div>
</div>
@ -78,25 +73,25 @@
</div>
<div class="form-group">
<div class="col-md-12"><textarea name='content'></textarea></div>
<div class="col-md-12"><textarea ng-model="item.content" name='content'></textarea></div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="color-desc">摘要选填，如果不填写会默认抓取正文前54个字</label>
<textarea name="digest" class="layui-textarea" style="height:80px;resize:none"></textarea>
<textarea ng-model="item.digest" name="digest" class="layui-textarea" style="height:80px;line-height:18px;resize:none"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="color-desc">原文链接<b>选填</b>，填写之后在图文左下方会出现此链接</label>
<input maxlength="200" name='content_source_url' class="layui-input">
<input ng-model="item.content_source_url" maxlength="200" name='content_source_url' class="layui-input">
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-4 col-md-9">
<button data-submit type="button" class="layui-btn">保存图文</button>
<button ng-click="submit()" type="button" class="layui-btn">保存图文</button>
</div>
</div>
</div>
@ -104,155 +99,116 @@
</div>
</div>
<!--右侧编辑区 结束-->
</div>
{/block}
{block name='script'}
<textarea class="hide" id="newsdata">{$vo.articles|default=[]|json_encode=256|raw}</textarea>
<script>
require(['ckeditor'], function () {
require(['angular', 'ckeditor'], function () {
var editDdata = JSON.parse(document.getElementById('newsdata').innerHTML);
var $form = $('form[name="news"]');
var editor = window.createEditor('[name="content"]');
for (var i in editDdata) {
$('.news-item').eq(i).data('item', editDdata[i]);
}
var app = angular.module("NewsEditor", []).run(callback);
angular.bootstrap(document.getElementById(app.name), [app.name]);
/*! 实例富文本编辑器 */
var editor, $item, $body = $('body'), $form = $('form[name="news"]');
function callback($rootScope) {
$rootScope.list = [];
$rootScope.item = {};
/*! 默认编辑第一篇图文 */
editor = window.createEditor('[name="content"]');
$form.vali();
/*! 上传图片 */
$body.on('change', '.upload-image-box input', function () {
$('.news-item.active').css('background-image', 'url(' + this.value + ')');
$(this).parent('.upload-image-box').css('background-image', 'url(' + this.value + ')');
$.form.load('{:request()->url()}', {output: 'json'}, 'get', function (ret) {
return $rootScope.$apply(function () {
apply((ret.data || {articles: []}).articles || []);
}), false;
});
/*! 数据提交 */
$form.find('button[data-submit]').on('click', function () {
var data = [];
$form.submit();
if (!syncEditor($('.news-item.active'))) {
editor.setData('文章内容不能留空，请输入内容！');
return false;
}
$('.news-item').map(function () {
var item = $(this).data('item');
item.content = item.content || '文章内容不能留空，请输入内容！';
data.push(item);
function apply(data) {
if (data.length < 1) {
data.push({
title: '新建图文',
local_url: '__STATIC__/plugs/uploader/theme/image.png',
style: "background-image:url('__STATIC__/plugs/uploader/theme/image.png?imageView2/1/w/338/h/190/interlace/1')"
});
$.form.load('{:request()->url()}', {data: data}, "post");
});
/*! 输入标题显示 */
$form.find('[name="title"]').on('keyup', function () {
if ($item) {
$item.find('.news-title').html(this.value).show();
}
});
/*! 同步编辑器 */
function syncEditor($pItem) {
// 处理上一个编辑器
if ($form && $pItem && $pItem.size() > 0) {
var data = {};
data.id = $form.find('[name=id]').val();
data.title = $form.find('[name=title]').val();
data.local_url = $form.find('[name=local_url]').val();
data.content = editor.getData() || '';
data.author = $form.find('[name=author]').val();
data.digest = $form.find('[name=digest]').val();
data.show_cover_pic = $form.find('[name="show_cover_pic"]').get(0).checked ? 1 : 0;
data.content_source_url = $form.find('[name="content_source_url"]').val();
$form.find('[name=local_url]').trigger('change');
$pItem.data('item', data), $form.submit();
if ($form.find('input.validate-error').size() > 0 || data.content.length < 1) {
((data.content || '').length < 1) && editor.setData('文章内容不能留空，请输入内容！');
$pItem.addClass('active').siblings().removeClass('active');
return false;
}
}
return true;
}
/*! 显示编辑器 */
function showEditor() {
// 读取对象数据
$item = $('.news-item.active');
this.get = function () {
var data = $item.data('item') || {};
data.id = data.id || 0;
data.title = data.title || '';
data.local_url = data.local_url || '__STATIC__/plugs/uploader/theme/image.png';
data.content = data.content || '';
data.author = data.author || '';
data.digest = data.digest || '';
data.content_source_url = data.content_source_url || '';
data.show_cover_pic = data.show_cover_pic || 0;
return data;
};
// 重置表单
$form.get(0).reset();
// 获取当前数据
var data = this.get();
for (var i in data) {
if (i !== 'content' && i !== 'show_cover_pic') {
$form.find('[name="' + i + '"]').val(data[i]).trigger('change');
data[i].style = "background-image:url('" + data[i].local_url + "?imageView2/1/w/338/h/190/interlace/1')";
}
}
if (parseInt(data.show_cover_pic) === 1) {
$form.find('[name="show_cover_pic"]').get(0).checked = true;
$rootScope.list = data;
$rootScope.item = $rootScope.list[0];
$rootScope.setItemValue('active', true);
setTimeout(function () {
editor.setData($rootScope.item.content);
}, 100);
$form.vali();
}
editor.setData(htmldecode(data.content));
function htmldecode(string) {
var div = document.createElement('div');
div.innerHTML = string;
return div.innerText || div.textContent;
$rootScope.setItem = function (index) {
$form.vali();
if ($form.find('.validate-error').size() > 0) {
return 0;
}
if (editor.getData().length < 1) {
return $.msg.tips('请输入文章内容');
}
for (var i in $rootScope.list) {
if (parseInt(i) !== parseInt(index)) {
$rootScope.list[i].active = false;
continue;
}
$rootScope.item.content = editor.getData();
$rootScope.item = $rootScope.list[i];
editor.setData($rootScope.item.content);
$rootScope.setItemValue('active', true);
}
};
/*! 添加新图文 */
$body.off('click', '.news-box .article-add').on('click', '.news-box .article-add', function () {
var $html = $('<div class="news-item transition" style="background-image:url(__STATIC__/plugs/uploader/theme/image.png)"><a class="upload-multiple-close layui-icon hide">&#x1006;</a><span class="news-title"></span></div><hr />');
$html.insertBefore(this).trigger('click');
$('.news-item').size() >= 7 && $(this).hide();
$rootScope.setItemValue = function (name, value) {
$rootScope.item[name] = value;
var localUrl = $rootScope.item.local_url;
$('[name="local_url"]').parent().css('background-image', 'url(' + localUrl + ')');
$rootScope.item.style = "background-image:url('" + localUrl + "?imageView2/1/w/338/h/190/interlace/1')";
};
$rootScope.addItem = function () {
if ($rootScope.list.length > 7) {
return $.msg.tips('最多允许增加7篇文章哦！');
}
$rootScope.list.push({
title: '新建图文',
local_url: '__STATIC__/plugs/uploader/theme/image.png',
style: "background-image:url('__STATIC__/plugs/uploader/theme/image.png?imageView2/1/w/338/h/190/interlace/1')"
});
};
/*! 列表选择 */
$body.off('click', '.news-item').on('click', '.news-item', function () {
if (syncEditor($('.news-item.active'))) {
$(this).addClass('active').siblings().removeClass('active');
showEditor($item);
$rootScope.submit = function () {
$form.vali();
if ($form.find('.validate-error').size() > 0) {
return $.msg.tips('表单验证不成功，请输入需要的内容！');
}
$rootScope.item.content = editor.getData();
var data = [];
for (var i in $rootScope.list) {
data.push({
id: $rootScope.list[i].id,
title: $rootScope.list[i].title,
author: $rootScope.list[i].author,
digest: $rootScope.list[i].digest,
content: $rootScope.list[i].content,
local_url: $rootScope.list[i].local_url,
show_cover_pic: $rootScope.list[i].show_cover_pic ? 1 : 0,
content_source_url: $rootScope.list[i].content_source_url,
})
}
$.form.load('{:request()->url()}', {data: data}, "post");
};
$('body').off('change', '[name="local_url"]').on('change', '[name="local_url"]', function () {
var value = this.value;
$rootScope.$apply(function () {
$rootScope.setItemValue('local_url', value);
});
/*! 隐藏删除按钮 */
$body.off('mouseleave').on('mouseleave', '.news-item', function () {
$(this).find('.upload-multiple-close').addClass('hide');
});
/*! 显示删除按钮 */
$body.off('mouseenter', '.news-item').on('mouseenter', '.news-item', function () {
$('.upload-multiple-close').addClass('hide');
$(this).find('.upload-multiple-close').removeClass('hide');
});
/*! 删除操作图文 */
$body.off('click', '.upload-multiple-close').on('click', '.upload-multiple-close', function () {
var $box = $(this).parents('.news-item');
$box.add($box.next('hr')).remove();
$('.news-item').size() < 7 && $('.news-box .article-add').show();
});
/*! 默认显示第一个 */
$('.news-box .news-item:first').trigger('click');
}
});
</script>
{/block}