I'll summarize the problems I encountered in the process of customizing the style for the editor, mainly the editor's secondary development interface and the customizing the style with angular. There are many problems. Finally, with the help of **, it was completed. There are still no interaction between the old version and the new version, but it's not difficult. The following explains the issues separately.
Development of ueditor
You can download any version on the official website and use it: http://ueditor.baidu.com/website/download.html After downloading, you can use it according to the configuration on the official website. Document address: http://fex.baidu.com/ueditor/ There are quite a lot of problems with ueditor secondary development, and they are listed here.
1. Ueditor automatically filters the div tag into a p tag
During the custom style process, I found that all the divs were filtered and unp tags were found. I found a lot of information online, but none of them were useful. Later, I saw a master writing that the configuration of different versions of ueditor is different. Here I wrote my solution: Open the ueditor.config.js configuration file and add the following code:
, allowDivTransToP: false
Note that it is manually added in window.UEDIROE_CONFIG! In addition, some people have encountered similar situations and can refer to: http://www.cnblogs.com/Olive116/p/3464495.html
2. How to insert customized styles into the editor?
The interface is provided in the editor, let’s take a look.
function insertHtml() {var value = prompt('insert html code', '');UE.getEditor('editor').execCommand('insertHtml', value)}So how do you use this interface in our own project? First, you need to realize the editor, usually use UE.getEditor() directly to get the instance.
//Use the factory method getEditor to create and reference an editor instance. If you refer to the editor under a certain closure, you can directly call UE.getEditor('editor') to get the relevant instance before using it. We need to introduce the editor in order to call its method.
<script src="libs/ueditor/ueditor.config.js"></script><script src="libs/ueditor/ueditor.all.min.js"></script>
Create an editor example in our angular project. The editor provides ready methods to instantiate:
// Create the actual column of the editor $scope.ready = function (ueditor) {window.editor = ueditor;};OK, we can now use the editor instance. Next, let’s take a look at the custom styles.
Custom style
Let’s take a look at the style of the accordion menu that we wrote in hand. Download address: https://github.com/foreverjiangting/set-menu/tree/master/menu The interaction used here uses data-toggle="collapse", but it conflicts with ng, so ng needs to be used to control the interaction. Let's see how to write:
<!-- Add toolbar--><div><h4>Toolbar</h4><!-- sidebar content --><div><a ng-click="toggle('titleStyle')" ><span></span>Home</a><ul ng-hide="titleStyle" id="userMeun"><li ng-repeat="title in sources.titles" ng-click="insertHtml('titles', title)"><a>{{title.name}}</a></li></ul><a ng-click="toggle('titleIcon')"><span></span>Icon</a><ul ng-hide="titleIcon" id="articleMenu"><li ng-repeat="img in sources.imgs" ng-click="insertHtml('imgs', img)"><a><img ng-src="{{img.url}}"></a></li></ul><a ng-click="toggle('titleYouxia')"><span>Life</span></a><ul ng-hide="titleYouxia" id="glyphicnMenu"><li ng-repeat="yx in sources.yxs" ng-click="insertHtml('yxs', yx)"><a>{{yx.name}}</a></li></ul><a ng-click="toggle('titleServe')"><span></span>Message Board</a><ul ng-hide="titleServe" id="serveMenu"><li ng-repeat="ser in sources.sers" ng-click="insertHtml('sers', ser)"><a>{{ser.name}}</a></li></ul><a ng-click="toggle('titleArticle')"><span></span>Recommended Articles</a><ul ng-hide="titleArticle" id="ArticleMenu"><li ng-repeat="arc in sources.arcs" ng-click="insertHtml('arcs', arc)"><a>{{arc.article}}</a></li></ul></div><!-- Theme of the content ends--></div>The code in js is as follows:
// Toolbar interaction style $scope.titleStyle = $scope.titleIcon = $scope.titleYouxia = $scope.titleServe = $titleArticle=false;$scope.toggle = function(style){$scope[style] =! $scope[style];}The accordion effect controlled by ng is simple and light, with a small amount of code.
The effects are as follows:
After the style is written, it will be inserted into the editor. So how to insert it? There are two types of things here: insert directly, and insert according to the articles after searching. It is easier to insert directly.
$scope.insertHtml = function (type, item) {if (type === 'titles' || type === 'imgs') {editor.execCommand('insertHtml', item.html);}The effect after insertion is as follows:
Of course, what's the use of doing this? It mainly uses the content in the editor and uses ng data binding to reflect it on the app, thereby creating the app's article editing interface.
Search function production
Data is naturally obtained from the API. How to obtain the data in the API? Let’s take a look. We mainly use http to obtain data, then use the then method to callback, get http, get data, and then use the then method to callback, get scope.data data.
angular.module('service').service('ArticleService', function ($http) {return {searchArticle: function(title){ return $http.get('api/article/search',{ data: { title:title } }); } }; });Here we declare ArticleService and return it api data, so we inject the dependency into the page to call it to call its method. Let's look at the code: Usually service calls
The data returned by the API is placed in a folder, and the controller that controls the data is placed in a folder. Let's take a look at how the API data is called back in the controller.
angular.module('article.controllers').controller('serviceCtrl', function ($scope, $rootScope, $filter, $timeout, $state, $stateParams, ContentService,, ArticleService, type) {Note that you need to inject ArticleService into the controller before you can call back the data. How to call back data? Look at the following code:
var arcfullSearch={text: '',result: [],selected: [], //Stored the selected data first into the array beginSearch: function () {var self = this;var text = self.text.trim();if(!text) return;ArticleService.searchArticle(text).then(function (data){ //Get the data. The second data indicates the content in the array. The first is the parameter passed in self.result = data.data;//Get the data}, function (err) {console.log(err);}); },};OK, we successfully callback to the function data. Regarding the search section, the following is a summary of unknown knowledge points.
Summary of knowledge points
1. How to write an array into a string
2. Regarding the usage of replacing replace with function
ECMAScript stipulates that the parameter replacement of the replace() method can be a function or a string. In this case, each match calls the function, and the word it returns
The string will be used instead of text. The first parameter returned by the function callback function indicates the matching character, and the second and subsequently the matching packet data. Let’s take a look at the code.
3. What the hell is [p.slice(0,index)][p.slice(index+1)]? You will know after debugging.
Let’s see what the synthesis code means.
var arr = serve.map(function (xx) {return item.html.replace(/{{([/w/.]+?)}}/gi, function (match, p) {var index = p.indexOf('.'); if (index > 0) {return formatField(xx[p.slice(0, index)][p.slice(index+1)]);} else {return formatField(xx[p]);}}); });4. Regarding the principle of timer setTimeout, let’s take a look at the code first
Why is the output -1? Let's first look at the principle setTimeout()
setTimeout() executes code only once. If you want to call multiple times, use setInterval() or have the code itself call setTimeout() again.
setTimeout is used to delay for a period of time before performing a certain operation. That is, after the specified time is delayed after loading, the expression is executed once, and only once is executed.
setTimeout(code, delay time);
The delay time is not the time you expect. Different browsers have different delay times. Take the example above, that is, the delay time is not the 0 above. Comparison
In other words, setTimeout is only executed once, but the time is not 0. It is not certain how many seconds delay is. Then it is not surprising why it appears as -1. Let's analyze the program.
When i=3, after while (3), i is reduced to 2 and execute a setTimeout
When i=2, after while(2), i is reduced to 1 and execute a setTimeout
When i=1, after while(0), i is reduced to 2, and a setTimeout is executed
When i=0, after while (0), i decreases to -1. At this time, the program ends, but the time interval for setting setTimeout is 0 will not understand the execution, and it will be inserted into the thread's execution queue, waiting for i
When it becomes -1, the previous three setTimeouts will be executed, and at this time i has changed to -1, so the output is -1. The console printed at this time is printed by the previous console.
setTimeout is asynchronous code, which means that writing setTimeout(fn, 100) does not mean that fn will be executed immediately after 100 milliseconds, and the delay is likely to be longer. Because all
Asynchronous events (including timers, or an XMLHttpRequest completed) will only be executed when there is free during the execution of the program, not when you stipulate when you execute.
The above is the summary of the problem of inserting AngularJs custom style into ueditor introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!