Simditor Learning--vuejs Integration Simditor

Tagged with: official website Val Bower team loading the offical document Bow time Introduction

Nagging

Because the project needs me to study and integrate it in Vue Handy later, the details of the official documentation are here. I hope you have some good suggestions to let me continue to improve.

Simditor Introduction

Simditor is a rich text editor used by the team collaboration tool Tower, developed based on jquery.

Compared to the traditional editor it is characterized by:

1. Reduced functionality, fast loading
2. Standard HTML for output formatting
3. Every feature has a very good experience.
4. Compatible browsers: ie10+, Chrome, Firefox, Safari.

Vue Integrated Download:

Click here to download the compressed file. You can also install Simditor via bower or NPM:

• $ npm install simditor
• $ bower install simditor

Here the main talk of integration into the Vuejs, other introduction way to self-browsing the official website.

Initialization

The HTML template is as follows:

<: id= "Textnames">    <p>{{ Value}}</p></textarea>

We just need him to receive the parent component's value and pass the value back to the parent component, so it doesn't need to be too complicated.

The JS template is as follows:

　

Import simditor from ' Simditor 'Exportdefault{props: [' value '], data () {return{textnames:NewDate (). GetTime (),//Here prevents multiple Rich Text conflicts editor:‘‘,//Save Simditor Object toolbar: [' Bold ', ' italic ', ' underline ', ' strikethrough ',                    ' Color ', ' | ', ' ol ', ' ul ', ' blockquote ', ' Code ', ' | ',                    ' Link ', ' image ', ' | ', ' indent ', ' outdent ']//custom Toolbar}}, Ready () { This. Createeditor ()}, methods: {Createeditor () {var_this = This                 This. Editor =NewSimditor ({textarea: $ (' # ' +_this.namess), toolbar: _this.toolbar, upload: {Url:ap IC+ '/api/commannex/uploadfiles ',//the interface address of the file upload//Params:null,//key-value pairs, specifying additional parameters for the file upload interface, submitted with the file when uploadingFilekey: ' Filedatafilename ',//server-side get parameter names for file dataConnectioncount:3,//upload number leaveconfirm:' Uploading Files '}, Pasteimage:true,//whether to allow paste upload images, dependency upload options, only support Firefox and Chrome browser. Tabindent:true,//whether tab to indent with a key in the editor                });  This. Editor.on ("ValueChanged",function(e, src) {_this.value=_this.editor.getvalue ()}) ValueChanged is Simditor comes with get worth the way}}    }

image Paste the uploaded address defaults to

Need to modify the Upload.js file to find the following code

_this.trigger (' uploadprogress ', [File, File.size, File.size]);
_this.trigger (' uploadsuccess ', [File, Newresult]);  return $ (document). Trigger (' uploadsuccess ', [File, result, _this]);

Modify it to the following code

var newresult = Json.parse ("{\" file_path\ ": \" + result.) Data[0]. FILEURL + "\"} "); Get the correct address _this.trigger (' uploadprogress ', [File, File.size, File.size]);
_this.trigger (' uploadsuccess ', [File, Newresult]);  return

Parent page Reference:

　　

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

If you need to set a rich text box value, use the following code

this. $refs. Simditor.editor.setValue (Data.describe)

Probably simditor components on the package, I novice pure hand hit if there is anything wrong, please many guidance.

Simditor Learning--vuejs Integration Simditor