Webpack+vueの日付とリッチテキストプラグイン

3887 ワード

Webpackはプラグインをインストールするのが本当に難しいので、最初はsummernoteを使うつもりでしたが、何度も試してみましたがだめでした.外部cssとjsを導入するので
最後に2つのプラグインといくつかの穴を探しました
日付datePickerプラグイン:https://github.com/dai-siki/vue-datepicker-simpleこのプラグインには穴がありません.手順に従って直接使えばいいです.------リッチテキストプラグインです.https://github.com/PeakTai/vue-html5-editor
このプラグインは、インストール後global環境に貼り付けます:var editor = require("vue-html5-editor") Vue.use(editor, { //global component name name: "vue-html5-editor", //custom icon class of built-in modules,default using font-awesome icons: { text: "fa fa-pencil", color: "fa fa-paint-brush", font: "fa fa-font", align: "fa fa-align-justify", list: "fa fa-list", link: "fa fa-chain", unlink: "fa fa-chain-broken", tabulation: "fa fa-table", image: "fa fa-file-image-o", hr: "fa fa-minus", eraser: "fa fa-eraser", undo: "fa-undo fa", "full-screen": "fa fa-arrows-alt", info: "fa fa-info", }, //config image module image: { //Url of the server-side,default null and convert image to base64 server: null, //the name for file field in multipart request fieldName: "image", //max file size sizeLimit: 512 * 1024, // default true,if set to true,the image will resize by localResizeIMG (https://github.com/think2011/localResizeIMG) compress: true, //follows are options of localResizeIMG width: 1600, height: 1600, quality: 80, //handle response data,return image url uploadHandler(responseText){ //default accept json data like {ok:false,msg:"unexpected"} or {ok:true,data:"image url"} var json = JSON.parse(responseText) if (!json.ok) { alert(json.msg) } else { return json.data } } }, //default en-us, en-us and zh-cn are built-in language: "zh-cn", i18n: { //specify your language here "zh-cn": { "align": " ", "image": " ", "list": " ", "link": " ", "unlink": " ", "table": " ", "font": " ", "full screen": " ", "text": " ", "eraser": " ", "info": " ", "color": " ", "please enter a url": " ", "create link": " ", "bold": " ", "italic": " ", "underline": " ", "strike through": " ", "subscript": " ", "superscript": " ", "heading": " ", "font name": " ", "font size": " ", "left justify": " ", "center justify": " ", "right justify": " ", "ordered list": " ", "unordered list": " ", "fore color": " ", "background color": " ", "row count": " ", "column count": " ", "save": " ", "upload": " ", "progress": " ", "unknown": " ", "please wait": " ", "error": " ", "abort": " ", "reset": " " } }, //the modules you don't want hiddenModules: [], //keep only the modules you want and customize the order. //can be used with hiddenModules together visibleModules: [ "text", "color", "font", "align", "list", "link", "unlink", "tabulation", "image", "hr", "eraser", "undo", "full-screen", "info", ], //extended modules modules: { //omit,reference to source code of build-in modules } })htmlページに入り、外部アイコンスタイルを導入