使用富文本指南
给大家介绍一款富文本编辑器tinymce ，个人感觉使用很方便
官方文档:tinymce.ax-z.cn/
第一步：引用
index.html 主文件
<script src="<%= BASE_URL %>static/tinymce4.7.5/tinymce.min.js"></script>
第二步：引用tinymce静态资源
在public/static引入下面文件，下载地址：github.com/sundestiny/…
--tinymce4.7.5
--langs
--plugins
--skins
--tinymce.min.js
第三步：创建组件
components/Tinymce
--components
--editorImage.vue
--index.vue
--plugins.js
--toolbar.js
editorImage.vue
<template>
<div class="upload-container">
<el-button :style="{ background: color, borderColor: color }" icon="el-icon-upload" size="mini" type="primary" @click="dialogVisible = true">
上传图片
</el-button>
<el-dialog :visible.sync="dialogVisible">
<el-upload
:multiple="true"
:file-list="fileList"
:show-file-list="true"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
class="editor-slide-upload"
action="https://httpbin.org/post"
list-type="picture-card"
>
<el-button size="small" type="primary"> 点击上传 </el-button>
</el-upload>
<el-button @click="dialogVisible = false"> 取 消 </el-button>
<el-button type="primary" @click="handleSubmit"> 确 定 </el-button>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'EditorSlideUpload',
props: {
color: {
type: String,
default: '#1890ff',
},
},
data() {
return {
dialogVisible: false,
listObj: {},
fileList: [],
}
},
methods: {
checkAllSuccess() {
return Object.keys(this.listObj).every((item) => this.listObj[item].hasSuccess)
},
handleSubmit() {
const arr = Object.keys(this.listObj).map((v) => this.listObj[v])
if (!this.checkAllSuccess()) {
this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
return
}
this.$emit('successCBK', arr)
this.listObj = {}
this.fileList = []
this.dialogVisible = false
},
handleSuccess(response, file) {
const uid = file.uid
const objKeyArr = Object.keys(this.listObj)
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (this.listObj[objKeyArr[i]].uid === uid) {
this.listObj[objKeyArr[i]].url = response.files.file
this.listObj[objKeyArr[i]].hasSuccess = true
return
}
}
},
handleRemove(file) {
const uid = file.uid
const objKeyArr = Object.keys(this.listObj)
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (this.listObj[objKeyArr[i]].uid === uid) {
delete this.listObj[objKeyArr[i]]
return
}
}
},
beforeUpload(file) {
const _self = this
const _URL = window.URL || window.webkitURL
const fileName = file.uid
this.listObj[fileName] = {}
return new Promise((resolve, reject) => {
const img = new Image()
img.src = _URL.createObjectURL(file)
img.onload = function () {
_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
}
resolve(true)
})
},
},
}
</script>
<style lang="scss" scoped>
.editor-slide-upload {
margin-bottom: 20px;
>>> .el-upload--picture-card {
width: 100%;
}
}
</style>
index.vue
<template>
<div :class="{ fullscreen: fullscreen }" class="tinymce-container editor-container">
<textarea :id="tinymceId" class="tinymce-textarea" />
<div class="editor-custom-btn-container">
<editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
</div>
</div>
</template>
<script>
import editorImage from './components/editorImage'
import plugins from './plugins'
import toolbar from './toolbar'
export default {
name: 'Tinymce',
components: { editorImage },
props: {
id: {
type: String,
default: function () {
return 'vue-tinymce-' + Number(new Date()) + String((Math.random() * 1000).toFixed(0))
},
},
value: {
type: String,
default: '',
},
toolbar: {
type: Array,
required: false,
default() {
return []
},
},
menubar: {
type: String,
default: 'file edit insert view format table',
},
height: {
type: Number,
required: false,
default: 360,
},
},
data() {
return {
hasChange: false,
hasInit: false,
tinymceId: this.id,
fullscreen: false,
languageTypeList: {
zh: 'zh_CN',
en: 'en',
},
}
},
computed: {
language() {
return this.languageTypeList['zh']
},
},
watch: {
value(val) {
if (!this.hasChange && this.hasInit) {
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''))
}
},
language() {
this.destroyTinymce()
this.$nextTick(() => this.initTinymce())
},
},
mounted() {
this.initTinymce()
},
activated() {
this.initTinymce()
},
deactivated() {
this.destroyTinymce()
},
destroyed() {
this.destroyTinymce()
},
methods: {
initTinymce() {
const _this = this
window.tinymce.init({
branding: false,
language: this.language,
selector: `#${this.tinymceId}`,
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
menubar: this.menubar,
plugins: plugins,
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
default_link_target: '_blank',
link_title: false,
nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin
init_instance_callback: (editor) => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true
editor.on('NodeChange Change KeyUp SetContent', () => {
this.hasChange = true
this.$emit('input', editor.getContent())
})
},
setup(editor) {
editor.on('FullscreenStateChanged', (e) => {
_this.fullscreen = e.state
})
},
})
},
destroyTinymce() {
const tinymce = window.tinymce.get(this.tinymceId)
if (this.fullscreen) {
tinymce.execCommand('mceFullScreen')
}
if (tinymce) {
tinymce.destroy()
}
},
setContent(value) {
window.tinymce.get(this.tinymceId).setContent(value)
},
getContent() {
window.tinymce.get(this.tinymceId).getContent()
},
imageSuccessCBK(arr) {
const _this = this
arr.forEach((v) => {
window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
})
},
},
}
</script>
<style scoped>
.tinymce-container {
position: relative;
line-height: normal;
}
.tinymce-container >>> .mce-fullscreen {
z-index: 10000;
}
.tinymce-textarea {
visibility: hidden;
z-index: -1;
}
.editor-custom-btn-container {
position: absolute;
right: 4px;
top: 4px;
/*z-index: 2005;*/
}
.fullscreen .editor-custom-btn-container {
z-index: 10000;
position: fixed;
}
.editor-upload-btn {
display: inline-block;
}
</style>
plugins.js 使用插件
// 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
toolbar.js 使用的工具
// 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']
export default toolbar
第四步：组件中使用
xxx.vue
<template>
<div>
<Tinymce :value="value" @input="tinymceInput"></Tinymce>
</div>
</template>
<script>
import SgDialog from '@/components/SgDialog'
import Tinymce from '@/components/Tinymce'
export default {
name: 'xxx',
components: {Tinymce },
data() {
return {
value:'' //传给富文本的值
}
},
watch: {},
created() {},
mounted() {},
methods: {
tinymceInput(e) {
this.$emit('valueChanged', e) //将富文本编辑的值接收
},
},
}
</script>
<style scoped>
</style>
如果觉得有帮助欢迎点赞、评论。 上述内容仅仅代表个人观点，如有错误，请指正。如果你也对前端感兴趣，欢迎访问我的个人博客sundestiny.github.io/myblog/
