Skip to content

R
rs-cloud-platform-ui
Commit e71f47be authored by obt's avatar obt
Browse files
Options

kindeditor更新

parent 8a6dae04
Show whitespace changes
Inline Side-by-side
Showing with 659 additions and 308 deletions
src/components/CustomForm/index.vue
View file @ e71f47be
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
<div v-else-if="item.type && item.type == 'kindEditor'"> <div v-else-if="item.type && item.type == 'kindEditor'">
<kind-editor ref="kindEditor" :html="html" @input="getContent"></kind-editor> <kind-editor id="editor_id" :content.sync="content" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
</div> </div>
<!-- 输入框 --> <!-- 输入框 -->
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
<script> <script>
import MyUpload from "@/components/Upload/singleImageX"//上传组件 import MyUpload from "@/components/Upload/singleImageX"//上传组件
import CustomInput from "@/components/CustomInput"//自定义组件 import CustomInput from "@/components/CustomInput"//自定义组件
import KindEditor from "@/components/Kindeditor"//富文本 import KindEditor from "@/components/Kindeditor";
export default { export default {
name: "CustomForm", name: "CustomForm",
...@@ -59,8 +59,6 @@ export default { ...@@ -59,8 +59,6 @@ export default {
}, },
data() { data() {
return { return {
html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
// html: '#',
content: "" content: ""
} }
}, },
...@@ -71,8 +69,11 @@ export default { ...@@ -71,8 +69,11 @@ export default {
} }
}, },
methods: { methods: {
getContent(val) { onContentChange (val) {
console.log('富文本', val) console.log(val)
},
afterChange () {
}, },
resetParams(val) { resetParams(val) {
this.getForm.formVal.jumpType = val; this.getForm.formVal.jumpType = val;
......
src/components/Kindeditor/index.vue
View file @ e71f47be
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2020-12-03 11:23:35 * @Date: 2020-12-04 13:31:26
* @LastEditTime: 2020-12-03 14:15:19 * @LastEditTime: 2020-12-04 13:47:41
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \rs-cloud-platform-ui\src\components\Kindeditor\index.vue * @FilePath: \rs-cloud-platform-ui\src\components\Kindeditor\kindeditor.vue
--> -->
<template> <template>
<div class="margin-top-20"> <div class="kindeditor">
<textarea :id="id" name="content" v-model="outContent"></textarea> <textarea :id="id" name="content" style="visibility: hidden;height:0;" v-model="outContent"></textarea>
<input @change="selectedFile" style="visibility: hidden;height:0;" type="file" name id="inputFile"/>
</div> </div>
</template> </template>
<script>
import axios from 'axios';
import "kindeditor/themes/default/default.css";
import "kindeditor/kindeditor-all-min.js";
import "kindeditor/lang/zh-CN.js";
// 以下四个配置文件见下文 <script>
import items from "./config/items"; import 'kindeditor/kindeditor-all.js'
import htmlTags from "./config/htmlTags"; import 'kindeditor/lang/zh-CN.js'
import fontSizeTable from "./config/fontSizeTable"; import 'kindeditor/themes/default/default.css'
import otherConfig from "./config/otherConfig";
export default { export default {
name: "kindeditor-component", name: 'kindeditor',
props: { data () {
// 编辑器内容 url return {
html: { editor: null,
type: String, outContent: this.content
default: "" }
}, },
// 编辑器内容 props: {
content: { content: {
type: String, type: String,
default: "" default: ''
}, },
// 编辑器id
id: { id: {
type: String, type: String,
// required: true, required: true
default: "kindeditor-id"
}, },
// 宽 // 宽
width: { width: {
...@@ -52,258 +42,332 @@ export default { ...@@ -52,258 +42,332 @@ export default {
// 高 // 高
height: { height: {
type: String, type: String,
default: "400" default: "500"
}, },
// 最小宽
minWidth: { minWidth: {
type: Number, type: Number
default: 650
}, },
// 最小高
minHeight: { minHeight: {
type: Number, type: Number
default: 400
}, },
// toolbar 工具栏配置
items: { items: {
type: Array, type: Array,
default: function() { default: function () {
return [...items]; return [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
]
} }
}, },
// 标签配置 noDisableItems: {
type: Array,
default: function () {
return ['source', 'fullscreen']
}
},
filterMode: {
type: Boolean,
default: true
},
htmlTags: { htmlTags: {
type: Object, type: Object,
default: function() { default: function () {
return { ...htmlTags }; return {
font: ['color', 'size', 'face', '.background-color'],
span: ['style'],
div: ['class', 'align', 'style'],
table: ['class', 'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'style'],
'td,th': ['class', 'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor', 'style'],
a: ['class', 'href', 'target', 'name', 'style'],
embed: ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality',
'style', 'align', 'allowscriptaccess', '/'],
img: ['src', 'width', 'height', 'border', 'alt', 'title', 'align', 'style', '/'],
hr: ['class', '/'],
br: ['/'],
'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6': ['align', 'style'],
'tbody,tr,strong,b,sub,sup,em,i,u,strike': []
} }
},
//字号配置
fontSizeTable: {
type: Array,
default: function() {
return [...fontSizeTable];
} }
}, },
// 语言配置 wellFormatMode: {
type: Boolean,
default: true
},
resizeType: {
type: Number,
default: 0
},
themeType: {
type: String,
default: 'default'
},
langType: { langType: {
type: String, type: String,
default: "zh-CN" default: 'zh-CN'
}, },
// 主题配置 designMode: {
themeType: { type: Boolean,
default: true
},
fullscreenMode: {
type: Boolean,
default: false
},
basePath: {
type: String
},
themesPath: {
type: String
},
pluginsPath: {
type: String,
default: ''
},
langPath: {
type: String
},
minChangeSize: {
type: Number,
default: 5
},
loadStyleMode: {
type: Boolean,
default: true
},
urlType: {
type: String,
default: ''
},
newlineTag: {
type: String,
default: 'p'
},
pasteType: {
type: Number,
default: 2
},
dialogAlignType: {
type: String,
default: 'page'
},
shadowMode: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 811213
},
useContextmenu: {
type: Boolean,
default: true
},
syncType: {
type: String, type: String,
default: "default" default: 'form'
},
indentChar: {
type: String,
default: '\t'
},
cssPath: {
type: [ String, Array ]
},
cssData: {
type: String
}, },
// body 的样式
bodyClass: { bodyClass: {
type: String, type: String,
default: "ke-content" default: 'ke-content'
}, },
// 其他配置项 colorTable: {
...otherConfig type: Array
}, },
data() { afterCreate: {
return { type: Function
editor: null,
outContent: this.content
};
}, },
afterChange: {
watch: { type: Function
content(val) { },
this.editor && val !== this.outContent && this.editor.html(val); afterTab: {
}, type: Function
// 分发编辑器内容改变事件 },
outContent(val) { afterFocus: {
this.$emit("update:content", val); type: Function
this.$emit("on-content-change", val); },
this.$emit("input", val); afterBlur: {
}, type: Function
// 初始化编辑器内容 },
html(val) { afterUpload: {
if ( type: Function
this.html && },
(this.html.startsWith("https://") || this.html.startsWith("http://")) uploadJson: {
) { type: String
this.loadUrl(val); },
} else { fileManagerJson: {
this.outContent = ""; type: Function
this.outContent ? this.editor.appendHtml(this.outContent) : ""; },
} allowPreviewEmoticons: {
type: Boolean,
default: true
},
allowImageUpload: {
type: Boolean,
default: true
},
allowFlashUpload: {
type: Boolean,
default: true
},
allowMediaUpload: {
type: Boolean,
default: true
},
allowFileUpload: {
type: Boolean,
default: true
},
allowFileManager: {
type: Boolean,
default: false
},
fontSizeTable: {
type: Array,
default: function () {
return ['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
} }
}, },
created() { imageTabIndex: {
if ( type: Number,
this.html && default: 0
(this.html.startsWith("https://") || this.html.startsWith("http://")) },
) { formatUploadUrl: {
this.loadUrl(this.html); type: Boolean,
} else { default: true
this.outContent = ""; },
setTimeout(() => { fullscreenShortcut: {
this.outContent ? this.editor.appendHtml(this.outContent) : ""; type: Boolean,
}, 1000); default: false
},
extraFileUploadParams: {
type: Array,
default: function () {
return []
} }
}, },
mounted() { filePostName: {
// 初始访问时创建 type: String,
this.initEditor(); default: 'imgFile'
// 添加焦点 },
// this.editor.focus(); fillDescAfterUploadImage: {
// 添加点击图片回调函数 type: Boolean,
this.editor.clickToolbar("image", () => { default: false
// 禁用自带的图片弹窗 },
this.editor.hideDialog(); afterSelectFile: {
// 打开文件 type: Function
this.handleOpenFile(); },
}); pagebreakHtml: {
}, type: String,
activated() { default: '<hr style=”page-break-after: always;” class=”ke-pagebreak” />'
// keep-alive 进入时创建 },
this.initEditor(); allowImageRemote: {
}, type: Boolean,
deactivated() { default: true
// keep-alive 离开时移除 },
this.removeEditor(); autoHeightMode: {
}, type: Boolean,
beforeDestroy() { default: false
// 实例销毁之前移除 },
this.removeEditor(); fixToolBar: {
}, type: Boolean,
methods: { default: false
// 打开文件 },
handleOpenFile() { tabIndex: {
let input = document.getElementById("inputFile"); type: Number
// 解决同一个文件不能监听的问题
input.addEventListener(
"click",
function() {
this.value = "";
},
false
);
// 点击input
input.click();
},
// 选择好文件
async selectedFile($event) {
const file = $event.target.files[0];
// 把图片上传到后端服务器 拿到url uploadImage 是自己后端上传图片的接口
// 调用appendHtml方法把图片追加到富文本
// const url= await uploadImage (file)
// this.editor.appendHtml(
// `<img style="max-width:100%;" src="https://${data.Location}">`
// );
},
// 编辑器内容上传到cos，调用返回url
async content2Url() {
// 把html片段上传到后端服务器 拿到url uploadHtml 是自己后端上传的接口
// try {
// const res = await uploadHtml(this.outContent)
// return res
// } catch (error) {
// this.$message({
// message: error.data.message,
// type: 'error'
// })
// }
},
// 加载html填充编辑器内容
loadUrl(url) {
if (url && url.length > 0) {
axios.get(url)
.then(response => {
// 处理HTML显示
this.outContent = response.data;
this.editor.appendHtml(this.outContent);
this.$emit("subLoadUrlToHtml", response.data);
})
.catch(() => {
this.outContent = "服务器数据加载失败，请重试!";
this.editor.appendHtml(this.outContent);
});
} }
}, },
// 移除编辑器实例 watch: {
removeEditor() { content (val) {
window.KindEditor.remove(`#${this.id}`); this.editor && val !== this.outContent && this.editor.html(val)
}, },
// 初始化编辑器 outContent (val) {
initEditor() { this.$emit('update:content', val)
this.removeEditor(); this.$emit('on-content-change', val)
this.editor = window.KindEditor.create("#" + this.id, {
width: this.width,
height: this.height,
minWidth: this.minWidth,
minHeight: this.minHeight,
items: this.items,
noDisableItems: this.noDisableItems,
filterMode: this.filterMode,
htmlTags: this.htmlTags,
wellFormatMode: this.wellFormatMode,
resizeType: this.resizeType,
themeType: this.themeType,
langType: this.langType,
designMode: this.designMode,
fullscreenMode: this.fullscreenMode,
basePath: this.basePath,
themesPath: this.themesPath,
pluginsPath: this.pluginsPath,
langPath: this.langPath,
minChangeSize: this.minChangeSize,
loadStyleMode: this.loadStyleMode,
urlType: this.urlType,
newlineTag: this.newlineTag,
pasteType: this.pasteType,
dialogAlignType: this.dialogAlignType,
shadowMode: this.shadowMode,
zIndex: this.zIndex,
useContextmenu: this.useContextmenu,
syncType: this.syncType,
indentChar: this.indentChar,
cssPath: this.cssPath,
cssData: this.cssData,
bodyClass: this.bodyClass,
colorTable: this.colorTable,
afterCreate: this.afterCreate,
// 编辑器内容改变回调
afterChange: () => {
this.editor ? (this.outContent = this.editor.html()) : "";
},
afterTab: this.afterTab,
afterFocus: this.afterFocus,
afterBlur: this.afterBlur,
afterUpload: this.afterUpload,
uploadJson: this.uploadJson,
fileManagerJson: this.fileManagerJson,
allowPreviewEmoticons: this.allowPreviewEmoticons,
allowImageUpload: this.allowImageUpload,
allowFlashUpload: this.allowFlashUpload,
allowMediaUpload: this.allowMediaUpload,
allowFileUpload: this.allowFileUpload,
allowFileManager: this.allowFileManager,
fontSizeTable: this.fontSizeTable,
imageTabIndex: this.imageTabIndex,
formatUploadUrl: this.formatUploadUrl,
fullscreenShortcut: this.fullscreenShortcut,
extraFileUploadParams: this.extraFileUploadParams,
filePostName: this.filePostName,
fillDescAfterUploadImage: this.fillDescAfterUploadImage,
afterSelectFile: this.afterSelectFile,
pagebreakHtml: this.pagebreakHtml,
allowImageRemote: this.allowImageRemote,
autoHeightMode: this.autoHeightMode,
fixToolBar: this.fixToolBar,
tabIndex: this.tabIndex
});
} }
},
mounted () {
var _this = this
_this.editor = window.KindEditor.create('#' + this.id, {
width: _this.width,
height: _this.height,
minWidth: _this.minWidth,
minHeight: _this.minHeight,
items: _this.items,
noDisableItems: _this.noDisableItems,
filterMode: _this.filterMode,
htmlTags: _this.htmlTags,
wellFormatMode: _this.wellFormatMode,
resizeType: _this.resizeType,
themeType: _this.themeType,
langType: _this.langType,
designMode: _this.designMode,
fullscreenMode: _this.fullscreenMode,
basePath: _this.basePath,
themesPath: _this.cssPath,
pluginsPath: _this.pluginsPath,
langPath: _this.langPath,
minChangeSize: _this.minChangeSize,
loadStyleMode: _this.loadStyleMode,
urlType: _this.urlType,
newlineTag: _this.newlineTag,
pasteType: _this.pasteType,
dialogAlignType: _this.dialogAlignType,
shadowMode: _this.shadowMode,
zIndex: _this.zIndex,
useContextmenu: _this.useContextmenu,
syncType: _this.syncType,
indentChar: _this.indentChar,
cssPath: _this.cssPath,
cssData: _this.cssData,
bodyClass: _this.bodyClass,
colorTable: _this.colorTable,
afterCreate: _this.afterCreate,
afterChange: function () {
_this.afterChange
_this.outContent = this.html()
},
afterTab: _this.afterTab,
afterFocus: _this.afterFocus,
afterBlur: _this.afterBlur,
afterUpload: _this.afterUpload,
uploadJson: _this.uploadJson,
fileManagerJson: _this.fileManagerJson,
allowPreviewEmoticons: _this.allowPreviewEmoticons,
allowImageUpload: _this.allowImageUpload,
allowFlashUpload: _this.allowFlashUpload,
allowMediaUpload: _this.allowMediaUpload,
allowFileUpload: _this.allowFileUpload,
allowFileManager: _this.allowFileManager,
fontSizeTable: _this.fontSizeTable,
imageTabIndex: _this.imageTabIndex,
formatUploadUrl: _this.formatUploadUrl,
fullscreenShortcut: _this.fullscreenShortcut,
extraFileUploadParams: _this.extraFileUploadParams,
filePostName: _this.filePostName,
fillDescAfterUploadImage: _this.fillDescAfterUploadImage,
afterSelectFile: _this.afterSelectFile,
pagebreakHtml: _this.pagebreakHtml,
allowImageRemote: _this.allowImageRemote,
autoHeightMode: _this.autoHeightMode,
fixToolBar: _this.fixToolBar,
tabIndex: _this.tabIndex
})
} }
}; }
</script> </script>
\ No newline at end of file
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
\ No newline at end of file
src/components/Kindeditor/indexdemo.vue 0 → 100644
View file @ e71f47be
<!--
* @Author: your name
* @Date: 2020-12-03 11:23:35
* @LastEditTime: 2020-12-03 14:15:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \rs-cloud-platform-ui\src\components\Kindeditor\index.vue
-->
<template>
<div class="margin-top-20">
<textarea :id="id" name="content" v-model="outContent"></textarea>
<input @change="selectedFile" style="visibility: hidden;height:0;" type="file" name id="inputFile"/>
</div>
</template>
<script>
import axios from 'axios';
import "kindeditor/themes/default/default.css";
import "kindeditor/kindeditor-all-min.js";
import "kindeditor/lang/zh-CN.js";
// 以下四个配置文件见下文
import items from "./config/items";
import htmlTags from "./config/htmlTags";
import fontSizeTable from "./config/fontSizeTable";
import otherConfig from "./config/otherConfig";
export default {
name: "kindeditor-component",
props: {
// 编辑器内容 url
html: {
type: String,
default: ""
},
// 编辑器内容
content: {
type: String,
default: ""
},
// 编辑器id
id: {
type: String,
// required: true,
default: "kindeditor-id"
},
// 宽
width: {
type: String,
default: `100%`
},
// 高
height: {
type: String,
default: "400"
},
// 最小宽
minWidth: {
type: Number,
default: 650
},
// 最小高
minHeight: {
type: Number,
default: 400
},
// toolbar 工具栏配置
items: {
type: Array,
default: function() {
return [...items];
}
},
// 标签配置
htmlTags: {
type: Object,
default: function() {
return { ...htmlTags };
}
},
//字号配置
fontSizeTable: {
type: Array,
default: function() {
return [...fontSizeTable];
}
},
// 语言配置
langType: {
type: String,
default: "zh-CN"
},
// 主题配置
themeType: {
type: String,
default: "default"
},
// body 的样式
bodyClass: {
type: String,
default: "ke-content"
},
// 其他配置项
...otherConfig
},
data() {
return {
editor: null,
outContent: this.content
};
},
watch: {
content(val) {
this.editor && val !== this.outContent && this.editor.html(val);
},
// 分发编辑器内容改变事件
outContent(val) {
this.$emit("update:content", val);
this.$emit("on-content-change", val);
this.$emit("input", val);
},
// 初始化编辑器内容
html(val) {
if (
this.html &&
(this.html.startsWith("https://") || this.html.startsWith("http://"))
) {
this.loadUrl(val);
} else {
this.outContent = "";
this.outContent ? this.editor.appendHtml(this.outContent) : "";
}
}
},
created() {
if (
this.html &&
(this.html.startsWith("https://") || this.html.startsWith("http://"))
) {
this.loadUrl(this.html);
} else {
this.outContent = "";
setTimeout(() => {
this.outContent ? this.editor.appendHtml(this.outContent) : "";
}, 1000);
}
},
mounted() {
// 初始访问时创建
this.initEditor();
// 添加焦点
// this.editor.focus();
// 添加点击图片回调函数
this.editor.clickToolbar("image", () => {
// 禁用自带的图片弹窗
this.editor.hideDialog();
// 打开文件
this.handleOpenFile();
});
},
activated() {
// keep-alive 进入时创建
this.initEditor();
},
deactivated() {
// keep-alive 离开时移除
this.removeEditor();
},
beforeDestroy() {
// 实例销毁之前移除
this.removeEditor();
},
methods: {
// 打开文件
handleOpenFile() {
let input = document.getElementById("inputFile");
// 解决同一个文件不能监听的问题
input.addEventListener(
"click",
function() {
this.value = "";
},
false
);
// 点击input
input.click();
},
// 选择好文件
async selectedFile($event) {
const file = $event.target.files[0];
// 把图片上传到后端服务器 拿到url uploadImage 是自己后端上传图片的接口
// 调用appendHtml方法把图片追加到富文本
// const url= await uploadImage (file)
// this.editor.appendHtml(
// `<img style="max-width:100%;" src="https://${data.Location}">`
// );
},
// 编辑器内容上传到cos，调用返回url
async content2Url() {
// 把html片段上传到后端服务器 拿到url uploadHtml 是自己后端上传的接口
// try {
// const res = await uploadHtml(this.outContent)
// return res
// } catch (error) {
// this.$message({
// message: error.data.message,
// type: 'error'
// })
// }
},
// 加载html填充编辑器内容
loadUrl(url) {
if (url && url.length > 0) {
axios.get(url)
.then(response => {
// 处理HTML显示
this.outContent = response.data;
this.editor.appendHtml(this.outContent);
this.$emit("subLoadUrlToHtml", response.data);
})
.catch(() => {
this.outContent = "服务器数据加载失败，请重试!";
this.editor.appendHtml(this.outContent);
});
}
},
// 移除编辑器实例
removeEditor() {
window.KindEditor.remove(`#${this.id}`);
},
// 初始化编辑器
initEditor() {
this.removeEditor();
this.editor = window.KindEditor.create("#" + this.id, {
width: this.width,
height: this.height,
minWidth: this.minWidth,
minHeight: this.minHeight,
items: this.items,
noDisableItems: this.noDisableItems,
filterMode: this.filterMode,
htmlTags: this.htmlTags,
wellFormatMode: this.wellFormatMode,
resizeType: this.resizeType,
themeType: this.themeType,
langType: this.langType,
designMode: this.designMode,
fullscreenMode: this.fullscreenMode,
basePath: this.basePath,
themesPath: this.themesPath,
pluginsPath: this.pluginsPath,
langPath: this.langPath,
minChangeSize: this.minChangeSize,
loadStyleMode: this.loadStyleMode,
urlType: this.urlType,
newlineTag: this.newlineTag,
pasteType: this.pasteType,
dialogAlignType: this.dialogAlignType,
shadowMode: this.shadowMode,
zIndex: this.zIndex,
useContextmenu: this.useContextmenu,
syncType: this.syncType,
indentChar: this.indentChar,
cssPath: this.cssPath,
cssData: this.cssData,
bodyClass: this.bodyClass,
colorTable: this.colorTable,
afterCreate: this.afterCreate,
// 编辑器内容改变回调
afterChange: () => {
this.editor ? (this.outContent = this.editor.html()) : "";
},
afterTab: this.afterTab,
afterFocus: this.afterFocus,
afterBlur: this.afterBlur,
afterUpload: this.afterUpload,
uploadJson: this.uploadJson,
fileManagerJson: this.fileManagerJson,
allowPreviewEmoticons: this.allowPreviewEmoticons,
allowImageUpload: this.allowImageUpload,
allowFlashUpload: this.allowFlashUpload,
allowMediaUpload: this.allowMediaUpload,
allowFileUpload: this.allowFileUpload,
allowFileManager: this.allowFileManager,
fontSizeTable: this.fontSizeTable,
imageTabIndex: this.imageTabIndex,
formatUploadUrl: this.formatUploadUrl,
fullscreenShortcut: this.fullscreenShortcut,
extraFileUploadParams: this.extraFileUploadParams,
filePostName: this.filePostName,
fillDescAfterUploadImage: this.fillDescAfterUploadImage,
afterSelectFile: this.afterSelectFile,
pagebreakHtml: this.pagebreakHtml,
allowImageRemote: this.allowImageRemote,
autoHeightMode: this.autoHeightMode,
fixToolBar: this.fixToolBar,
tabIndex: this.tabIndex
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
\ No newline at end of file
src/views/webSiteManagement/aboutUs/index.vue
View file @ e71f47be
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2020-12-01 09:07:41 * @Date: 2020-12-01 09:07:41
* @LastEditTime: 2020-12-03 15:40:18 * @LastEditTime: 2020-12-04 13:52:59
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \rs-cloud\src\views\webSiteManagement\aboutUs.vue * @FilePath: \rs-cloud\src\views\webSiteManagement\aboutUs.vue
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
</el-form-item> </el-form-item>
<el-form-item label="*公司简介"> <el-form-item label="*公司简介">
<el-col :span="20"> <el-col :span="20">
<Kind-editor ref="kindeditor" :html="form.html" @input="getContent"></Kind-editor> <kind-editor id="editor_id" :content.sync="form.introduce" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
...@@ -61,7 +61,6 @@ export default { ...@@ -61,7 +61,6 @@ export default {
title: '', title: '',
email: '', email: '',
address: '', address: '',
html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
introduce: '' introduce: ''
} }
}; };
...@@ -70,18 +69,11 @@ export default { ...@@ -70,18 +69,11 @@ export default {
}, },
methods: { methods: {
// 获取编辑器内容 onContentChange (val) {
getContent(introduce) { console.log(val)
this.form.introduce = introduce
}, },
// 编辑器内容转换成在线url afterChange () {
async getcontent2Url() {
try {
const htmlUrl = await this.$refs.kindeditor.content2Url()
return htmlUrl
} catch (error) {
console.log(error)
}
}, },
onSubmit() { onSubmit() {
console.log('submit!'); console.log('submit!');
......
src/views/webSiteManagement/industryApplication/applicationList/addApp/index.vue
View file @ e71f47be
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2020-12-04 09:09:37 * @Date: 2020-12-04 09:09:37
* @LastEditTime: 2020-12-04 10:47:14 * @LastEditTime: 2020-12-04 13:55:15
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\addApp\index.vue * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\addApp\index.vue
...@@ -78,7 +78,8 @@ ...@@ -78,7 +78,8 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="*上传样例"> <el-form-item label="*上传样例">
<el-upload class="upload-demo" action="#" :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="100" :on-exceed="handleExceed" :http-request="onUploadRequest" :file-list="form.fileList"> <el-upload class="upload-demo" action="#" :auto-upload="false" :on-preview="handlePreview" :on-remove="handleRemove"
:before-remove="beforeRemove" multiple :limit="100" :on-exceed="handleExceed" :http-request="onUploadRequest" :file-list="form.fileList">
<el-button size="small" type="primary">点击上传</el-button> <el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> </el-upload>
...@@ -89,7 +90,7 @@ ...@@ -89,7 +90,7 @@
<div class="title">应用简介</div> <div class="title">应用简介</div>
<div class="form"> <div class="form">
<el-form-item label="*产品简介"> <el-form-item label="*产品简介">
<Kind-editor ref="kindeditor" :html="form.html" @input="getContent"></Kind-editor> <kind-editor id="editor_id" :content.sync="form.editorText" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
...@@ -126,8 +127,7 @@ export default { ...@@ -126,8 +127,7 @@ export default {
isSample: '是', isSample: '是',
isCustomized: '是', isCustomized: '是',
fileList: [], fileList: [],
content: '', editorText: '直接初始化值', // 双向同步的变量
html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
} }
} }
}, },
...@@ -138,23 +138,16 @@ export default { ...@@ -138,23 +138,16 @@ export default {
this.$bus.$emit('hideThreeRoute',true) this.$bus.$emit('hideThreeRoute',true)
}, },
methods: { methods: {
onContentChange (val) {
console.log(val)
},
afterChange () {
},
backup(){ backup(){
this.$parent.componentName='appList' this.$parent.componentName='appList'
this.$bus.$emit('hideThreeRoute',true) this.$bus.$emit('hideThreeRoute',true)
}, },
// 获取编辑器内容
getContent(content) {
this.form.content = content
},
// 编辑器内容转换成在线url
async getcontent2Url() {
try {
const htmlUrl = await this.$refs.kindeditor.content2Url()
return htmlUrl
} catch (error) {
console.log(error)
}
},
// 上传样例 // 上传样例
onUploadRequest(data) { onUploadRequest(data) {
console.log("uploadData=>",data) console.log("uploadData=>",data)
......
src/views/webSiteManagement/newsCategory/newsCreator/index.vue
View file @ e71f47be
<!-- <!--
* @Author: Jenkins * @Author: Jenkins
* @Date: 2020-12-02 14:49:10 * @Date: 2020-12-02 14:49:10
* @LastEditTime: 2020-12-03 16:16:11 * @LastEditTime: 2020-12-04 13:53:59
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: 创建新闻 * @Description: 创建新闻
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\newsCreator\index.vue * @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\newsCreator\index.vue
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
</el-form-item> </el-form-item>
<el-form-item label="*资讯详情"> <el-form-item label="*资讯详情">
<el-col :span="20"> <el-col :span="20">
<Kind-editor ref="kindeditor" :html="form.html" @input="getContent"></Kind-editor> <kind-editor id="editor_id" :content.sync="form.content" :afterChange="afterChange()" :loadStyleMode="false"@on-content-change="onContentChange"></kind-editor>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="*排序"> <el-form-item label="*排序">
...@@ -74,7 +74,6 @@ export default { ...@@ -74,7 +74,6 @@ export default {
region: '', region: '',
sort: '', sort: '',
content: '', content: '',
html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
}, },
} }
}, },
...@@ -82,18 +81,11 @@ export default { ...@@ -82,18 +81,11 @@ export default {
}, },
methods: { methods: {
// 获取编辑器内容 onContentChange (val) {
getContent(content) { console.log(val)
this.form.content = content
}, },
// 编辑器内容转换成在线url afterChange () {
async getcontent2Url() {
try {
const htmlUrl = await this.$refs.kindeditor.content2Url()
return htmlUrl
} catch (error) {
console.log(error)
}
}, },
onPreview(url){ onPreview(url){
this.form.coverImg = url this.form.coverImg = url
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment