Vue项目中---文本框中加入simditor编辑器

官网地址:

https://simditor.tower.im

效果图

使用步骤

1.安装环境(建议按此版本安装，其他版本可能不兼容)

//安装simditor
npm install simditor@2.3.6
//卸载simditor
npm uninstall simditor//安装jquery
npm uninstall jquery
//卸载jquery
npm install jquery@3.4.1

2.代码

封装的组件代码

<template><div class="simditor"><textarea :id="id"></textarea></div>
</template>
<script>
import $ from "jquery";
import Simditor from "simditor";
import "simditor/styles/simditor.css";
export default {name: "simditor",data() {return {editor: "",};},props: {id: "", //这里传入动态id，一个页面能使用多个编辑器options: {//配置参数type: Object,default() {return {};},},},mounted() {let vm = this;this.editor = new Simditor(Object.assign({},{textarea: $(`#${vm.id}`),},this.options));this.editor.on("valuechanged", (e, src) => {this.valueChange(e, src);});},methods: {valueChange(e, val) {this.$emit("change", this.editor.getValue());},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

组件使用

<template><div class="index"><simditor :options="options" id="1" @change="change" style="width: 400px"></simditor></div>
</template>
<script>
import Simditor from "../components/Simditor";
export default {name: "index",data() {return {content: "",//工具栏配置项options: {placeHolder: "this is placeHolder",toolbarFloat: false,toolbar: ["bold","italic","title","link","image","ol","ul","indent","outdent","alignment",// "underline",// "strikethrough",// "fontScale","color",// "|",// "blockquote",// "code",// "table",// "|",// "hr",// "|",],pasteImage: true, //占位符(图片)upload: {url: `http://...`, //文件上传的接口地址params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交fileKey: "file", //服务器端获取文件数据的参数名connectionCount: 3, //同时上传多少张图片leaveConfirm: "正在上传文件",},},};},components: {Simditor,},methods: {change(val) {console.log(val); //以html格式获取simditor的正文内容},},
};
</script><style >
.simditor .simditor-body {min-height: 150px !important;
}
.simditor {border: 1px solid #eeeeee !important;
}
</style>

Vue项目中---文本框中加入simditor编辑器相关推荐

javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff）
项目中正好用到做下笔记方便以后查找 ie获取光标的位置使用document.selection.createRange() 火狐下使用document.getElementById(id).sele ...
使用JavaScript在文本框中的Enter键上触发按钮单击
我有一个文本输入和一个按钮(见下文). 当在文本框中按下Enter键时,如何使用JavaScript 触发按钮的click事件 ? 当前页面上已经有一个不同的"提交"按钮,因此我不 ...
c# 获取word表格中的内容_Java 获取、删除Word文本框中的表格
本文介绍如何来获取Word文本框中包含的表格,以及删除表格. 程序测试环境包括: IDEA JDK 1.8.0 Spire.Doc.jar 注:jar导入,可通过创建Maven程序项目,并在pom.x ...
限制文本框中只能输入数字(+,-)的正则表达式写法
最近由于项目要求,要限制文本框中只能输入数字,在网上翻查了许多资料,但符合项目实际要求的比较少. 据分析总结得以下代码,经测试在IE6.0+,ff,chrome下有效: <input type= ...
java word文本框_Java 读取Word文本框中的文本、图片、表格
Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...
要在textarea文本框中粘贴图片怎么办？
项目需求: 有一条描述信息(文字 + 图片),点击编辑,文本框中显示描述信息,并且可以对描述信息做出修改拆解需求: 文本框里要能显示预设的值(文字 + 图片) 文本框里还要能支持粘贴文字与图片实际 ...
Java 读取Word文本框中的文本、图片、表格
Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法
一.前言这段时间做个项目,要涉及到flash开发.真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发 ...
Firefox/Chrome下flash的wmode参数设为opaque或transparent时输入文本框中无法输入中文汉字的解决方法...
这段时间做个项目,要涉及到flash开发.真悲催,之前没有接触过flash开发,于是找个哥们临时教了一下Adobe Flash CS5 的使用方法,感觉还蛮简单,所见即所得,和MFC下的开发有点像,渐 ...

Vue项目中---文本框中加入simditor编辑器

官网地址:

效果图

使用步骤

1.安装环境(建议按此版本安装，其他版本可能不兼容)

2.代码

Vue项目中---文本框中加入simditor编辑器相关推荐

最新文章

热门文章