富文本添加视频上传

master
yujialong 3 months ago
parent 081c4613bf
commit a0d8246419
  1. 53
      public/static/ueditorPlus/dialogs/video/video.js
  2. 14
      public/static/ueditorPlus/ueditor.config.js
  3. 10
      src/pages/testPaper/detail/index.vue

@ -23,7 +23,7 @@
};
/* 初始化tab标签 */
function initTabs() {
function initTabs () {
var tabs = $G('tabHeads').children;
for (var i = 0; i < tabs.length; i++) {
domUtils.on(tabs[i], "click", function (e) {
@ -56,7 +56,7 @@
}
}
function initVideo() {
function initVideo () {
createAlignButton(["videoFloat", "upload_alignment"]);
addUrlChangeListener($G("videoUrl"));
addOkListener();
@ -86,7 +86,7 @@
/**
* 监听确认和取消两个按钮事件用户执行插入或者清空正在播放的视频实例操作
*/
function addOkListener() {
function addOkListener () {
dialog.onok = function () {
$G("preview").innerHTML = "";
var currentTab = findFocus("tabHeads", "tabSrc");
@ -111,7 +111,7 @@
* 依据传入的align值更新按钮信息
* @param align
*/
function updateAlignButton(align) {
function updateAlignButton (align) {
var aligns = $G("videoFloat").children;
for (var i = 0, ci; ci = aligns[i++];) {
if (ci.getAttribute("name") == align) {
@ -129,7 +129,7 @@
/**
* 将单个视频信息插入编辑器中
*/
function insertSingle() {
function insertSingle () {
var width = $G("videoWidth"),
height = $G("videoHeight"),
url = $G('videoUrl').value,
@ -148,7 +148,7 @@
* 将元素id下的所有代表视频的图片插入编辑器中
* @param id
*/
function insertSearch(id) {
function insertSearch (id) {
var imgs = domUtils.getElementsByTagName($G(id), "img"),
videoObjs = [];
for (var i = 0, img; img = imgs[i++];) {
@ -169,7 +169,7 @@
* @param id
* @param returnProperty
*/
function findFocus(id, returnProperty) {
function findFocus (id, returnProperty) {
var tabs = $G(id).children,
property;
for (var i = 0, ci; ci = tabs[i++];) {
@ -181,7 +181,7 @@
return property;
}
function convert_url(url) {
function convert_url (url) {
if (!url) return '';
url = utils.trim(url)
.replace(/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, 'player.youku.com/embed/$1')
@ -210,7 +210,7 @@
* 检测传入的所有input框中输入的长宽是否是正数
* @param nodes input框集合
*/
function checkNum(nodes) {
function checkNum (nodes) {
for (var i = 0, ci; ci = nodes[i++];) {
var value = ci.value;
if (!isNumber(value) && value) {
@ -227,7 +227,7 @@
* 数字判断
* @param value
*/
function isNumber(value) {
function isNumber (value) {
return /(0|^[1-9]\d*$)/.test(value);
}
@ -235,7 +235,7 @@
* 创建图片浮动选择按钮
* @param ids
*/
function createAlignButton(ids) {
function createAlignButton (ids) {
for (var i = 0, ci; ci = ids[i++];) {
var floatContainer = $G(ci),
nameMaps = {
@ -260,7 +260,7 @@
* 选择切换
* @param selectParentId
*/
function switchSelect(selectParentId) {
function switchSelect (selectParentId) {
var selects = $G(selectParentId).children;
for (var i = 0, ci; ci = selects[i++];) {
domUtils.on(ci, "click", function () {
@ -277,7 +277,7 @@
* 监听url改变事件
* @param url
*/
function addUrlChangeListener(url) {
function addUrlChangeListener (url) {
if (browser.ie) {
url.onpropertychange = function () {
createPreviewVideo(this.value);
@ -293,7 +293,7 @@
* 根据url生成视频预览
* @param url
*/
function createPreviewVideo(url) {
function createPreviewVideo (url) {
if (!url) return;
var conUrl = convert_url(url);
@ -319,16 +319,15 @@
/* 插入上传视频 */
function insertUpload() {
function insertUpload () {
var videoObjs = [],
uploadDir = editor.getOpt('videoUrlPrefix'),
width = $G('upload_width').value || 420,
height = $G('upload_height').value || 280,
align = findFocus("upload_alignment", "name") || 'none';
for (var key in uploadVideoList) {
var file = uploadVideoList[key];
videoObjs.push({
url: uploadDir + file.url,
url: file.url,
width: width,
height: height,
align: align
@ -345,13 +344,13 @@
}
/*初始化上传标签*/
function initUpload() {
function initUpload () {
uploadFile = new UploadFile('queueList');
}
/* 上传附件 */
function UploadFile(target) {
function UploadFile (target) {
this.$wrap = target.constructor == String ? $('#' + target) : $(target);
this.init();
}
@ -420,6 +419,7 @@
$('#filePickerReady').after($('<div>').html(lang.errorNotSupport)).hide();
return;
} else if (!editor.getOpt('videoActionName')) {
console.log("🚀 ~ actionUrl:", actionUrl, editor, editor.getOpt('videoActionName'))
$('#filePickerReady').after($('<div>').html(lang.errorLoadConfig)).hide();
return;
}
@ -448,7 +448,7 @@
setState('pedding');
// 当有文件添加进来时执行,负责view的创建
function addFile(file) {
function addFile (file) {
var $li = $('<li id="' + file.id + '">' +
'<p class="title">' + file.name + '</p>' +
'<p class="imgWrap"></p>' +
@ -543,10 +543,10 @@
});
$li.on('mouseenter', function () {
$btns.stop().animate({height: 30});
$btns.stop().animate({ height: 30 });
});
$li.on('mouseleave', function () {
$btns.stop().animate({height: 0});
$btns.stop().animate({ height: 0 });
});
$btns.on('click', 'span', function () {
@ -583,14 +583,14 @@
}
// 负责view的销毁
function removeFile(file) {
function removeFile (file) {
var $li = $('#' + file.id);
delete percentages[file.id];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
function updateTotalProgress () {
var loaded = 0,
total = 0,
spans = $progress.children(),
@ -608,7 +608,7 @@
updateStatus();
}
function setState(val, files) {
function setState (val, files) {
if (val != state) {
@ -690,7 +690,7 @@
}
function updateStatus() {
function updateStatus () {
var text = '', stats;
if (state === 'ready') {
@ -778,7 +778,6 @@
try {
var responseText = (ret._raw || ret),
json = utils.str2json(responseText);
json = editor.getOpt('serverResponsePrepare')(json);
if (json.state == 'SUCCESS') {
uploadVideoList.push({
'url': json.url,

@ -49,6 +49,7 @@
UEDITOR_CORS_URL: CORS_URL,
loadConfigFromServer: false,
// 服务器统一请求接口路径
serverUrl: "http://192.168.31.51:9000/exam/exam/upload/configAndUpload",
imageActionName: "imgUpload",
@ -59,10 +60,12 @@
".gif",
".bmp"
],
fontfamily: [],
//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
// , "insertvideo"
toolbars: [
["fullscreen", "source", "|", "bold", "italic", "underline", "forecolor", "fontfamily", "fontsize", "|", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "|", "insertimage", "inserttable", 'formula', "gapfilling", 'combox']
["fullscreen", "source", "|", "bold", "italic", "underline", "forecolor", "fontfamily", "fontsize", "|", "link", "unlink", "anchor", "|", "imagenone", "imageleft", "imagecenter", "imageright", "|", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "|", "insertcode", "insertimage", "insertvideo", "inserttable", 'formula', "gapfilling", 'combox']
]
// 公式配置
, formulaConfig: {
@ -95,12 +98,19 @@
// return true;
// }
}
// 插入图片自定义配置
, imageConfig: {
// 禁止本地上传
disableUpload: false,
}
, videoConfig: {
disableUpload: false,
selectCallback: null,
}
, videoActionName: 'imgUpload'
, videoAllowFiles: [
".mp4",
]
, zIndex: 2000
, fullscreen: false

@ -141,7 +141,7 @@
<span class="label">{{ questionTypes.find(e => e.id === item.questionType).name }}</span>
</div>
<div class="stem" :id="'stem' + ques.questionVersionId" v-html="getQuesStem(ques)"></div>
<p v-if="item.questionType !== 'fill_blank'"><el-input class="score" placeholder="请输入"
<p v-if="item.questionType !== 'fill_blank'"><el-input class="score" placeholder="请输入分值"
v-model="ques.score" /></p>
</div>
@ -627,7 +627,7 @@ export default {
let result = stem
while ((match = regex.exec(stem)) !== null) {
const newInput = `<input type="text" class="fill-input" value="${jsonText && jsonText.scores ? jsonText.scores[index] : ''}">`
const newInput = `<input type="text" class="fill-input" placeholder="请输入分值" value="${jsonText && jsonText.scores ? jsonText.scores[index] : ''}">`
result = result.replace(match[0], newInput)
index++
}
@ -1016,7 +1016,7 @@ export default {
}
/deep/.score {
width: 70px;
width: 100px;
margin: 0 10px;
.el-input__inner {
@ -1036,6 +1036,10 @@ export default {
border: 1px solid #DCDEE0;
border-radius: 2px;
&::placeholder {
color: #cfd1db;
}
&:focus {
outline: none;
}

Loading…
Cancel
Save