Custom style Insert to Ueditor

Summary of issues ANGULARJS custom style insertion into Ueditor

Summarize your own to the editor to customize the style of the process encountered problems, mainly the editor of the two development interface, as well as the use of angular custom style, a lot of problems, and finally in the help of * *, completed, but also the old version and the new version of the interaction is not ready, but not difficult. The following explains the problem 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, it can be used according to the configuration of the official website. Document Address: http://fex.baidu.com/ueditor/about the development of Ueditor two times there's a lot of problems here, listed here.

1.ueditor automatically filters div tags into p tags

In the custom style process, found that Div is all filtered not p tags, online find a lot of information, but all useless, and later saw the great God wrote, different versions of the Ueditor configuration is not the same, here to write my solution is: Open the Ueditor.config.js configuration file, add the following code:

  , Allowdivtranstop:false

Note that it is in window. Uediroe_config inside the manual add! In addition, some people encounter similar situation solutions, here can be consulted: http://www.cnblogs.com/Olive116/p/3464495.html

2. How do I insert a custom style into the editor?

The interface is provided in the editor, so let's take a look.

function inserthtml () {        var value = prompt (' Insert HTML code ', ');        Ue.geteditor (' editor '). ExecCommand (' inserthtml ', value)    }

So how do we use that interface in our own projects? The first thing to do is to actually list the editor, usually using Ue.geteditor () directly to get the instance.

Use the factory method Geteditor to create and reference the editor instance, and if you refer to the editor under a closure, call Ue.geteditor (' editor ') directly to get the relevant instance

Before using it, we need to introduce the editor in order to invoke its method.

<script src= "Libs/ueditor/ueditor.config.js" ></script>
<script src= "Libs/ueditor/ueditor.all.min.js" ></script>

To create an instance of the editor in our angular project, the editor provides a ready method to instantiate:

Creates a real column $scope the editor  . Ready = function (ueditor) {    window.editor = ueditor;  };

OK, we can now use editor as an example. Next look at the NG custom style.

ng Custom Style

Let's take a look at our hand-written accordion menu style. : Https://github.com/foreverjiangting/set-menu/tree/master/menu The interaction used here uses data-toggle= "collapse" but conflicts with Ng, Therefore, it is necessary to use NG to control the interaction. Let's take a look at how to write:

 <!--add Toolbars--<div class= "Set-toolbar" > 
JS inside the code is as follows:
Toolbar interaction Style  $scope. titlestyle = $scope. Titleicon = $scope. Titleyouxia = $scope. Titleserve = $titleArticle =false;  $scope. Toggle = function (style) {        $scope [style] =! $scope [style];    }
NG-controlled accordion effect, simple and lightweight, low-volume code. The effect is as follows:
When the style is written, it is inserted into the editor, so how do I insert it? There are two types, direct plug-in, and insert based on post-search articles. It's easier to insert directly.
$scope. inserthtml = function (type, item) {    if (type = = = ' titles ' | | type = = = ' IMGs ') {      Editor.execcommand (' Insert Html ', item.html);    
The effect after insertion is as follows:
Of course, what is the use of this? The main use of the content of the editor, the use of NG data binding, reflected in the app, so as to create the app's article editing interface.
 
feature creation for search
Data is naturally obtained from the API, how does ng get the data in the API? Let's take a look at the main useHTTP,BeenTakeNumberAccording to，ThenAfterPhilipUseTHENPartyMethod go  line  Back to  ,   to     http, get the 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 the Articleservice and return the API data to it, then we call its method by injecting the dependency into the page to be called. Or look at the code: the usual service invocation
The data returned by the API is placed in a folder and the controller that controls the data is placed in a single folder, so let's look at how the controller backs up the API's data.
Angular.module (' Article.controllers '). Controller (' Servicectrl ', function ($scope, $rootScope, $filter, $timeout, $ State, $stateParams, Contentservice,, Articleservice, type) {
Note that you need to inject the articleservice into the controller before you can recall the data. How to callback data? Look at the following code:
var arcfullsearch={      text: ",      result: [],      selected: [],//The selected data is first stored in the array      beginsearch:function () {          var = this;          var text = Self.text.trim ();          if (!text) return;          Articleservice.searcharticle (text). Then (            function (data) {                //Gets the data for the   second to get the contents of the array, the first one is the parameter passed in                Self.result = data.data;//get Data            }, function (err) {               console.log (err);            });}  ;
OK, we succeeded in callback to the function data. For the search section, below summarizes the unclear knowledge points.
Summarize knowledge points
1. How to make an array into a string
2. The use of Replace with a function
ECMAScript specifies that the parameter replacement of the replace () method can be a function or a string. In this case, each match calls the function, and it returns the word
 
The string will replace the text used. The first parameter returned by the function callback represents the character that is matched, the second, and then the grouped data that is matched to each other. Look at the code.
3. About [P.slice (0,index)][p.slice (index+1)] what the hell? You'll know by debugging.
Look at the synth code and see what it 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. About the principle of timer settimeout, first look at the code
Why is the output 1? Let's first look at the principle settimeout ()
SetTimeout () executes code only once. If you want to call more than once, use SetInterval () or let code itself call SetTimeout () again.
SetTimeout used to delay a period of time before doing an operation. after the specified time is delayed after loading, the expression is executed once. 
SetTimeout (code, delay time);
This delay time is not the time you expect, different browsers, the delay time is not the same. Take the example above, which means that the delay time is not 0 above. In contrast, see
That is, the settimeout is executed only once, but the time is not 0, specifically how many seconds delay, indeterminate. Then it is not surprising why the emergence of-1. Let's analyze the program,
When I=3, while (3), I minus 2, perform a settimeout
When i=2, while (2), I minus 1, perform a settimeout
When I=1, while (0), I minus 2, perform a settimeout
 
When I=0, while (0), I minus 1, at this time the program ends, but the time interval of setting settimeout is 0 will not understand execution, will be inserted into the thread's execution queue, wait until I
To 1, the previous three settimeout will be executed, and I have become-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 must execute immediately after 100 milliseconds, and the delay is likely to be longer. Because all the
Asynchronous events (including timers, or a xmlhttprequest) are executed only when there is idle time during program execution, not when you specify when to execute.
Custom style Insert to Ueditor