Skip to content

T
tinymce
Commit 3d124fd7 by 无尘
Options

add: 添加富文本组件文件

parent 9bef9e96
Showing with 232 additions and 2 deletions
README.md
# 富文本编辑器组件
\ No newline at end of file
# #富文本编辑器组件
## #安装 `tinymce`
```
$ npm install @tinymce/tinymce-vue -S
npm install tinymce -S
```
## #使用方法
安装之后，在 `node_modules` 中找到 `tinymce/skins` 目录，然后将 `skins` 目录拷贝到 `static` 目录下
文中所有 `static` 目录相关都这样处理
tinymce 默认是英文界面，所以还需要下载一个中文语言包：
中文：https://tinymce-services.azurewebsites.net/1/i18n/download?langs=zh_CN
然后将这个语言包放到 static 目录下，为了结构清晰，包一层 tinymce 目录
>注: 目前这些样式文件已经在这个仓库中 `static` 目录,不用再去找 `skin`目录 和下载语言包
```
static
|____tinymce
|___skins
|___zh_CN.js
<tinymce-edit ref="tinymceWrap" :bodyHtml="ruleForm.gradeDescribe" :projectName="projectName"></tinymce-edit>
import tinymceEdit from 'components/tinymce-edit'
父组件通过 `this.$refs.tinymceWrap.tinymceHtml` 获取富文本中内容
```
### #公共上传图片请求方法
```
/**
* method: 'post'
* data: params
*
*/
export const postForm = (url, params) => {
params.requestProject = "gic-clique"; // 当前项目名需要修改成各个对应的项目名
return Vue.axios({
method: 'post',
url: `${local}${url}`,
data: params,
headers: {}
});
}
```
>注:引入路径修改成自己的路径,
当前项目名需要修改成各个对应的项目名
>注: 注意看下当前组件中引入的公共方法路径,和当前组件的位置
static/tinymce/skins/lightgray/content.inline.min.css 0 → 100644
.word-wrap{word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3A3A3A;background:#D5D5D5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3A3A3A;background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#AAA}.mce-shy::after{content:'-'}.mce-match-marker{background:#AAA;color:#fff}.mce-match-marker-selected{background:#3399ff;color:#fff}.mce-spellchecker-word{border-bottom:2px solid rgba(208,2,27,0.5);cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #BBB}td[data-mce-selected],th[data-mce-selected]{background-color:#2276d2 !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2276d2}.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,.mce-content-body.mce-content-readonly *[contentEditable=true]:hover{outline:none}.mce-content-body *[data-mce-selected="inline-boundary"]{background:#bfe6ff}.mce-content-body .mce-item-anchor[data-mce-selected]{background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-content-body hr{cursor:default}.mce-content-body table{-webkit-nbsp-mode:normal}.ephox-snooker-resizer-bar{background-color:#2276d2;opacity:0}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:.2}.mce-content-body{line-height:1.3}
\ No newline at end of file
static/tinymce/skins/lightgray/content.min.css 0 → 100644
body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;line-height:1.3;scrollbar-3dlight-color:#F0F0EE;scrollbar-arrow-color:#676662;scrollbar-base-color:#F0F0EE;scrollbar-darkshadow-color:#DDDDDD;scrollbar-face-color:#E0E0DD;scrollbar-highlight-color:#F0F0EE;scrollbar-shadow-color:#F0F0EE;scrollbar-track-color:#F5F5F5}td,th{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px}.word-wrap{word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3A3A3A;background:#D5D5D5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3A3A3A;background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#AAA}.mce-shy::after{content:'-'}.mce-match-marker{background:#AAA;color:#fff}.mce-match-marker-selected{background:#3399ff;color:#fff}.mce-spellchecker-word{border-bottom:2px solid rgba(208,2,27,0.5);cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #BBB}td[data-mce-selected],th[data-mce-selected]{background-color:#2276d2 !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2276d2}.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,.mce-content-body.mce-content-readonly *[contentEditable=true]:hover{outline:none}.mce-content-body *[data-mce-selected="inline-boundary"]{background:#bfe6ff}.mce-content-body .mce-item-anchor[data-mce-selected]{background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-content-body hr{cursor:default}.mce-content-body table{-webkit-nbsp-mode:normal}.ephox-snooker-resizer-bar{background-color:#2276d2;opacity:0}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:.2}
\ No newline at end of file
static/tinymce/skins/lightgray/content.mobile.min.css 0 → 100644
.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{position:absolute;display:inline-block;background-color:green;opacity:.5}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}
\ No newline at end of file
tinymce-edit.vue 0 → 100644
<!--
安装 tinymce
$ npm install @tinymce/tinymce-vue -S
npm install tinymce -S
安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下
文中所有 static 目录相关都这样处理
tinymce 默认是英文界面，所以还需要下载一个中文语言包：
中文：https://tinymce-services.azurewebsites.net/1/i18n/download?langs=zh_CN
然后将这个语言包放到 static 目录下，为了结构清晰，包一层 tinymce 目录
static
|____tinymce
|___skins
|___zh_CN.js
<tinymce-edit ref="tinymceWrap" :bodyHtml="ruleForm.gradeDescribe" :projectName="projectName"></tinymce-edit>
import tinymceEdit from 'components/memberShip/tinymce-edit'
公共上传图片请求方法
/*
* method: 'post'
* data: params
*
*/
export const postForm = (url, params) => {
params.requestProject = "gic-clique";
return Vue.axios({
method: 'post',
url: `${local}${url}`,
data: params,
headers: {}
});
}
引入路径修改成自己的路径
-->
<template>
<div class="tinymce-contain">
<editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
</div>
</template>
<script>
import { getRequest,postForm } from '@/api/api';
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
name: "tinymce-edit",
props: ["bodyHtml",'projectName'],
data() {
return {
// tinymce
tinymceHtml: '请输入内容',
init: {
language_url: 'static/tinymce/zh_CN.js',
language: 'zh_CN',
skin_url: 'static/tinymce/skins/lightgray',
height: 300,
// 图片上传
// without images_upload_url set, Upload tab won't show up
// images_upload_url: '',
// images_upload_base_path: '/some/basepath',
images_upload_credentials: true, //是否应传递cookie等跨域的凭据
// images_upload_handler提供三个参数：blobInfo, success, failure
images_upload_handler: (blobInfo, success, failure)=>{
console.log(blobInfo)
this.handleImgUpload(blobInfo, success, failure)
},
// 添加插件
plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
toolbar:
'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
branding: false,
setup: function(editor) {
// 点击编辑框回调
editor.on('click', function(e) {
console.log('Editor was clicked');
});
},
fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",
}
}
},
methods: {
// 上传图片
handleImgUpload (blobInfo, success, failure) {
var that = this
let formdata = new FormData()
formdata.set('upload_file', blobInfo.blob())
formdata.set("requestProject",that.repProjectName);
console.log(formdata)
postForm('/api-plug/upload-img', formdata).then(res => {
success(res.data.result[0].qcloudImageUrl)
}).catch(res => {
console.log(res)
failure('error')
})
},
},
watch: {
projectName: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.repProjectName = newData || 'gic-web';
},
bodyHtml: function(newData,oldData){
var that = this;
// console.log("新数据:",newData,oldData)
that.tinymceHtml = newData;
},
},
components: {
Editor
},
mounted() {
var that = this
tinymce.init({});
that.tinymceHtml = that.bodyHtml;
}
}
</script>
<style lang="less" scoped >
.tinymce-contain {
width: 890px;
position: relative;
/deep/ .mce-tinymce {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 1px solid #dcdfe6;
}
/deep/ .mce-panel {
border: 0px solid #dcdfe6;
}
}
</style>
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