TinymceEdit编辑器集成
This commit is contained in:
WangHao
129
ruoyi-ui/src/components/TinyMCE/index.vue
Normal file
129
ruoyi-ui/src/components/TinyMCE/index.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div class="tinymce-box">
|
||||
<editor v-model="myValue"
|
||||
:init="init"
|
||||
:disabled="disabled"
|
||||
@onClick="onClick">
|
||||
</editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
|
||||
import Editor from '@tinymce/tinymce-vue'
|
||||
import 'tinymce/themes/silver'
|
||||
// 编辑器插件plugins
|
||||
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
|
||||
import 'tinymce/plugins/image'// 插入上传图片插件
|
||||
import 'tinymce/plugins/media'// 插入视频插件
|
||||
import 'tinymce/plugins/table'// 插入表格插件
|
||||
import 'tinymce/plugins/lists'// 列表插件
|
||||
import 'tinymce/plugins/wordcount'// 字数统计插件
|
||||
|
||||
|
||||
// import "tinymce/themes/silver";
|
||||
// import "tinymce/plugins/paste";
|
||||
// import "tinymce/plugins/image";
|
||||
// import "tinymce/plugins/link";
|
||||
// import "tinymce/plugins/code";
|
||||
// import "tinymce/plugins/table";
|
||||
// import "tinymce/plugins/lists";
|
||||
// import "tinymce/plugins/wordcount";
|
||||
|
||||
|
||||
|
||||
import toolbar from './toolbar'
|
||||
import plugins from './plugins'
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
components:{
|
||||
Editor
|
||||
},
|
||||
name:'tinymce',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
plugins: {
|
||||
type: [String, Array],
|
||||
default: ' lists image media table wordcount hr '
|
||||
},
|
||||
toolbar: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
init: {
|
||||
language_url: '/tinymce/langs/zh_CN.js',
|
||||
language: 'zh_CN',
|
||||
skin_url: '/tinymce/skins/ui/oxide',
|
||||
// skin_url: 'tinymce/skins/ui/oxide-dark',//暗色系
|
||||
height: 300,
|
||||
menubar: 'file edit insert view format table',//菜单 //
|
||||
// 配置每个菜单栏的子菜单项（如下是默认配置）
|
||||
menu: {
|
||||
file: {title: 'File', items: 'newdocument'},
|
||||
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
|
||||
insert: {title: 'Insert', items: 'link media | template hr'},
|
||||
view: {title: 'View', items: 'visualaid'},
|
||||
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
|
||||
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
|
||||
},
|
||||
menubar: false,//编辑器最上面菜单关闭
|
||||
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
|
||||
plugins: this.plugins,
|
||||
plugins: plugins,
|
||||
branding: false,
|
||||
|
||||
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
|
||||
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
|
||||
images_upload_handler: (blobInfo, success, failure) => {
|
||||
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
|
||||
success(img)
|
||||
}
|
||||
},
|
||||
myValue: this.value
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
tinymce.init({})
|
||||
},
|
||||
methods: {
|
||||
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
|
||||
// 需要什么事件可以自己增加
|
||||
onClick (e) {
|
||||
this.$emit('onClick', e, tinymce)
|
||||
},
|
||||
// 可以添加一些自己的自定义事件，如清空内容
|
||||
clear () {
|
||||
this.myValue = ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newValue) {
|
||||
this.myValue = newValue
|
||||
},
|
||||
myValue (newValue) {
|
||||
this.$emit('input', newValue)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
7
ruoyi-ui/src/components/TinyMCE/plugins.js
Normal file
7
ruoyi-ui/src/components/TinyMCE/plugins.js
Normal file
@ -0,0 +1,7 @@
|
||||
// Any plugins you want to use has to be imported
|
||||
// Detail plugins list see https://www.tinymce.com/docs/plugins/
|
||||
// Custom builds see https://www.tinymce.com/download/custom-builds/
|
||||
|
||||
const plugins = ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount']
|
||||
|
||||
export default plugins
|
||||
7
ruoyi-ui/src/components/TinyMCE/toolbar.js
Normal file
7
ruoyi-ui/src/components/TinyMCE/toolbar.js
Normal file
@ -0,0 +1,7 @@
|
||||
// Here is a list of the toolbar
|
||||
// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
|
||||
//备份 原始的
|
||||
//const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
|
||||
const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo codesample fullscreen', 'hr bullist numlist link image charmap anchor table emoticons forecolor backcolor preview code']
|
||||
|
||||
export default toolbar
|
||||
@ -1,53 +1,68 @@
|
||||
|
||||
<template>
|
||||
<div class="edit_container">
|
||||
<quill-editor
|
||||
v-model="content"
|
||||
ref="myQuillEditor"
|
||||
:options="editorOption"
|
||||
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
|
||||
@change="onEditorChange($event)">
|
||||
</quill-editor>
|
||||
<div class="home">
|
||||
|
||||
|
||||
|
||||
<svg-icon name="logo" class="menu-icon" color="#fff" width="16" height="16"></svg-icon>
|
||||
<!-- <IconSelect></IconSelect>-->
|
||||
<el-form-item style="margin-bottom: 40px;" prop="title">
|
||||
<MDinput v-model="postForm.title" :maxlength="100" name="name" required>
|
||||
Title
|
||||
</MDinput>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<tinymce
|
||||
ref="editor"
|
||||
v-model="msg"
|
||||
:disabled="disabled"
|
||||
@onClick="onClick"
|
||||
/>
|
||||
<button @click="clear">清空内容</button>
|
||||
<button @click="disabled = true">禁用</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import tinymce from '../../../components/TinyMCE'
|
||||
|
||||
|
||||
import quillEditor from "../../../components/Editor";
|
||||
import SvgIcon from "../../../components/SvgIcon";
|
||||
import IconSelect from "../../../components/IconSelect";
|
||||
|
||||
const defaultForm = {
|
||||
status: 'draft',
|
||||
title: '', // 文章题目
|
||||
content: '', // 文章内容
|
||||
content_short: '', // 文章摘要
|
||||
source_uri: '', // 文章外链
|
||||
image_uri: '', // 文章图片
|
||||
display_time: undefined, // 前台展示时间
|
||||
id: undefined,
|
||||
platforms: ['a-platform'],
|
||||
comment_disabled: false,
|
||||
importance: 0
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
quillEditor,SvgIcon,IconSelect
|
||||
tinymce
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
|
||||
editorOption: {}
|
||||
data(){
|
||||
return{
|
||||
postForm: Object.assign({}, defaultForm),
|
||||
msg: 'Welcome to Use Tinymce Editor',
|
||||
disabled: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEditorReady(quillEditor) { // 准备编辑器
|
||||
|
||||
},
|
||||
onEditorBlur(){}, // 失去焦点事件
|
||||
onEditorFocus(){}, // 获得焦点事件
|
||||
onEditorChange(){}, // 内容改变事件
|
||||
},
|
||||
computed: {
|
||||
editor() {
|
||||
return this.$refs.myQuillEditor.quill;
|
||||
// 鼠标单击的事件
|
||||
onClick (e, editor) {
|
||||
console.log('Element clicked')
|
||||
console.log(e)
|
||||
console.log(editor)
|
||||
},
|
||||
// 清空内容
|
||||
clear () {
|
||||
this.$refs.editor.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user