个人电脑做服务器映射网站,线上广告平台,wordpress 订单,大学生建设什么网站好vue使用tinymce 文章目录 vue使用tinymcetinymce富文本编辑器在这里插入图片描述 一、本文要实现二、使用步骤1.安装tinymce2.tinymce组件新建3. 在store添加商品详情的状态管理4. tinymce组件的引入 tinymce富文本编辑器 提示#xff1a;以下是本篇文章正文内容#xff0c;下…vue使用tinymce 文章目录 vue使用tinymcetinymce富文本编辑器在这里插入图片描述 一、本文要实现二、使用步骤1.安装tinymce2.tinymce组件新建3. 在store添加商品详情的状态管理4. tinymce组件的引入 tinymce富文本编辑器 提示以下是本篇文章正文内容下面案例可供参考
一、本文要实现
在‘商品详情’tab页实现富文本编辑器的使用。 前提tab页可以正常实现功能切换。
二、使用步骤
1.安装tinymce
根据自己的项目安装适合自己项目的tinymce版本。 版本有冲突安装不上的可以请教d老师应当安装什么版本。
npm install tinymce -S在node_modules中找到skins放入public文件夹当中下载tinymce汉化包并页放入该文件中。汉化包下载链接汉化包下载链接
2.tinymce组件新建
本文新建的tiny组件目录如下 文件代码如下 templatediv classtinymce-editoreditorv-modelmyValue:initinit:disableddisabled:api-keyapiKeyonClickonClickonBluronBluronFocusonFocus//div
/templatescript
import Editor from tinymce/tinymce-vue
import tinymceConfig from /config/tinymce
import axios from axios; export default {name: TinymceEditor,components: {Editor},props: {disabled: {type: Boolean,default: false},value: {type: String,default: }},data() {return {apiKey: 此处替换为你在tinymce中获取的秘钥,init: {language_url:./tinymce/langs/zh.CN.js,language:zh_CN,skin_url:./tinymce/skins/ui/oxide,...tinymceConfig.defaultConfig,images_upload_handler: function (blobInfo, success, failure) {let formData new FormData();formData.append(file, blobInfo.blob(), blobInfo.filename());// 使用 axios 或其他 HTTP 客户端上传图片axios.post(/api/upload, formData).then(res {success(res.data.url);}).catch(err {failure(图片上传失败 err.message);});}}}},computed: {myValue: {get() {return this.value},set(value) {this.$emit(input, value)}}},methods: {onClick(e) {this.$emit(onClick, e, this.myValue)},onBlur(e) {this.$emit(onBlur, e, this.myValue)},onFocus(e) {this.$emit(onFocus, e, this.myValue)}}
}
/scriptstyle scoped
.tinymce-editor {width: 100%;position: relative;z-index: 1;
}
/style 3. 在store添加商品详情的状态管理
export default {namespaced: true, // 必须添加这行来启用命名空间state: {content: , // 商品详情富文本内容}mutations: {// 修改商品详情富文本内容updateContent(state, content) {state.content content}}4. tinymce组件的引入
在你想要展示富文本编辑器的地方引入该组件下面是一个引入的例子
import TinymceEditor from /components/common/tinymce-editor.vueexport default {name: createGoods,components: { TinymceEditor },}在页面中调用 el-tab-pane label商品详情div classp-3tinymce-editorv-modelcontentinputupdateContent/tinymce-editor/div/el-tab-pane
