hot-form
Version:
A project developed based on ant-design-vue and vant whitch do some things on create/render/modify and etc. for forms. Also can custom some component on the form items if you want. 一个基于antdv/vant开发的创建表单组件，包含表单渲染、表单编辑页面、以及植入自定义附加内容的组件
113 lines (108 loc) • 5.12 kB
JavaScript
const mobileConfig = {
toolbar: 'undo redo bold italic underline forecolor fontsizeselect styleselect table image link media fullscreen',
toolbar_mode: 'scrolling',
};
const basicConfig = {
mobile: mobileConfig,
suffix: '.min',
relative_urls: false, // 禁止自动转为相对路径（URL 将会自动转换为基于 document_base_url 的绝对路径）
language: 'zh_CN',
style_formats_merge: true, // 允许 style_formats 覆盖文本样式
images_reuse_filename: true, // 使用图片的实际文件名
contextmenu: false, // 禁用富文本的右键菜单
paste_retain_style_properties: 'all', // 粘贴时保留所有样式
paste_word_valid_elements: '*[*]', // 保留 word 样式
paste_data_images: false, // TODO: 粘贴的同时把内容里的图片自动上传
paste_webkit_styles: 'all', // 保留 webkit 样式
// branding: false, // 禁止右下角标识
forced_root_block: false, // 强制根节点块元素
remove_redundant_brs: false,
valid_elements: "br", // 有效元素
verify_html: false,
convert_urls: false, // 插入路径
theme_advanced_link_targets: '_self', // 超链接默认
image_title: true,
image_advtab: true, // 为图片添加高级选项设置
automatic_uploads: true,
// nonbreaking_force_tab: true,
autosave_interval: '20s', // 自动保存时长
autosave_retention: '60m', // 本地存储时间上限
pagebreak_split_block: true, // 分页符
file_picker_types: 'file image media', // 文件上传的类型（将开启浏览本地文件的选项）
font_formats: `
宋体=SimSun;
黑体=SimHei;
仿宋=FangSong;
楷体=KaiTi;
微软雅黑=Microsoft YaHei;
Arial=arial,helvetica,sans-serif;
Comic Sans MS=comic sans ms,sans-serif;
Courier New=courier new,courier;
Georgia=georgia,palatino;
Helvetica=helvetica;
Symbol=symbol;
Tahoma=tahoma,arial,helvetica,sans-serif;
Times New Roman=times new roman,times;
Wingdings=wingdings,zapf dingbats
`,
fontsize_formats:
'初号=44pt 小初=36pt 一号=26pt 小一=24pt 二号=22pt 小二=18pt 三号=16pt 小三=15pt 四号=14pt 小四=12pt 五号=10.5pt 小五=9pt',
formats: {
p: {
selector: 'p, span, a',
styles: { textIndent: '2em', fontSize: '14pt', lineHeight: '1.5', margin: '0' },
},
},
// 粘贴事件（处理图片防盗链问题）
paste_postprocess: (pl, o) => {
// 图片标签
// let imgs = o.node.getElementsByTagName('img');
let allElements = o.node.getElementsByTagName('*');
for (let i = 0; i < allElements.length; i++) {
let img = allElements[i].nodeName.toLowerCase() === 'img';
// 获取富文本框所有段落
let section = allElements[i].nodeName.toLowerCase() === 'section' || 'p';
// `style` 上的 `background-image` 属性
let mainlyBackImg = allElements[i].style.backgroundImage;
// console.log(mainlyBackImg);
// `CSS` 上的 `background-image` 属性
// let cssBackImg = allElements[i].getAttribute('background-image');
// console.log(mainlyBackImg.split('://'));
if (section && allElements[i].style.textIndent) allElements[i].style.textIndent = '0';
// 处理标签图片防盗链
if (img && allElements[i].getAttribute('src').split('://').length > 1)
allElements[i].setAttribute('src', `https://images.weserv.nl/?url=${allElements[i].getAttribute('src')}`);
// TODO: 处理背景图片防盗链(gif图片无法完成)
if (mainlyBackImg && mainlyBackImg.split('://').length > 1) {
let imgArr = mainlyBackImg.split('://');
imgArr[0] = imgArr[0].replace(/url\(("|')/, match => `${match}https://images.weserv.nl/?url=`);
allElements[i].style.backgroundImage = imgArr.join('://');
}
// console.log(o.node);
}
/* console.log(o.node.getElementsByTagName('*')[0].getAttribute('background-image'));
for (let i = 0; i < imgs.length; i++) {
console.log(imgs[i]);
if (imgs[i].getAttribute('src').split('://').length > 1) imgs[i].setAttribute('src', `https://images.weserv.nl/?url=${imgs[i].getAttribute('src')}`);
} */
},
};
export const classicConfig = Object.freeze({
...basicConfig,
plugins:
'paste lists advlist nonbreaking table autolink link image media imagetools charmap print preview anchor searchreplace code pagebreak insertdatetime wordcount fullscreen help',
menubar: 'file edit insert view format table tools help',
toolbar:
'undo redo | fontselect fontsizeselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | numlist bullist | table image link unlink media fullscreen',
// Note： v5.2.x `toolbar_mode` default is 'wrap'
toolbar_mode: 'sliding',
min_height: 480,
help_tabs: ['shortcuts'],
});
export const inlineConfig = Object.freeze({
...basicConfig,
inline: true,
plugins: ['quickbars'],
toolbar: false,
menubar: false,
});