Skip to content

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

kindeditor更新

parent 8a6dae04
Expand all Hide 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 @@
</div>
<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>
<!-- 输入框 -->
......@@ -42,7 +42,7 @@
<script>
import MyUpload from "@/components/Upload/singleImageX"//上传组件
import CustomInput from "@/components/CustomInput"//自定义组件
import KindEditor from "@/components/Kindeditor"//富文本
import KindEditor from "@/components/Kindeditor";
export default {
name: "CustomForm",
......@@ -59,8 +59,6 @@ export default {
},
data() {
return {
html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
// html: '#',
content: ""
}
},
......@@ -71,8 +69,11 @@ export default {
}
},
methods: {
getContent(val) {
console.log('富文本', val)
onContentChange (val) {
console.log(val)
},
afterChange () {
},
resetParams(val) {
this.getForm.formVal.jumpType = val;
......
src/components/Kindeditor/index.vue
View file @ e71f47be
This diff is collapsed.
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
* @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
* @Description: In User Settings Edit
* @FilePath: \rs-cloud\src\views\webSiteManagement\aboutUs.vue
......@@ -36,7 +36,7 @@
</el-form-item>
<el-form-item label="*公司简介">
<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-form-item>
<el-form-item>
......@@ -49,7 +49,7 @@
</template>
<script>
import KindEditor from "@/components/Kindeditor";
import KindEditor from "@/components/Kindeditor";
export default {
name: "AboutUs",
components: {
......@@ -61,7 +61,6 @@ export default {
title: '',
email: '',
address: '',
html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
introduce: ''
}
};
......@@ -70,18 +69,11 @@ export default {
},
methods: {
// 获取编辑器内容
getContent(introduce) {
this.form.introduce = introduce
onContentChange (val) {
console.log(val)
},
// 编辑器内容转换成在线url
async getcontent2Url() {
try {
const htmlUrl = await this.$refs.kindeditor.content2Url()
return htmlUrl
} catch (error) {
console.log(error)
}
afterChange () {
},
onSubmit() {
console.log('submit!');
......
src/views/webSiteManagement/industryApplication/applicationList/addApp/index.vue
View file @ e71f47be
<!--
* @Author: your name
* @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
* @Description: In User Settings Edit
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\industryApplication\applicationList\addApp\index.vue
......@@ -78,7 +78,8 @@
</el-radio-group>
</el-form-item>
<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>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
......@@ -89,7 +90,7 @@
<div class="title">应用简介</div>
<div class="form">
<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>
</div>
</div>
......@@ -126,8 +127,7 @@ export default {
isSample: '是',
isCustomized: '是',
fileList: [],
content: '',
html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
editorText: '直接初始化值', // 双向同步的变量
}
}
},
......@@ -138,23 +138,16 @@ export default {
this.$bus.$emit('hideThreeRoute',true)
},
methods: {
onContentChange (val) {
console.log(val)
},
afterChange () {
},
backup(){
this.$parent.componentName='appList'
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) {
console.log("uploadData=>",data)
......
src/views/webSiteManagement/newsCategory/newsCreator/index.vue
View file @ e71f47be
<!--
* @Author: Jenkins
* @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
* @Description: 创建新闻
* @FilePath: \rs-cloud-platform-ui\src\views\webSiteManagement\newsCategory\newsCreator\index.vue
......@@ -39,7 +39,7 @@
</el-form-item>
<el-form-item label="*资讯详情">
<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-form-item>
<el-form-item label="*排序">
......@@ -74,7 +74,6 @@ export default {
region: '',
sort: '',
content: '',
html: 'https://ebusiness-1255313385.cosbj.myqcloud.com/image/20190823/center2019082304054532.html',
},
}
},
......@@ -82,18 +81,11 @@ export default {
},
methods: {
// 获取编辑器内容
getContent(content) {
this.form.content = content
onContentChange (val) {
console.log(val)
},
// 编辑器内容转换成在线url
async getcontent2Url() {
try {
const htmlUrl = await this.$refs.kindeditor.content2Url()
return htmlUrl
} catch (error) {
console.log(error)
}
afterChange () {
},
onPreview(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