官網地址:

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编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。