Simditor学习--vuejs集成simditor

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Simditor学习--vuejs集成simditor相关的知识,希望对你有一定的参考价值。

唠叨

  因为项目需要我自己研究了和集成在vue方便以后再使用,详情官方文档在这里。希望大家有好的建议提出让我继续改进。

simditor介绍

Simditor 是团队协作工具 Tower 使用的富文本编辑器,基于jQuery开发。

相比传统的编辑器它的特点是:

  1. 功能精简,加载快速
  2. 输出格式化的标准 html
  3. 每一个功能都有非常优秀的使用体验
  4. 兼容的浏览器:IE10+、Chrome、Firefox、Safari。

Vue集成

   下载:

 点击这里下载的压缩文件。你也可以通过bower或者npm安装simditor:

  • $ npm install simditor
  • $ bower install simditor

这里主要讲的集成到vuejs,其他引入方式自行翻阅官网。

  初始化:

html模版如下:

<textarea :id="textnames" >
    <p>{{value}}</p>
</textarea>

我们只需要他接收父组件的值和传值回父组件,所以不需要太复杂。

js模版如下:

 

import Simditor from ‘simditor‘
    export default {
        props: [‘value‘],
        data() {
            return {
                textnames: new Date().getTime(),//这里防止多个富文本发生冲突
                editor:‘‘,//保存simditor对象
                toolbar: [‘bold‘, ‘italic‘, ‘underline‘, ‘strikethrough‘,
                    ‘color‘, ‘|‘, ‘ol‘, ‘ul‘, ‘blockquote‘, ‘code‘, ‘|‘,
                    ‘link‘, ‘image‘, ‘|‘, ‘indent‘, ‘outdent‘
                ]//自定义工具栏
            }
        },
        ready() {
            this.createEditor()
        },
        methods: {
            createEditor() {
                var _this = this
                this.editor = new Simditor({
                    textarea: $(‘#‘ + _this.namess),
                    toolbar: _this.toolbar,
                    upload: {
                        url: apic + ‘/api/CommAnnex/UploadFiles‘, //文件上传的接口地址
//                      params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                        fileKey: ‘fileDataFileName‘, //服务器端获取文件数据的参数名
                        connectionCount: 3,//同时上传个数
                        leaveConfirm: ‘正在上传文件‘
                    },
                    pasteImage: true,//是否允许粘贴上传图片,依赖 upload 选项,仅支持 Firefox 和 Chrome 浏览器。
                    tabIndent: true,//是否在编辑器中使用 tab 键来缩进
                });
                this.editor.on("valuechanged", function(e, src) {
                    _this.value = _this.editor.getValue()
                })//valuechanged是simditor自带获取值得方法
            }
        }
    }
    图片粘贴上传的地址默认为

技术分享

 

 需要修改upload.js文件,找到下面代码

_this.trigger(‘uploadprogress‘, [file, file.size, file.size]);  
_this.trigger(‘uploadsuccess‘, [file, newresult]); 
return $(document).trigger(‘uploadsuccess‘, [file, result, _this]);

修改为以下代码即可

var newresult = JSON.parse("{\\"file_path\\":\\""+ result.Data[0].FileUrl +"\\"}"); //获取正确地址_this.trigger(‘uploadprogress‘, [file, file.size, file.size]);  
_this.trigger(‘uploadsuccess‘, [file, newresult]); 
return $(document).trigger(‘uploadsuccess‘, [file, newresult, _this]);

  父页面引用:

  

  <simditor :value.sync=‘value‘ v-ref:simditor></simditor>

  如果需要设置富文本框值就使用以下代码

  this.$refs.simditor.editor.setValue(data.describe)

 大概simditor组件就封装好了,本人新手纯手打如果有什么不好,请各位多多指导。

 




以上是关于Simditor学习--vuejs集成simditor的主要内容,如果未能解决你的问题,请参考以下文章

Simditor 富文本编辑器

Simditor 富文本编辑器多选图片上传视频连接插入

React后台管理系统-rich-editor组件

是否可以将 Webpack/VueJS 与 Odoo 框架(v12)集成?

Tailwind CSS + VueJS 单文件组件和 VS Code 集成

vuejs 应用程序不起作用切换代码集成