summernote
1.0.0
Personal opinion: Mainly for editing in the background, just like when you write an article on a public account, it is also written based on the rich text editor.
(2.1) Summernote supports the bootstrap front-end framework: http://www.bootcss.com/. Bootstrap is now very commonly used. The main highlight is the responsive layout, and mobile phones (mobile devices) are given priority. It is very suitable for browsing by the huge mobile phone users nowadays. So summernote is also very suitable for text editing on mobile phones.
(2.2) bootstrap also has its own rich text editor: bootstrap-wysiwyg, but why not use this? The reason is that summernote can insert videos. But many other rich text editors can also insert videos? I’m talking about domestic videos. Most other foreign rich text editors can only insert YouTube videos, but Summernote is amazing. It can insert Tencent videos and Youku videos, so it is highly recommended for editors who need to insert videos when editing text. summernote.
(2.3) Summernote is really very simple, but its functions are very complete. You can also customize the toolbar, and emoji is no exception. However, since most of the articles about inserting emoji in summernote are used to load emoji locally, you can refer to: https ://github.com/summernote/awesome-summernote and https://github.com/nilobarp/summernote-ext-emoji, But loading emoji locally would conflict with me deleting pictures, so I didn’t add the emoji function. Another way is to get the link to the api.github.emoji server through ajax, and then add it through the link, but this is Jun really doesn’t know how to use it.
(2.4) Summernote can directly obtain the value of the text box through summernote('code'), which is the body code of html, and can be directly uploaded to the database or submitted to the background.
(3.1) Because the function that comes with summernote will only convert the image to base64 format and save it, it will be very laborious to save it in the database. A random image will cost several MB, which is too much, so I rewritten it. It will be much better to save it on the server and then upload the address of the image on the server to the database.
(3.2) I have seen on many other blogs that the pictures uploaded by Summernote are rewritten and saved to the server, but it is a pity that they just paste the code and forget about it. Moreover, they are basically only saved and not deleted. I think what if It would be a pity if the picture is inserted incorrectly but cannot be deleted, so I plan to write a summernote version that allows you to upload and delete pictures. In fact, the idea is the same as my last article, just pay attention to some places: jQuery's $.ajax() interacts with the php background, and uses MutationObserver to delete images
(3.3) Anyone who knows how to use ajax should have no problem, so the rewrite of onImageUpload also uses jQuery's ajax() to interact with the background. Because ajax() also supports the File type, the FormData type is used for interaction.
(3.4) If you can rewrite it, it’s no problem. I won’t rewrite it just for convenience. I wrote the backend in PHP, but other types of backends are relatively simple to write, with only about 10 lines of code.
(4.1) Inserting a relatively large picture may cause an error. The reason lies in the php.ini file. The first reason is mainly that the picture size exceeds the allowed range. This problem can be solved by modifying the max_execution_time or post_max_size or upload_max_filesize of php.ini. It can be solved, I won’t say much more, and refer to other people’s experiences: http://blog.csdn.net/anan890624/article/details/51859863
(4.2) The second reason is also in the php.ini file, but it is not a size limit, but the temporary storage file of the file cannot be found. It may not be originally defined in the upload_tmp_dir of php.ini, so it needs to be modified. Here is what I did Modifications made on this basis.
(4.3) After modifying php.ini, you must restart the server, otherwise errors will occur even if you modify it.
